Thanks for your hard work. Everything works great, but the hybrid view (satellite+place/street names) only shows satellite imagery-no names.
I did notice, loading it on a bad connection, that the layer with the names shows up briefly and then is buried, which makes me wonder if it's a z-index issue.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Map, TileLayer, LayersControl, MapControl } from 'react-leaflet';
import { GoogleLayer } from './GoogleLayer';
import { geolocated } from 'react-geolocated';
import 'leaflet-geocoder-mapzen';
import SearchBox from './searchBox';
import Control from 'react-leaflet-control';
import { centroid } from '@turf/turf';
import PlotMarker from './plotMarker';
const { BaseLayer } = LayersControl;
const key = 'MYKEY';
const hybrid = 'HYBRID';
const terrain = 'TERRAIN';
const road = 'ROADMAP';
const satellite = 'SATELLITE';
const centerLat = props => {
if (
props.isGeolocationAvailable &&
props.isGeolocationEnabled &&
props.coords
) {
return props.coords.latitude;
}
return 32.11;
};
const centerLong = props => {
if (
props.isGeolocationAvailable &&
props.isGeolocationEnabled &&
props.coords
) {
return props.coords.longitude;
}
return 34.963;
};
const mapCenterPoint = props => {
if (props.plots && props.selectedPlot) {
let ourPlot = props.plots.filter(
plot => plot._id === props.selectedPlot
)[0];
try {
let center = centroid(ourPlot.feature).geometry.coordinates.reverse();
return { center: center, zoom: 16 };
} catch (e) {
console.log(e);
}
}
return { center: [centerLat(props), centerLong(props)], zoom: 8 };
};
export class PlotMap extends Component {
markers = props => {
if (props.plots) {
return (
<div>
{(props.filteredPlots || props.plots).map(
plot =>
plot.feature &&
plot._id && (
<PlotMarker
key={plot._id}
id={plot._id}
name={plot.name}
geoJSON={plot.feature}
/>
)
)}
</div>
);
}
};
render() {
return (
<div
className="col-sm-8 m-auto p-0 flex-column float-right"
style={{ height: `85vh` }}>
<Map
center={mapCenterPoint(this.props).center}
zoom={mapCenterPoint(this.props).zoom}
zoomControl={true}
onZoomend={e => {
this.props.setZoomLevel(e.target.getZoom());
}}
onMoveEnd={e => {
this.props.setMapCenter(e.target.getCenter());
}}>
<LayersControl position="topright">
<BaseLayer name="Google Maps Roads">
<GoogleLayer googlekey={key} maptype={road} />
</BaseLayer>
<BaseLayer name="Google Maps Terrain">
<GoogleLayer googlekey={key} maptype={terrain} />
</BaseLayer>
<BaseLayer checked name="Google Maps Hybrid">
<GoogleLayer
googlekey={key}
maptype={hybrid}
libraries={['geometry', 'places']}
/>
</BaseLayer>
</LayersControl>
<SearchBox postion="bottomright" />
{this.markers(this.props)}
</Map>
</div>
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent