SiteWebAstrolabe/src/_includes/partials/components/map.njk

45 lines
1.3 KiB
Plaintext
Raw Normal View History

2021-11-18 12:46:37 +01:00
<h2>Où sommes-nous ?</h2>
<div id = "map" style = "width: 100%; height: 500px"></div>
<script type="text/javascript" src="/vendor/js/leaflet.js"></script>
<script>
// Creating map options
var mapOptions = {
center: [48.10494125597395, -1.6795760019626425],
zoom: 15
}
// Creating a map object
var map = new L.map('map', mapOptions);
var iconMarker = L.icon({
iconUrl: '/images/marker.svg',
iconSize: [28, 40],
iconAnchor: [14, 40],
popupAnchor: [0, -40]
});
var iconMarkerAlt = L.icon({
iconUrl: '/images/marker-alt.svg',
iconSize: [28, 40],
iconAnchor: [14, 40],
popupAnchor: [0, -40]
});
var markerSiege = L.marker([48.10494125597395, -1.6795760019626425], {icon: iconMarkerAlt}).bindPopup('Siège Astrolabe CAE')
.openPopup();
var markerNaega = L.marker([43.610632310943636, 3.873482372219893], {icon: iconMarker}).bindPopup('Naega')
.openPopup();
var markerGroup = L.featureGroup([markerSiege, markerNaega]).addTo(map);
map.fitBounds(markerGroup.getBounds());
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
</script>