Monen reittijäljen näyttäminen samalla karttapohjalla

Communities Suomi (Finland)
1

Reittisuunnittelussa olisi joskus näppärää näyttää monta GPX-jälkeä samalla karttapohjalla.

Aina GPX-jälkiä vastaavia teitä ei edes ole OSM-kartalla. Näin on esimerkiksi liikuttaessa jäällä, vesillä tai maastossa tai silloin, kun OSM:stä yksinkertaisesti puuttuu joitain muissa kartoissa olevia teitä.

Miten saisin WWW-selaimen näyttämään monta reittijälkeä samalla OSM-karttapohjalla?

Yksi vaihtoehtoinen tapa tuli jo mieleeni: JOSMissa voisin valita taustakuvaksi SlippyMap-karttapalat ja muuttaa GPX-jäljet viivoiksi. Sopivat tagit viivoille antamalla saisin ne vieläpä erivärisiksi.

2

http://wiki.openstreetmap.org/wiki/Openlayers_Track_example
jos voi näyttää yhden, miksei voisi näyttää monta.

3

Kiitos, näyttäähän se. Joitain ongelmia tuli vastaan.
Asianmukaisen DOCTYPE-määreen lisättyäni ei tullut mitään karttaa näkyviin. Korjaukseksi lisäsin kartan sisältävälle div-elementille tyylimääreen

position: fixed

En saanut GPX-tiedoston reittipisteitä (waypoint) näkyviin. Niinpä lisäsin ne käsin omalle tasolleen. Jätin kuvakkeen määrittelyn pois, koska muuten kuvakkeelle olisi pitänyt tehdä

icon.clone()

Monta GPX-reittijälkeä sain kyllä näkyviin.

4

Leafletille on saatavilla gpx-plugin: https://github.com/mpetazzoni/leaflet-gpx

5

Ruokahalu kasvaa syödessä, ja haluaisin saada myös MML-ilmakuvan karttapohjaksi.

Kokeilin seuraavaa:


  <script
     type="text/javascript"
     src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script
     type="text/javascript"
     src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script type="text/javascript">
    function init() {
      var lat=60.3260329;
      var lon=25.0615579;
      var zoom=12;

      var proj = new OpenLayers.Projection("EPSG:4326");

      var map = new OpenLayers.Map ("map", {
        controls:[
          new OpenLayers.Control.Navigation(),
          new OpenLayers.Control.PanZoomBar(),
          new OpenLayers.Control.LayerSwitcher(),
          new OpenLayers.Control.Attribution()
        ],
        maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
        numZoomLevels: 10,
        units: 'm',
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: proj
      } );

      map.addLayer(new OpenLayers.Layer.OSM(
          "MML-ortokuva",
          "http://tiles.kartat.kapsi.fi/1.0.0/${z}/${x}/${y}.png", {
	      "tileOptions": {"crossOriginKeyword": "anonymous" },
	      "attribution": "Ilmakuva: © <a href=\"http://www.maanmittauslaitos.fi/avoindata_lisenssi_versio1_20120501\">MML</a>"}));

      map.addLayer(new OpenLayers.Layer.OSM.Mapnik());

      var lonLat = new OpenLayers.LonLat(lon, lat).transform(proj, map.getProjectionObject());
      map.setCenter(lonLat, zoom);
    }</script>

Firefoxin mukaan PNG-kuvatiedostot kyllä latautuvat, ja wgetilläkin voin niitä hakea. Kartalla näkyy silti vain vaaleanpunaisia neliöitä. OSM-karttataso toimii oikein.

Mitä teen väärin? Latukartta.fi näyttää tekevän suunnilleen samoin, mutta siinä näyttää olevan jokin viritetty versio OpenLayers-kirjastosta.

6

“Viritetty versio” on kyllä ihan stock 2.10, josta droppattu osa turhista luokista, ettei tarvitse niin isoa .js:ää siirtää. Voithan sä downata sen tuolta latukartta.fi:ltä ja koittaa sillä jos sillä toimii (en nopealla silmäilyllä keksinyt missä olisi vikaa tossa sun versiossa, vaikka toki pidemmän päälle suosittelen ettet käydä suoraan openlayers.org:n OpenLayers.js:ää, jos ne vaikka päättävät mitään ilmoittamatta päivittää sen tms.).

–
i.

7

