D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
rcphan
Full window
Github gist
Leaflet MyLoc
Built with
blockbuilder.org
<!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 = '© <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>
https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.2/leaflet.js