Hogyan tudsz OpenStreetMap térképet beilleszteni a weblapodra?
Egyszerűen.
A weblap fejlécében ("head") betöltöd a szükséges kódokat:
<head>
<title>OSM beillesztése weblapra</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Ahova szeretnéd a térképet, oda beteszel egy DIV-et:
<div id="mapid"></div>
A lap aljára (vagy a térkép után) pedig beszúrod a térkép betöltéséhez szükséges kódot:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.6.0/gpx.min.js"></script>
<script src="https://grin.hu/maps/osm/widget/alapterkep.js"></script>
Ha GPS trackeket is szeretnél rátenni, akkor azt előtte add meg:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.6.0/gpx.min.js"></script>
<!-- Adjunk hozzá tetszőleges GPX útvonala(ka)t -->
<script>
var gpx = [ 'https://grin.hu/tmp/2021-09-12_10-41_Sun-rtk.gpx' ];
</script>
<script src="https://grin.hu/maps/osm/widget/alapterkep.js"></script>
Ennyi.
A file-ok külön is nézegethetőek:
- widget.html (Ez egy rövidebb bemutató lap, csak térképpel.)
- alapterkep.js (Itt pl. módosíthatod, hogy hol indul a térkép, mi milyen színű, stb.)
Kapcsolat
- Matrix, #osm:grin.hu szoba, vagy @grin:grin.hu user.