Kokeilin seuraavaa, ja siinä on muutamia eroja sen mukaan, kumpi OpenLayers.js on käytössä:
• http://www.openlayers.org/api/OpenLayers.js näyttää tasovalinnan ja attribuution sivun oikeassa reunassa
• http://latukartta.fi/js/OpenLayers.js näyttää kaikki ohjaimet vasemmassa yläkulmassa päällekkäin (se kaiketi haluaisi niille erillisen div-elementin)
• OpenLayers tottelee map.setCenter()-määritystä tuollaisenaan, mutta latukartta.fi näyttää aluksi päiväntasaajan ja 0°-meridiaanin leikkauspistettä
• OpenLayers näyttää Firefoxissa vaaleanpunaista ortokuvan paikalla, mutta latukartta.fi näyttää oikeita ilmakuvia (tai mustaa tai valkoista).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MML/OSM-koe</title>
<!--
  <script type="text/javascript" src="http://latukartta.fi/js/OpenLayers.js"></script>
-->
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script type="text/javascript">
    function init() {
      var lat=60.3260329;
      var lon=25.0615579;
      var zoom=12;

      var proj = new OpenLayers.Projection("EPSG:4326");

      var map = new OpenLayers.Map ("map", {
        controls:[
          new OpenLayers.Control.Navigation(),
          new OpenLayers.Control.PanZoomBar(),
          new OpenLayers.Control.LayerSwitcher(),
          new OpenLayers.Control.Attribution()
        ],
        maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
        numZoomLevels: 10,
        units: 'm',
        projection: new OpenLayers.Projection("EPSG:900913"),
        displayProjection: proj
      } );

      map.addLayer(new OpenLayers.Layer.OSM(
          "MML-ortokuva",
          "http://tiles.kartat.kapsi.fi/1.0.0/ortokuva/${z}/${x}/${y}.png",
	  {"attribution": "Ilmakuva: © <a href=\"http://www.maanmittauslaitos.fi/avoindata_lisenssi_versio1_20120501\">Maanmittauslaitos</a>",
	   "tileOptions": {"crossOriginKeyword": null}}));
      map.addLayer(new OpenLayers.Layer.OSM.Mapnik());
      var layerMarkers = new OpenLayers.Layer.Markers("Sillat, rampit");
      map.addLayer(layerMarkers);
      var lonLat = new OpenLayers.LonLat(lon, lat).transform(proj, map.getProjectionObject());
      map.setCenter(lonLat, zoom);
   }
  </script>
</head>
<body onload="javascript:init()">
<div style="position: fixed; width:100%; height:100%" id="map"></div>
</body></html>

Selain on Debian Iceweasel 10.0.12 eli Mozilla Firefox.
Kokeilin myös Chromium-selainta (Version 25.0.1364.160 Debian 7.0 (186726)), ja sillä se toimi!

Lisäys (korjattu myös yllä olevaan esimerkkiin): Seuraavan määreen lisäämisen jälkeen Iceweasel ei enää nähnyt vaaleanpunaista:

"tileOptions": {"crossOriginKeyword": null}

Chromium taas ei suostunut lataamaan ja näyttämään GPX-jälkiä, jos myös HTML-tiedosto oli paikallisessa tiedostojärjestelmässä (file:-alkuinen osoite). HTTP-kansiosta se toimi. Syy lienee sama eli pyrkimys estää cross site scripting -hyökkäykset. (Mikähän meteli siitä syntyisi, jos hyökkääjä korvaisi tiilipalvelimen karttapalat tuhmilla kuvilla?)

8

Jostain syystä Kapsin mallikartassa ja monessa muussa silmiin sattuneessa esimerkissä on käytetty parametria sphericalMecator: true,
Mahtaisiko sillä olla mitään vaikutusta?

var ortokuva = new OpenLayers.Layer.MML("Ortokuva", [
		"http://tile1.kartat.kapsi.fi/1.0.0/ortokuva/${z}/${x}/${y}.png",
		"http://tile2.kartat.kapsi.fi/1.0.0/ortokuva/${z}/${x}/${y}.png"
	], {
		numZoomLevels: 21,
		sphericalMecator: true,
		transitionEffect: 'resize'
9

Julkaisin viimein kartan ja kannanoton sujuvan pyöräilyreitin eli virastokielellä ’pyöräilyn laatukäytävän’ rakentamiseksi pääradan varteen Vantaan alueelle.

OpenLayers.Layer.Text vaikuttaa varsin näppärältä tavalta liittää lisätietoja kartalla korostettuihin pisteisiin. En vaivautunut määrittelemään tekstilaatikon kokoa enkä tyyliä, koska se näkyy toimivan melko hyvin sellaisenaankin. Laatikko avautuu ja sulkeutuu merkkipistettä napsauttamalla. Android-puhelimeni selaimessa se ei tosin toiminut.

10

Nuo Javascript-tiedostot kannattanee kopioida samalle palvelimelle muun tauhkan kanssa. Muuten selain voi varoittaa ns. cross site scripting -hyökkäyksestä.