centerpoint = {
var bounds = [
[-180, 19], // Southwest coordinates
[-60, 71] // Northeast coordinates
];
let map = new mapboxgl.Map({
maxBounds: bounds,
container: mapContainer,
center: [0, 0],
zoom: 0,
style: blankStyle
});
map.on('click', 'fire', function (e) {
console.log(e.features[0].properties);
});
map.addControl(new mapboxgl.NavigationControl());
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": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson"
},
"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@1.10.0');
mapboxgl.accessToken = '';
return mapboxgl;
}
md`
### Mapbox CSS
<link href='https://unpkg.com/mapbox-gl@1.10.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.
