[proposal] OpenStreetMap with GPX-Track

[bernd_d]

Sometimes it would be nice to include a map within an entry, that shows the way i walked.

It is no problem with a singe html-page and OSM, like shown in http://wiki.openstreetmap.org/wiki/Open ... ck_example but included within s9y would be cool too

Two ideas how this could be realized:

• single/static page which shows all tracks that are included in a defined folder of media library
• as an iframe within a blog-entry, that only shows a defined track

Someone who could do this? I think i'm to stupid

[garvinhicking]

Hi!

As far as I see it, you can just copy and paste all the javascript etc. into your blog entries (WYSIWYG editor disabled)?!

Regards,
Garvin

[bernd_d]

OK, i have tried it but nothing happened. Thought, simple "copy&paste" doesn't work because javascript has to be in header-section?!?

[garvinhicking]

Hi!

In most cases, the javascript can occur anywhere in the DOM, so also inside an entry.

By copying and pasting, you just need to make sure that you only copy the vital parts and no body/html tag or so.

If that didn't work, do you have a URL where I can see your test?

Regards,
Garvin

[garvinhicking]

Hi!

What you're probably missing is the onload=init() thing, which you can't place in your entry.

You have two options; the nicer one is if your template/blog maybe uses the jquery library already, then you can place simply one more script tag:

Code: Select all

<script type="text/javascript">
$(document).ready(function() {
  init();
});
</script>

if you don't have jquery, the oldschool method is:

Code: Select all

window.onload = function() { init(); }

HTH,
Garvin

[bernd_d]

Hi!

I use the following code within a static page...

Code: Select all

	<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 src="http://www.openlayers.org/api/Ajax.js"></script>
<script src="GPX.js"></script>
 
	<script type="text/javascript">
		// Start position for the map (hardcoded here for simplicity,
		// but maybe you want to get from URL params)
		var lat=47.496792
		var lon=7.571726
		var zoom=13
 
		var map; //complex object of type OpenLayers.Map
 
		//Initialise the 'map' object
		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
			// Note that we use a predefined layer that will be
			// kept up to date with URL changes
			// Here we define just one layer, but providing a choice
			// of several layers is also quite simple
			// Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
			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 GPX Track choose the color of the Track (replace #00FF00 by the HTML code of the color you want)
var lgpx = new OpenLayers.Layer.GPX("USA", "/uploads/Tracks/USA.gpx", "#00FF00");
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>

<script type="text/javascript">
window.onload = function() { init(); }
</script>

<div style="width:90%; height:90%" id="map"></div>

...but nothing is shown (Example-Page)

If i use the same code within a simple (locale) html-page, everything works fine

[garvinhicking]

Hi!

Hm, the GPX File is 10MB...maybe it's a size issue? Did you try with a smaller track?

Also, the URL http://www.openlayers.org/api/Ajax.js returns a 404 error...

you might want to place a few alert('test1'); statements inside the init() javascript code, just to see if it's executed...

Regards,
Garvin

[bernd_d]

I think i found the problem...

Code: Select all

<div style="width:90%; height:90%" id="map"></div>

If i use px or em instead of %, the container is shown. Seems, there is a problem with containing div, so the osm-div simply was to small to be seen

Now it works, even percents would be better

[Marit321]

Hi Bern,
would you mind sharing the complete (and by now bugfixed ) code with us ?
Thank´s
Marit


--------------------------------------
my sites Krankenversicherung Vergleich
Krankenversicherung Vergleichen