On-line mapy II

Tak jsem zase o trochu dál, zabudoval jsem zobrazovaní map do tohoto blogu. Ještě to má plno much, ale postupně pracuji na jejich odstranění. Vše je jen otázkou času – musím změnit styly, protože se trasa zobrazuje v IE posunutá a s tím souvisí i vycentrování mapy doprostřed textu.

Teď jen pár ukázek kódu – v podstatě je to to nejjednodušší, co lze nalézt kdekoliv na webech týkajích se této tématiky a hlavně v popisech a příkladech daných api (Google a Atlas).

Google a můj KML soubor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>USA</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAdbjU7lI28t8oUV7AuoE0VRTpbpLiLzvTJDFj9geET3J_Xz1zYxQ7BBVMRz99Pwm6Ep58Oj2sf1xZww&hl=cs" charset="utf-8" type="text/javascript"></script><script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
                map.addControl(new GMenuMapTypeControl(true));
                map.addControl(new GMapTypeControl());
                map.setCenter(new GLatLng(37.020105, -97.820498), 4);

        //KML Overlay
        var kml = new GGeoXml("http://blog.ahooha.net/gps/xml/usa.kml");
        map.addOverlay(kml);
      }
          else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 600px; height: 450px"></div>
  </body>
</html>

Chvíli mi trvalo změnit klikyháky v nadpisech tlačítek map. Problém byl, že web je napsán ve windows-1250 a mapy v utf-8. Řešení, až jsem ho našel, bylo jednoduché – do paramatrů tagu „script“ odkazujícího na Google mapy přidat charset=„utf-8“.

Trasy na podkladu Atlas map

Řešení bylo trochu složitější, protože jsem upravoval administraci blogu – přidal jsem formuláře na upload gpx souborů, tabulku do databáze a další blbiny okolo (žádné programování, ale jen slepování různého kódu). Ještě nemám vše hotové, ale základ je a ten je i na stránkách vidět.

Pro trasování používám GPSku Garmin GPSmap 60CSx a pro práci s mapou a trasami používám dodaný sw MapSource – ten vše ve výchozím nastavení ukládá do proprietárního binárního formatu .gdb. Pro zobrazení na stránkách vždy převedu trasu do formátu .gpx což je normální .xml soubor s následující podobou:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<gpx xmlns="http://www.topografix.com/GPX/1/1" creator="MapSource 6.12.4" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">

  <metadata>
    <link href="http://www.garmin.com">
      <text>Garmin International</text>
    </link>
    <time>2008-04-28T15:58:51Z</time>
    <bounds maxlat="49.9635139" maxlon="17.2178393" minlat="49.9320454" minlon="17.1490011"/>
  </metadata>

  <trk>
    <name>20080209_Vylet na Rabstejn</name>
    <extensions>
      <gpxx:TrackExtension xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensions/v3/GpxExtensionsv3.xsd">
        <gpxx:DisplayColor>Green</gpxx:DisplayColor>
      </gpxx:TrackExtension>
    </extensions>
    <trkseg>
      <trkpt lat="49.9327271" lon="17.2178347">
        <ele>706.7062988</ele>
      </trkpt>
      <trkpt lat="49.9327773" lon="17.2177797">
        <ele>708.6289063</ele>
      </trkpt>
      <trkpt lat="49.9326892" lon="17.2154824">
        <ele>716.3195801</ele>
      </trkpt>
    </trkseg>
  </trk>

</gpx>

Nejdřív jsem přímo načítal .gpx soubor pomocí JSON, ale docela dlouho to trvalo. Po natáhnutí stránky se zobrazila mapa a až po mnoha sekundách (zdálo se, že se nic neděje) přeskočila mapa na danou oblast s trasou. Zde je ukázka kódu (je to v podstatě úprava ukázkového příkladu na stránkách amapy.atlas.cz k JSON a XML) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Trasa - pokus JSON</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://amapy.atlas.cz/api/api.ashx?guid=20401689-8715-45e5-bfb7-3d5bb87d1f19"></script>
    <script type="text/javascript">
    var Page = {
        load: function() {
            this.map = new AMap("map");
            this.map.loadMaps();
            this.map.addMapPart(new AMapTypeControl());
            this.map.addMapPart(new ASmallMapControl, new APosition(ACorner.LEFT_TOP, new ASize(10, 10)));
            var myAjax = new Ajax('http://localhost/blog/gps/pokus.xml', {
                method: 'get',
                onComplete: this.onXmlLoaded.bind(this),
                onFailure: function() {
                    alert('Chyba, server neodpověděl.');
                }
            }).request();
        },

        onXmlLoaded: function(text, xml) {
            var xmlJson = AXml.toJson(xml);
            var trasa = xmlJson.trkseg.trkpt;
            var points = [];
            for(var i=0; i < trasa.length ; i++) {
                var point = new AGeoPoint(trasa[i]["@lat"],trasa[i]["@lon"]);
                points.push(point);
            }

            var trace = new APolyline(points, {color: '#003366',weight: '4px',opacity: 0.75});
            this.map.addOverlay(trace);
            this.map.setBestZoomAndCenter(points);
        }
    }
    window.addEvent('domready', Page.load.bind(Page));
    </script>
</head>
<body>
    <div id="map" style="width: 500px; height: 300px;">
    </div>
</body>
</html>

Takže jsem přešel k tomu, že vytvořím při uploadovaní javascriptový soubor s daty trasy (nechal jsem se hodně inspirovat GPS bází, díky :-) ), který je pak na stránce načten. Struktura .js souboru trasy:

var myTrack = {
        myCount: new Number(3),
        myLat: new Array('49.9327271','49.9327773','49.9326892'),
        myLon: new Array('17.2178347','17.2177797','17.2154824')
}

Stránka s mapou je velice podobná s předchozím příkladem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Trasa - pokus JS</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://amapy.atlas.cz/api/api.ashx?guid=20401689-8715-45e5-bfb7-3d5bb87d1f19"></script>
    <script type="text/javascript" src="http://localhost/blog/gps/pokus.js"></script>
    <script type="text/javascript">
    var Page = {
        load: function() {
            this.map = new AMap("map");
            this.map.loadMaps();
            this.map.addMapPart(new AMapTypeControl());
            this.map.addMapPart(new ASmallMapControl, new APosition(ACorner.LEFT_TOP, new ASize(10, 10)));
            this.map.addMapPart(new AMapLayerControl([A_CYCLE_MAP,A_TOURISTIC_MAP]));

            var points = [];
            for (i = 0; i < myTrack.myCount; i++) {
                var point = new AGeoPoint(myTrack.myLat[i],myTrack.myLon[i]);
                points.push(point);
            }

            var trace = new APolyline(points, {color: '#003366',weight: '4px',opacity: 0.75});
            this.map.addOverlay(trace);
            this.map.setBestZoomAndCenter(points);
        }
    }
    window.addEvent('domready', Page.load.bind(Page));
    </script>
</head>
<body>
    <div id="map" style="width: 500px; height: 300px;"></div>
</body>
</html>

Radim | 5. 5. 2008 Po 20.59 | IT | Tisk | 1205x

Komentáře k textu

- Formulář pro nový komentář

K textu nebyl napsán žádný komentář.

Tento text již nelze dále komentovat.