block by ThomasG77 61fa02b35abf4b971390

Leaflet simple marker

Full Screen

index.html

<!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="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <style type="text/css">
  #map { height: 380px; }
  </style>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.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('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="//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>

sample.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "ATT1": "azerty",
        "ATT2": "qsdf"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.0940704345703125,
          51.505750806437845
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ATT1": "uiop",
        "ATT2": "ghjk"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.08591651916503906,
          51.50532341149335
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ATT1": "lmwx",
        "ATT2": "cvbn"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.07570266723632812,
          51.502224678255644
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ATT1": "apsjvs",
        "ATT2": "sjdpyaspet"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.07407188415527344,
          51.5006752326173
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "ATT1": "gdtskqw",
        "ATT2": "pxhzng"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.08213996887207031,
          51.503293230761045
        ]
      }
    }
  ]
}