#leaflet / Ajouter un GeoJSON

Incorporer à la carte un GeoJSON en ligne (ici sur un portail Open data)

<html>
<head>
<title>A Leaflet map!</title>
<meta charset="UTF-8">

</head>

<body>

// Initialiser la carte
    
var map = L.map('map', {
                 center: [48.11, -1.66],
                 zoom: 13 });
  
  // Fond de carte
  
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png').addTo(map);
   
	// Ajout des Stations de vélos
  
   var url = 'https://raw.githubusercontent.com/mastersigat/data/main/velostar.geojson';

$.getJSON(url, function (geojson) {
  var velos = L.geoJson(geojson,{
      
      // Transformer les marqueurs en point
      pointToLayer: function (geoJsonPoint, latlng) {
        return L.circleMarker(latlng);
      },
      
      // Modifier la symbologie des points
      style: function (geoJsonFeature) {
        return {
          fillColor: '#001f3f',
          radius: 6,
          fillOpacity: 0.7,
          stroke: false};
      },
}
 ).addTo(map);
   velos.bindPopup(function(velos) {console.log(velos.feature.properties);
return "<h1> Station : "+velos.feature.properties.nom+"</h1>"+"<hr><h2>" +velos.feature.properties.nombreemplacementstheorique+ "&nbsp; vélos</h2>" ;
});

});

</script>
  
</body>
</html>

https://unpkg.com/leaflet@1.0.3/dist/leaflet.js

https://code.jquery.com/jquery-3.1.1.min.js