Published
Edited
Sep 25, 2018
2 forks
Importers
centerpoint = {
let map = new mapboxgl.Map({
container: mapContainer,
center: [0, 0],
zoom: 0,
style: blankStyle
});
map.on('click', 'fire', function (e) {
console.log(e.features[0].properties);
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map);
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());
map.on('load', function () {
map.addLayer({
"id": "circle-id",
"type": "circle",
"source": {
"type": "geojson",
"data": nullIsland
},
"paint": {
'circle-opacity': 0.8,
'circle-color': 'rgb(255, 0, 0)'
}
});
// Null Island grid line
map.addLayer({
"id": "nullislandgrid",
"type": "line",
"source": {
"type": "geojson",
"data": nullIslandGrid
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "black",
"line-width": 1
}
});
});
return Generators.observe(change => {
map.on('mousemove', e => {
change(e.lngLat);
});
});
}
mapboxgl = {
let mapboxgl = await require('mapbox-gl@0.49.0');
mapboxgl.accessToken = '';
return mapboxgl;
}
md`
### Mapbox CSS
<link href='https://unpkg.com/mapbox-gl@0.49.0/dist/mapbox-gl.css' rel='stylesheet' />
`
nullIsland = {
return {"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[0,0]},"properties":{}}]}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
