[proposal] OpenStreetMap with GPX-Track

Creating and modifying plugins.
Post Reply
bernd_d
Regular
Posts: 468
Joined: Thu Jun 03, 2010 9:28 am
Contact:

[proposal] OpenStreetMap with GPX-Track

Post by bernd_d » Fri Jun 24, 2011 9:01 am

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 :oops:

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: [proposal] OpenStreetMap with GPX-Track

Post by garvinhicking » Fri Jun 24, 2011 1:11 pm

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

bernd_d
Regular
Posts: 468
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: [proposal] OpenStreetMap with GPX-Track

Post by bernd_d » Fri Jun 24, 2011 1:36 pm

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

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: [proposal] OpenStreetMap with GPX-Track

Post by garvinhicking » Fri Jun 24, 2011 2:01 pm

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: [proposal] OpenStreetMap with GPX-Track

Post by garvinhicking » Fri Jun 24, 2011 2:06 pm

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

bernd_d
Regular
Posts: 468
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: [proposal] OpenStreetMap with GPX-Track

Post by bernd_d » Mon Jun 27, 2011 10:47 am

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 :?

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: [proposal] OpenStreetMap with GPX-Track

Post by garvinhicking » Mon Jun 27, 2011 11:32 am

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

bernd_d
Regular
Posts: 468
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: [proposal] OpenStreetMap with GPX-Track

Post by bernd_d » Mon Jun 27, 2011 12:21 pm

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 :oops:

Now it works, even percents would be better :)

Marit321
Regular
Posts: 5
Joined: Tue Aug 23, 2011 12:23 pm

Re: [proposal] OpenStreetMap with GPX-Track

Post by Marit321 » Tue Sep 20, 2011 1:33 pm

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


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

Post Reply