[Talk-hr] Zgodna html stranica s primjerom koristenja osm karte + gpx datoteke

valent.turkovic at gmail.com valent.turkovic at gmail.com
Pon Vel 20 12:17:57 GMT 2012


Našao sam zgodan i jednostavan primjer vizualizacije gpx loga na osm
karti, koristi se malo html koda i gotove javascript datoteke.
Primjer je zgodan i za totalne početnike poput mene, dovoljno je
jednostava da se samo promjeni par parametara i mogu si primjeniti za
svoju neku namjenu.

Prvo pogledajte kako karta izgleda:
http://rockburger.com/gpx/mumbai.20120218.html

Dakle vidi se karta i na karti je vizualiziran putanja iz gpx datoteke.

Svi potrebni fileovi su ovdje:
http://rockburger.com/gpx/

Tako možete i sami ako imate neki web site gdje možete uplodati html
napraviti svoje karte...

U prilogu stavljam i kompletan izvorni kod kako se ne bi zagubio u
bespućima interneta ;)


----


<html>
<head>
	<title>Simple OSM GPX Track</title>
	<!-- bring in the OpenLayers javascript library
		 (here we bring it from the remote site, but you could
		 easily serve up this javascript yourself) -->
	<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
	<!-- bring in the OpenStreetMap OpenLayers layers.
		 Using this hosted file will make sure we are kept up
		 to date with any necessary changes -->
	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get this from the URL params)
		var lat=19.0165
		var lon=72.8835
		var zoom=13

		var map; //complex object of type OpenLayers.Map

		function init() {
			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),
				maxResolution: 156543.0399,
				numZoomLevels: 19,
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );

			// Define the map layer
			// Here we use a predefined layer that will be kept up to date with
URL changes
			layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
			map.addLayer(layerMapnik);
			layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
			map.addLayer(layerTilesAtHome);
			layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
			map.addLayer(layerCycleMap);
			layerMarkers = new OpenLayers.Layer.Markers("Markers");
			map.addLayer(layerMarkers);

			// Add the Layer with the GPX Track
			var lgpx = new OpenLayers.Layer.GML("buying batteries", "20120218.gpx", {
				format: OpenLayers.Format.GPX,
				style: {strokeColor: "red", strokeWidth: 5, strokeOpacity: 0.5},
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx);

			var lonLat = new OpenLayers.LonLat(lon, lat).transform(new
OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
			map.setCenter(lonLat, zoom);

			var size = new OpenLayers.Size(21, 25);
			var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
			var icon = new
OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
			//layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
		}
	</script>


</head>
<!-- body.onload is called once the page is loaded (call the 'init'
function) -->
<body onload="init();">
	<!-- define a DIV into which the map will appear. Make it take up the
whole window -->
	<div style="width:90%; height:90%" id="map"></div>
</body>
</html>


-- 
follow me - www.twitter.com/valentt & http://kernelreloaded.blog385.com
linux, anime, spirituality, wireless, scuba, linuxmce smart home, zwave
ICQ: 2125241, Skype: valent.turkovic, MSN: valent.turkovic at hotmail.com



Više informacija o Talk-hr mailing listi