pinkaccordions.blogspot.com: osm

poniedziałek, 17 września 2018

Wyświetlanie śladów GPX (jest życie bez GoogleMaps)

Mój sposób na wyświetlanie na mapie danych w formacie GPX do tej pory polegał na uruchomieniu skryptu w PHP, który to skrypt pobierał nazwę pliku GPX, a następnie wypisywał stosowny plik HTML. W związku ze zmianą licencji przez Google, skypt przestał działać. Zmiana na OSM (Open Street Map) okazała się banalnie prosta:

<html>
<head>
  <title>GPX view facility</title>
  <link rel="stylesheet" href="/leaflet/leaflet.css" />
  <script src="/leaflet/leaflet.js"></script>
  <script src="/leaflet/gpx.js"></script>
  <style> #map { width: 960px; height:500px; } </style>
</head>
<body>
<div id="map"></div>
<script>

    var map = L.map('map',{
    center: [54.4, 18.4],
    zoom: 11
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    <?
    $trasa = $_GET['trasa'];
    if ($trasa != '')  { print "var gpx = 'http://pinkaccordions.homelinux.org/Geo/gpx/$trasa.xml'"; }
   ?>

    new L.GPX(gpx, {async: true}).on('loaded', function(e) {
    map.fitBounds(e.target.getBounds());
    }).addTo(map);
</script>
</body>

Żeby powyższe działało trzeba pobrać i skopiować do właściwych katalogów: leaflet oraz plugin leaflet-gpx. Że działa można sprawdzić tutaj.