D3 Examples - Leaflet MyLoc

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
​
  <link rel="stylesheet" type="text/css" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.2/leaflet.css">
  <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.2/leaflet.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
    height: 100vh;
    width: 98%;
}
  </style>
</head>
​
<body>
  <div id="map"></div>
  <script>
            // We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
        // Creating a tile layer usually involves setting the URL template for the tile images
        var osmUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}.png',
            osmAttrib = '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {
                maxZoom: 16,
                attribution: osmAttrib
            });
​
        // initialize the map on the "map" div with a given center and zoom
    
    console.clear();
    
    var latlngs = [
        [-7.5407173,110.4369693,"Place 1"],
        [3.1696345,98.3842794,"Place2"],
      [-8.3433103,115.4983027,"Place3"]
    ]
    
    var markers = [];
    
        var map = L.map('map', {
        zoomControl : false
    }).setView([-7.5407173,110.4369693], 12).addLayer(osm);
    
    var myIconDefault = L.icon({
        iconUrl: "https://upload.wikimedia.org/wikipedia/commons/3/3d/Blue_dot.png",
        iconSize: [20, 25],
        iconAnchor: [10, 25],
        popupAnchor: [0, -25]
        
    });
    
    function IconGen(icon){
        var myIcon = L.icon({
        iconUrl: icon,
        iconSize: [20, 25],
        iconAnchor: [10, 25],
        popupAnchor: [0, -25]
        
    });
    return myIcon;
    }
    
    function PopupGen(popup){
        return "<div style='text-align:center;'><h2>'"+popup+"'</h2><hr></div>"
    }
​
        latlngs.forEach(function(coor){
        var marker = L.marker([coor[0],coor[1]],{icon: myIconDefault}).on('mouseover',function(e){
  e.target.setIcon(IconGen("https://i.ya-webdesign.com/images/png-images-for-buttons-1.png"));
      }).on('mouseout',function(e){
      e.target.setIcon(myIconDefault);
      }).bindPopup(PopupGen(coor[2]))
      markers.push(marker);
    });
    
    //var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
    
    var layerGroups = L.featureGroup(markers)
        .addTo(map);
      
    map.fitBounds(layerGroups.getBounds(),{
        padding: [20,20]
    })
        
​
  </script>
</body>
    