Leaflet example: placing icons onto a map

HTML source

<!DOCTYPE html>
<html>
  <head>

    <title>Popups</title>

    <meta charset="UTF-8">
    <meta http-equiv="content-language" content="en" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />

    <link   rel         = "stylesheet"
            href        = "https://unpkg.com/leaflet@1.9.1/dist/leaflet.css"
            integrity   = "sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
            crossorigin = "" />


    <script src         = "https://unpkg.com/leaflet@1.9.1/dist/leaflet.js"
            integrity   = "sha256-NDI0K41gVbWqfkkaHj15IzU7PtMoelkzyKp8TOaFQ3s="
            crossorigin = ""></script>

    <style>

       #map {
             position  : relative;
             margin    : 0 auto;
             height    : 400px;
             width     : 600px;
             box-shadow: 8px 8px 5px 0px rgba(4,25,5,0.75);
       }

     </style>


  </head>
  <body>

    <div id="map"></div>

    <script>

      var coord = [ 36.5, 32.2 ];

      var map = L.map('map', {
        center:  coord,
        zoom  :  12
      });

      L.tileLayer(
        'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
        {attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)' }
      ).addTo(map);

      var star = L.icon({
          iconUrl     : 'icon.png',

          iconSize    : [50, 50], // Size of the icon
       // shadowSize  : […     ], // Size of the shadow
          iconAnchor  : [25, 25], // Point of the icon which will correspond to marker's location
       // shadowAnchor: […     ], // The same for the shadow
          popupAnchor : [ 0,-25]  // Coord from which the popup should open relative to the iconAnchor
      });

      var marker = L.marker(coord, {icon: star});

      marker.bindPopup("More information …");

      var layerGrp = L.layerGroup([marker]).addTo(map);
      var overlayMaps = { "Popup Elements": layerGrp };

      L.control.layers(overlayMaps).addTo(map);

    </script>

  </body>
</html>
Github repository about-Leaflet, path: /icon/index.html
Leaflet example: placing icons onto a map

HTML source

See also
