D3 js example that combines Leaflet MAP with D3 script type text javascript src https d3js org d3 v6 min js script ref https notebook xbdev net index php page maps script src https unpkg com leaflet 1 7 1 dist leaflet js script link rel stylesheet href https unpkg com leaflet 1 7 1 dist leaflet css style body height 600px margin 0 map height 100 leaflet container leaflet tile pane img filter grayscale 1 style div id map div script var data function addMarkers data forEach function d var marker L circleMarker d latitude d longitude marker addTo map Initialise map var map L map map L tileLayer https s tile openstreetmap org z x y png attribution copy a href https www openstreetmap org copyright OpenStreetMap a contributors addTo map map setView 55 2 6 Get CSV and plot points d3 csv https s3 us west 2 amazonaws com s cdpn io 2814973 charge points slim csv then function csv data csv addMarkers console log ready script D3 js example that combines Leaflet MAP with D3 script type text javascript src https d3js org d3 v6 min js script ref https notebook xbdev net index php page maps script src https unpkg com leaflet 1 7 1 dist leaflet js script link rel stylesheet href https unpkg com leaflet 1 7 1 dist leaflet css style body height 600px margin 0 map height 100 leaflet container leaflet tile pane img filter grayscale 1 style div id map div script var data map var colorScale Charge Your Car B6A6CA Source London 6D98BA POD Point FC814A Chargemaster POLAR D282A6 Ecotricity Electric Highway 64B6AC ChargePoint Services EEC170 ChargePlace Scotland 6D98BA APT AF4319 function initMap map L map map L tileLayer https s tile openstreetmap org z x y png attribution copy a href https www openstreetmap org copyright OpenStreetMap a contributors addTo map map setView 55 2 6 function getData d3 csv https s3 us west 2 amazonaws com s cdpn io 2814973 charge points slim csv then function csv data csv addMarkers function addMarkers data forEach function d let marker L circleMarker d latitude d longitude var inService d chargeDeviceStatus In service var color colorScale d deviceControllerName aaa if inService marker setStyle radius 8 fillColor color fillOpacity 1 color ddd weight 0 25 else marker setStyle radius 8 fillColor eee fillOpacity 0 5 color 777 weight 1 marker addTo map initMap getData console log ready script D3 js example that combines Leaflet MAP with D3 script type text javascript src https d3js org d3 v6 min js script ref https notebook xbdev net index php page maps script src https unpkg com leaflet 1 7 1 dist leaflet js script link rel stylesheet href https unpkg com leaflet 1 7 1 dist leaflet css style body height 600px margin 0 map height 100 leaflet container leaflet tile pane img filter grayscale 1 leaflet tooltip pane h4 margin 0 text align center font size 1 25em legend position absolute right 10px top 10px width 220px z index 1000 legend item border left 18px solid padding left 5px font size 14px line height 18px margin bottom 1px info position absolute bottom 10px left 10px style div id map div div id legend div class item style border color B6A6CA Charge Your Car div div class item style border color 6D98BA Source London div div class item style border color FC814A POD Point div div class item style border color D282A6 Chargemaster POLAR div div class item style border color 64B6AC Ecotricity Electric Highway div div class item style border color EEC170 ChargePoint Services div div class item style border color 6D98BA ChargePlace Scotland div div class item style border color AF4319 APT div div class item style border color AAAAAA Other div div script var data map var colorScale Charge Your Car B6A6CA Source London 6D98BA POD Point FC814A Chargemaster POLAR D282A6 Ecotricity Electric Highway 64B6AC ChargePoint Services EEC170 ChargePlace Scotland 6D98BA APT AF4319 function initMap map L map map L tileLayer https s tile openstreetmap org z x y png attribution copy a href https www openstreetmap org copyright OpenStreetMap a contributors addTo map map setView 55 2 6 function getTooltipContent d var content content h4 d name h4 content div Postcode d postcode div content div Operator d deviceControllerName div content div Status d chargeDeviceStatus div return content function addMarkers data forEach function d var marker L circleMarker d latitude d longitude var inService d chargeDeviceStatus In service var color colorScale d deviceControllerName aaa if inService marker setStyle fillOpacity 1 fillColor color color ddd radius 8 weight 0 25 else marker setStyle fillOpacity 0 5 fillColor eee color 777 radius 8 weight 1 marker bindTooltip getTooltipContent d marker addTo map initMap d3 csv https s3 us west 2 amazonaws com s cdpn io 2814973 charge points slim csv then function csv data csv addMarkers console log ready script
javascript src https d3js org d3 v6 min js script ref https notebook xbdev net index php page maps script src https unpkg com leaflet 1 7 1 dist leaflet js script link rel stylesheet href https unpkg com leaflet 1 7 1 dist leaflet css style body height 600px margin 0 map height 100 leaflet container leaflet tile pane img filter grayscale 1 leaflet tooltip pane h4 margin 0 text align center font size 1 25em legend position absolute right 10px top 10px width 220px z index 1000 legend item border left 18px solid padding left 5px font size 14px line height 18px margin bottom 1px info position absolute bottom 10px left 10px style div id map div div id legend div class item style border color B6A6CA Charge Your Car div div class item style border color 6D98BA Source London div div class item style border color FC814A POD Point div div class item style border color D282A6 Chargemaster POLAR div div class item style border color 64B6AC Ecotricity Electric Highway div div class item style border color EEC170 ChargePoint Services div div class item style border color 6D98BA ChargePlace Scotland div div class item style border color AF4319 APT div div class item style border color AAAAAA Other div div script var data map var colorScale Charge Your Car B6A6CA Source London 6D98BA POD Point FC814A Chargemaster POLAR D282A6 Ecotricity Electric Highway 64B6AC ChargePoint Services EEC170 ChargePlace Scotland 6D98BA APT AF4319 function initMap map L map map L tileLayer https s tile openstreetmap org z x y png attribution copy a href https www openstreetmap org copyright OpenStreetMap a contributors addTo map map setView 55 2 6 function getTooltipContent d var content content h4 d name h4 content div Postcode d postcode div content div Operator d deviceControllerName div content div Status d chargeDeviceStatus div return content function addMarkers data forEach function d var marker L circleMarker d latitude d longitude var inService d chargeDeviceStatus In service var color colorScale d deviceControllerName aaa if inService marker setStyle fillOpacity 1 fillColor color color ddd radius 8 weight 0 25 else marker setStyle fillOpacity 0 5 fillColor eee color 777 radius 8 weight 1 marker bindTooltip getTooltipContent d marker addTo map initMap d3 csv https s3 us west 2 amazonaws com s cdpn io 2814973 charge points slim csv then function csv data csv addMarkers console log ready script