Bioprocess engineer with interest in urban metabolism. Contributor to FOSS community building projects.
Published
Edited
Nov 12, 2020
NODE = ({ MIN_RADIUS: 2.5, MAX_RADIUS: 20, PADDING: 2 })
createBaseMap = {
let map = L.map(container, {
// mapid is the id of the div where the map will appear
var map = L
.map('mapid')
.setView([47, 2], 5); // center position + zoom
// Add a tile to the map = a background. Comes from OpenStreetmap
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
maxZoom: 6,
}).addTo(map);
// Add a svg layer to the map
L.svg().addTo(map);
// Create data for circles:
var markers = [
{long: 9.083, lat: 42.149}, // corsica
{long: 7.26, lat: 43.71}, // nice
{long: 2.349, lat: 48.864}, // Paris
{long: -1.397, lat: 43.664}, // Hossegor
{long: 3.075, lat: 50.640}, // Lille
{long: -3.83, lat: 48}, // Morlaix
];
// Select the svg area and add circles:
d3.select("#mapid")
.select("svg")
.selectAll("myCircles")
.data(markers)
.enter()
.append("circle")
.attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })
.attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })
.attr("r", 14)
.style("fill", "red")
.attr("stroke", "red")
.attr("stroke-width", 3)
.attr("fill-opacity", .4)
// Function that update circle position if something change
function update() {
d3.selectAll("circle")
.attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })
.attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })
}
// If the user change the map (zoom or drag), I update circle position:
map.on("moveend", update)
</script>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.