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

Pon Vel 20 12:52:38 GMT 2012

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.