import { LngLat } from 'mapbox-gl' ; import * as React from 'react' ; import ReactMapboxGl , { ZoomControl } from 'react-mapbox-gl' ; import { Feature , FeatureCollection } from '../../utils' ; import { ChoroplethLayer } from './choropleth-layer' ; import { CenterZoomLevel , LatLng } from './latlng' ; import { RouteLayer } from './route-layer' ; export interface Props { view : CenterZoomLevel ; fillColors : { [ geoId ] : string ; } ; defaultFillColor : string ; routes : FeatureCollection [ ] ; onLoad ? : ( map : mapboxgl . Map ) => void ; onError : ( error : Error ) => void ; onClick ? : ( point : LatLng ) => void ; onChoroplethHover ? : ( feature : Feature , lngLat : LngLat , map : mapboxgl . Map ) => any ; onChoroplethLeave ? : ( map : mapboxgl . Map ) => any ; children ? : any ; } interface State { center : [ number , number ] ; zoom : [ number ] ; } const MapboxGL = ReactMapboxGl ( { accessToken : 'pk.eyJ1Ijoic2lkZXdhbGstdXNlcnMiLCJhIjoiY2pnbnRyeXcwMGt6NDJxcjF4dDdzMDZpOSJ9.f17n6qwPPrk4z8yAP_-C0Q' , } ) ; function viewToState ( view ) { return { center : [ view . center . lng , view . center . lat ] , zoom : [ view . zoomLevel ] , } ; } export class Map extends React . Component < Props , State > { constructor ( props ) { super ( props ) ; this . state = viewToState ( props . view ) ; this . onClick = this . onClick . bind ( this ) ; this . onZoomEnd = this . onZoomEnd . bind ( this ) ; } render ( ) { const { center , zoom } = this . state ; const { routes , fillColors , defaultFillColor } = this . props ; const routesEls = routes . map ( ( routeGeojson , i ) => ( < RouteLayer before = "origin" geojson = { routeGeojson } visibility = { 'visible' } key = { `route${ i }` } />)); return ( < MapboxGL center = { center } zoom = { zoom } containerStyle = { { flex : '1' } } style = { 'mapbox://styles/sidewalk-users/cjgpn0tle002m2rsbush2ckbj' } onStyleLoad = { this . props . onLoad } onZoomEnd = { this . onZoomEnd } onClick = { this . onClick } > < ChoroplethLayer idProperty = "geo_id" fillColors = { fillColors } defaultFillColor = { defaultFillColor } visibility = "visible" before = "poi-small" / > { routesEls } { this . props . children } < ZoomControl position = "bottom-right" / > < /MapboxGL>); } onClick ( map , event ) { if ( this . props . onClick ) { this . props . onClick ( ( event as any ) . lngLat ) ; } } componentWillReceiveProps ( nextProps ) { const { view } = nextProps ; if ( view !== this . props . view ) { this . setState ( { center : [ view . center . lng , view . center . lat ] , } ) ; } } onZoomEnd ( map ) { const { lng , lat } = map . getCenter ( ) ; const zoom = map . getZoom ( ) ; this . setState ( { center : [ lng , lat ] , zoom : [ zoom ] , } ) ; } }