D3 Examples - #leaflet / Ajouter un GeoJSON

xxxxxxxxxx
 
<html>
<head>
<title>A Leaflet map!</title>
<meta charset="UTF-8">
​
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
​
<style>
#map {width: 90%; height:600px; margin: auto; }
</style>
​
</head>
​
<body>
​
  <div id="map"></div>
  
<script>
​
  // 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>
    