Leaflet simple marker

<!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>

Modified http://code.jquery.com/jquery-1.11.0.min.js to a secure url

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js to a secure url

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

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js