expoweb/map/index-leaflet.html

30 lines
917 B
HTML
Raw Normal View History

<script src="/javascript/leaflet/leaflet.js"></script>
2021-10-29 18:16:34 +01:00
<link href="/javascript/leaflet/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>
2021-10-29 18:16:34 +01:00
<script>
// this file found on an expo laptop and put into the VCS in 2019
// Where you want to render the map.
var element = document.getElementById('osm-map');
// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';
// Create Leaflet map on map element.
var map = L.map(element);
// Add OSM tile leayer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Target's GPS coordinates.
2021-10-29 18:16:34 +01:00
// This is Budapest, why ?!
var target = L.latLng('47.50737', '19.04611');
// Set map's center to target with zoom 14.
map.setView(target, 14);
// Place a marker on the same location.
L.marker(target).addTo(map);
2021-10-29 18:16:34 +01:00
</script>