[Talk-hr] Zgodna html stranica s primjerom koristenja osm karte + gpx datoteke
Janko Mihelić
janjko at gmail.com
Pon Vel 20 13:06:55 GMT 2012
Ima stranica sa gomilu primjera kako dignuti kartu na web pomoću openlayers:
http://openlayers.org/dev/examples/
Tako smo i stavili kartu na http://osm-hr.org
Namjestili smo da može uzimati .kml i .osm datoteke lokalno i prikazivati
ih.
Janko
2012/2/20 SilverSpace <mirozagreb at ubuntu-hr.org>
> možeš i ovako ubaciti samo link svog .gpx http://is.gd/wfw6cK
>
>
> Dana 20. veljače 2012. 13:17 valent.turkovic at gmail.com <
> valent.turkovic at gmail.com> je napisao/la:
>
> > 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
> >
> > _______________________________________________
> > Talk-hr mailing list
> > Talk-hr at openstreetmap.org
> > http://lists.openstreetmap.org/listinfo/talk-hr
> >
>
>
>
> --
> Svega što vrijedi Bog je stvorio malo, kako zlata tako i Hrvata.
> _______________________________________________
> Talk-hr mailing list
> Talk-hr at openstreetmap.org
> http://lists.openstreetmap.org/listinfo/talk-hr
>
Više informacija o Talk-hr
mailing listi