Skip to content

Instantly share code, notes, and snippets.

@scottpdawson scottpdawson/SkiMap.js
Last active May 27, 2020

Embed
What would you like to do?
Map, CircleMarker, and Popup
export default class SkiMap extends Component {
state = defaultMapState;
render() {
return this.props.resorts ? (
<Map
center={[this.state.lat, this.state.lng]}
zoom={this.state.zoom}
style={{ width: "100%", position: "absolute", top: 0, bottom: 0, zIndex: 500, }}
updateWhenZooming={false}
updateWhenIdle={true}
preferCanvas={true}
minZoom={this.state.minZoom}
>
<TileLayer
attribution={attribution}
url='https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
/>
{this.props.resorts.map((resort, idx) =>
<CircleMarker
key={`resort-${resort.id}`}
color={getMarkerColor(resort)}
opacity={1}
radius={5}
weight={1}
onClick={() => {
this.setState({ activeResort: resort });
}}
center={resort.point}>
</CircleMarker>
)}
{this.state.activeResort && <Popup
position={this.state.activeResort.point}
onClose={() => {
this.setState({ activeResort: null })
}}
>
<SkiMapTooltip
resort={this.state.activeResort}
verticalUnits={this.props.verticalUnits}
/>
</Popup>}
</Map>
) : (
"Data is loading..."
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.