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&v=2&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>Komentáře k textu
K textu nebyl napsán žádný komentář.
