Skip to content

Instantly share code, notes, and snippets.

@Eccenux
Created October 3, 2018 14:30
Show Gist options
  • Save Eccenux/62d65032747a140e45934dda89c38609 to your computer and use it in GitHub Desktop.
Save Eccenux/62d65032747a140e45934dda89c38609 to your computer and use it in GitHub Desktop.
Leaflet embeded map with marker
<!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/leaflet@1.3.4/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/leaflet@1.3.4/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: '&copy; <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>
@Eccenux
Copy link
Author

Eccenux commented Oct 3, 2018

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".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment