Created
October 3, 2018 14:30
-
-
Save Eccenux/62d65032747a140e45934dda89c38609 to your computer and use it in GitHub Desktop.
Leaflet embeded map with marker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pl"> | |
| <head> | |
| <title>Leaflet test</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <!-- CSS --> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" | |
| integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" | |
| crossorigin=""/> | |
| <!-- Make sure you put this AFTER Leaflet's CSS --> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" | |
| integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" | |
| crossorigin=""></script> | |
| </head> | |
| <body> | |
| <p>Custom marker, no shadow</p> | |
| <div style="height: 276px; position: relative; overflow: hidden;" class="map-canvas" | |
| data-zoom="10" data-lat="54.514080" data-lng="18.533345" | |
| data-marker="img/map-marker.svg" | |
| data-title="MOL Sp. z o.o."> | |
| </div> | |
| <p>Default (blue with shadow)</p> | |
| <div style="height: 276px; position: relative; overflow: hidden;" class="map-canvas" | |
| data-zoom="10" data-lat="54.514080" data-lng="18.533345" | |
| data-title="MOL Sp. z o.o."> | |
| </div> | |
| <p>Zoom</p> | |
| <div style="height: 276px; position: relative; overflow: hidden;" class="map-canvas" | |
| data-zoom="15" data-lat="54.514080" data-lng="18.533345" | |
| data-title="MOL Sp. z o.o."> | |
| </div> | |
| <p>Simple map (no marker)</p> | |
| <div style="height: 276px; position: relative; overflow: hidden;" class="map-canvas" | |
| data-zoom="10" data-lat="54.514080" data-lng="18.533345"> | |
| </div> | |
| <!-- JS --> | |
| <script> | |
| var mapElements = document.querySelectorAll('.map-canvas'); | |
| for (var i = 0; i < mapElements.length; i++) { | |
| prepareMap(mapElements[i]); | |
| } | |
| //var mapElement = document.querySelector('.map-canvas'); | |
| /** | |
| Preapre map element. | |
| Attributes of the element (with example values): | |
| * data-zoom="15" | |
| * data-lat="54.514080" | |
| * data-lng="18.533345" | |
| * (optional) data-title="MOL Sp. z o.o." -- add to show marker | |
| * (optional) data-marker="img/map-marker.svg" -- add to use custom marker | |
| Note! Some assumptions for the custom image are: | |
| * It should be a square image. | |
| * It should be SVG or scale nicely to 32x32px. | |
| * It should have the pointy part in the middle of the bottom edge. So a cone like in "V". | |
| */ | |
| function prepareMap(mapElement) | |
| { | |
| var mapData = { | |
| lat : mapElement.getAttribute('data-lat'), | |
| lng : mapElement.getAttribute('data-lng'), | |
| zoom : mapElement.getAttribute('data-zoom'), | |
| markerText : mapElement.getAttribute('data-title'), | |
| markerImage : mapElement.getAttribute('data-marker'), | |
| }; | |
| var map = L.map(mapElement).setView([mapData.lat, mapData.lng], mapData.zoom); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // marker | |
| if (mapData.markerText) { | |
| // default marker | |
| if (!mapData.markerImage) { | |
| L.marker([mapData.lat, mapData.lng]).addTo(map) | |
| .bindPopup(mapData.markerText) | |
| .openPopup() | |
| ; | |
| // marker with custom icon | |
| } else { | |
| // docs: https://leafletjs.com/reference-1.3.4.html#icon | |
| var myIcon = L.icon({ | |
| iconUrl: mapData.markerImage, | |
| iconSize: [32, 32], // [x, y] in px | |
| iconAnchor: [16, 32], // from top left corner | |
| popupAnchor: [0, -26], // from icon anchor | |
| }); | |
| L.marker([mapData.lat, mapData.lng], {icon: myIcon}).addTo(map) | |
| .bindPopup(mapData.markerText) | |
| .openPopup() | |
| ; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Note! Some assumptions for the custom image are: