D3 Examples - Leaflet simple marker

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <title>Exemple de Leaflet sans Browserify</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <style type="text/css">
  #map { height: 380px; }
  </style>
  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>
  var my_json;
​
  var map = L.map('map').setView([51.505, -0.09], 14);
​
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
  }).addTo(map);
​
  var smallIcon = new L.Icon({
    iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-icon.png',
    iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-icon-2x.png',
    iconSize:    [25, 41],
    iconAnchor:  [12, 41],
    popupAnchor: [1, -34],
    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
    shadowSize:  [41, 41]
  });
​
  function onEachFeature(feature, layer) {
    console.log(feature);
    layer.bindPopup(feature.properties.ATT1);
  }
​
  $.getJSON('sample.json', function(data) {
    console.log(data);
​
    L.geoJson(data, {
      pointToLayer: function(feature, latlng) {
        console.log(latlng, feature);
        return L.marker(latlng, {
          icon: smallIcon
        });
      },
      onEachFeature: onEachFeature
    }).addTo(map);
  });
  </script>
</body>
</html>
​
    