constructor(props) { super(props); this.state = { viewport: { width: window.innerWidth, height: 600, latitude: mapConfig.center[0], longitude: mapConfig.center[1], zoom: mapConfig.zoom, isDragging: false, startDragLngLat: mapConfig.center, pitch: 50, bearing: 0 } }; this.onChangeViewport = this.onChangeViewport.bind(this); }
render() { // create an array with marker components const PigeonMarkers = markers.map(marker => ( <Marker key={`marker_${marker.name}`} anchor={marker.latlng} payload={marker.name} onClick={this.onMarkerClick} /> )); return ( <div className="map"> <Map width={window.innerWidth} height={600} defaultCenter={mapConfig.center} defaultZoom={mapConfig.zoom} provider={getProvider} > {PigeonMarkers} </Map> </div> ); }
render() { // create an array with marker components const LeafletMarkers = markers.map(marker => ( <Marker position={marker.latlng} key={`marker_${marker.name}`}> <Popup> <span>{marker.name}</span> </Popup> </Marker> )); return ( <div className="map"> <Map center={mapConfig.center} zoom={mapConfig.zoom} className="map__reactleaflet"> <TileLayer url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png" attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attribution">CARTO</a>' /> {LeafletMarkers} {/* You can now try to find Alabama on a Map to see how it looks like now with GeoJSON*/} <GeoJSON data={data} style={this.getStyle} /> </Map> </div> ); }
render() { const GoogleMapsMarkers = markers.map(marker => ( <CustomMarker key={`marker_${marker.name}`} lat={marker.latlng[0]} lng={marker.latlng[1]} text={marker.name} /> )); return ( <GoogleMapReact defaultCenter={mapConfig.center} defaultZoom={mapConfig.zoom} layerTypes={['TrafficLayer', 'TransitLayer']} bootstrapURLKeys={{ key: CONFIG.GOOGLE_MAPS_API_KEY, language: 'de' }} > {GoogleMapsMarkers} </GoogleMapReact> ); }
constructor(props) { super(props); this.state = { viewport: { width: window.innerWidth, height: 600, latitude: mapConfig.center[0], longitude: mapConfig.center[1], zoom: mapConfig.zoom, isDragging: false, startDragLngLat: mapConfig.center, pitch: 50, bearing: 0 }, geojson: null }; requestJson(`${process.env.BASENAME}data/berlin_bezirke.json`, (error, response) => { if (!error) { this.setState({ geojson: response }); } }); this.onChangeViewport = this.onChangeViewport.bind(this); }