OSM track en POI weergave vanuit GPX bestand

Hallo

Ik wil op mijn website de tracks en POI’s die ik gemaakt heb tijdens mijn motortochten weergeven voor anderen. Dit doe ik nu via google maps maar ik wil overschakelen naar OSM .
De bron die ik heb is een GPX file (uit de GPS).
Dit dus: http://www.mtkessel.nl/routedatabase/disproute.html?xmlfile=bibberrit-2012.xml

Via deze site http://wiki.openstreetmap.org/wiki/Openlayers_Track_example heb ik eea al werkend voor de track, maar ik wil tevens de POI’s displayen. Bijvoorbeeld dat leuke restaurantje of uitzicht tijdens de route.

Ik heb de openlayers definities bekeken maar ik kom er niet uit hoe ik het vanuit de GPX file voor mekaar krijg.

Wie heeft raad?

gr Wim

Hier vind je een kant en klaar hulpmiddel; hoef je niets aan te wijzigen (maar mag natuurlijk wel): http://www.javawa.nl/webkaartje.html

Dag JaVaWa.

Die had ik inderdaad al op je site zien staan.
Toch wil ik het ook “graag zelf kunnen”, ik ben halverwege met de track, nu de POI’s nog.
Ik zie dat het met textfiles en POI’s lukt, dus eigenlijk is het de vraag of iemand de punten uit de GPX kan halen en vervolgens kan doorgeven naar de functies in de de OpenLayer stukken.
Deze http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example, maar is is een TXT gebruikt en geen standaard GPX file

gr Wim

Is http://www.gpsvisualizer.com/ misschien iets?
Of anders gpsies.com, ridewithgps.com bikemap.net etc

Waarschijnlijk lukt het als je:

OpenLayers.Format.GPX()

vervangt door:

OpenLayers.Format.GPX({extractWaypoints: true, extractAttributes: true})

Niet als je geen Google Maps wilt gebruiken…
Wat Wim wil (on the fly een kaart genereren o.b.v. een gpx-bestand) lukt niet met die voorbeelden; daar moet je eerst de gpx-bestanden uploaden naar een site.

Bij gpsvisualizer hoeft dat niet, kijk maar op mijn site, http://moh.freehostia.com/map_Europe.html
Weergave in OSM behoort ook tot de mogelijkheden.

Ja, je kunt weliswaar de OSM-kaartlaag kiezen, maar je gebruikt nog steeds de Google Maps API. Een oude nota bene; na (of vanaf) 19 mei 2013 doet je kaartje het niet meer (tenzij Google nog een half jaartje extra respijt geeft).

Leuk al die sites.

Een track narijden of een track uitzetten/plannen daar zit het verschil.
Vraag me wel eens af of mensen gedownloade track echt narijden.
De track planners doen dat toch meestal voor een grotere groep, het samen doen/rijden.
Openlayers met eigen bestanden layers of van derden, neem nu laatst even die layers met wegwerkzaamheden erover heen, voor motorenplanners. Als uitzetters zeer interresant.
Je gaat niet al die verschillende sites af, waarbij je je eigen net getekende track niet op kan zien, dan zo’n layer is leuk, snellere controle.
Dan komt ook gauw een tekenfunctie om de hoek kijken. En een eigen database.
Controleurs toegang tot de website om afsluitingen te melden, nieuwe voorstelling track, mooie punten te melden op de geplande track. wp/poi upload.
Dan de planningswebsite beveiligd voor planner en controleurs. Gedane track na evenement zichtbaar voor derden, de clubleden of iedereen.
Met een overpass api voor contole van getekende track. map layer aangepast aan het vorm gebruik/voortbeweging.
Zo ook de poi database, waar staat dat bankje/drinkwaterfontein. Link in OSM aanpassen.

Trackplanners steken er veel tijd in en worstelen met bestanden.

Ervaring: aanleveringen van contoleurs is dat je een gpx terug krijgt, met vaak/soms bij mapsource de gebruikelijke benaming track1-… of waypoint 001, 002 omschrijving in de benaming en niet in de omschrijvingskolom gpx file zijn dan lastig samen te voegen. Een centrale plaats is dan gewenst.

Juist deze kleine groep planners een tool geven daar hebben andere veel plezier van. (trackvolgers).
Maar ja je moet ook weer terug naar een gpx voor in de gps.

Met deze materie worstel ik ook.
Bij gebrek aan kennis, javascript etc., maar wetende dat dat eigenlijk wel de weg is om tot iets te komen. Je komt gauw in een een gebied waar je locale kennis ontbreekt, dan is OSM kennis en controleur kennis heerlijk. Ik kom dan ook wel eens in een gebied waar ik voor vier jaar geleden het laatst geweest ben, en dan verandert er nogal eens wat, een goed opgezette prerun is makkelijker te controleren. En heb je even wat tijd over om dat extra toe te voegen, Een dag is zo voorbij.
Waarbij je kennis en data op termijn aan andere in de club wilt doorgeven.

Bij mij is het nu een wirwar van gpx bestanden.

Mijn brouwsel:
Om poi zichtbaar te krijgen met eigen symbool.

Waarbij ik ook de .gpx uit elkaar heb gehaald in meerdere .gpx elke categorie zijn eigen graphic.
Maar niet echt één gpx aanhangen en dan zichtbaar met verschillende symbolen. Wat jij eigenlijk wilt.



var lgpx = new OpenLayers.Layer.Vector("<span style='color: blue'>GPX WAG&nbsp<img style='vertical-align: middle;graphicWidth: 10; graphicHeight: 10;' src=014.png'></span>", {
				protocol: new OpenLayers.Protocol.HTTP({
					url: "GPX1.gpx",
					format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
				}),
				strategies: [new OpenLayers.Strategy.Fixed()],
				style: {fillColor: "darkred", strokeColor: "red", strokeWidth: 2, strokeOpacity: 0.5, externalGraphic : "014.png",graphicWidth: 12, graphicHeight: 12, pointRadius: 12, cursor:"pointer",},
				projection: new OpenLayers.Projection("EPSG:4326")
			});



Laatst zoekende naar iets kwam ik deze tegen en als voorbeeld opgeslagen.
http://www.openmap.ro/moto/

Deze vraag stelde ik mij.
Is Leaflet net weer wat anders als Openlayers.
Waarom de een of de ander?

Openlayers heeft veel mogelijkheden, maar is daardoor lastig onder de knie te krijgen en geeft ook veel overhead. Leaflet is lichgewicht en daardoor snel; het is ook geoptimaliseerd voor mobiele devices (smartphone, tablet). Het heeft niet zoveel standaardfunctionaliteit als Openlayers, maar er zijn tal van plugins beschikbaar. Als je bekend bent met de API van Google Maps is de overstap naar Leaflet een stuk makkelijker dan naar Openlayers. Verder is het ook een kwestie van persoonlijke voorkeur (het moge duidelijk zijn wat de mijne is… :wink: )

Bedankt Javawa, ik zal dat kaartje tzt dus moeten updaten. Op de site van gpsvisualizer lees ik dat dat niet al te moeilijk moet zijn:

Heb het kaartje gedownload zip file. geunzipt.
En index gestart met IE chrome en Firefox maar krijg geen map.
(zo de file opgestart)

Veel browsers vinden een lokaal XML bestand, wat in feite een gpx file is niet leuk, dit ivm virusgevaar.

hmmm, volgens de licentie mag ik het dus niet aanpassen…

*Je mag dit bestand/deze software niet wijzigen, aanpassen, vertalen of afgeleide werken gebaseerd op dit bestand/deze software vervaardigen. *

En wat staat daaronder?
(ik weet 't, een beetje omslachtig; dat komt omdat ik een standaarddisclaimer heb die overal onder gezet wordt. Misschien nog maar eens een keertje aanpassen)
Je mag het dus wel aanpassen.

Het gaat er niet om dat het een XML-bestand is, en is ook niet vanwege virusgevaar. Waar het wel om gaat is dat een script in de browser nooit toegang krijgt tot lokale bestanden, met een paar uitzonderingen zoals javascriptbestanden of afbeeldingen. De reden is dat het niet zo mag zijn dat een mogelijk kwaadaardig script zomaar willekeurige bestanden op je computer kan ‘stelen’. Je kunt dit wel toestaan via de instellingen van de browser, maar dat is niet raadzaam.

Voor deze gevallen heb ik om mijn pagina de mogelijkheid om het gpx-bestand te uploaden, waarna je een html-bestand terugkrijgt waar de inhoud van het gpx-bestand in opgenomen is. Zet je de bestanden online om ze te bekijken, dan hoeft dat niet.

Dit is het geworden. ben nog op zoek naar verdere leuke features voor de map.
Ik verwacht dat er ook nog iets overbodige code in staat.

gr Wim

<html>
<head>
<!-- 	voorbeelden http://wiki.openstreetmap.org/wiki/Openlayers_Track_example
		voorbeeld zoomen http://wiki.openstreetmap.org/wiki/User:MHohmann 
-->

	<!-- Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example -->
	<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">
		
 
		var map; //complex object of type OpenLayers.Map
		var gpxStyles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
                    pointRadius: "8", 
                    label: "${name}",
                    labelAlign: 'cb',
                    fontSize: 12,
                    fontFamily: "Arial",
                    fontColor: "black",
					fontWeight: "bold",
                    labelYOffset: 10,
                    fillColor: "brown",
                    strokeColor: "blue",
                    strokeWidth: 5,
                    strokeOpacity: 0.5
                }),
                "select": new OpenLayers.Style({
                    fillColor: "#66ccff",
                    strokeColor: "#3399ff",
                    graphicZIndex: 2
                })
            });
			
		function init() {
			map = new OpenLayers.Map ("map", {
				controls:[
					new OpenLayers.Control.Navigation(),
					new OpenLayers.Control.PanZoomBar(),
					//new OpenLayers.Control.LayerSwitcher(),
					new OpenLayers.Control.MousePosition(),
					new OpenLayers.Control.Attribution()],
				units: 'm',
				projection: new OpenLayers.Projection("EPSG:900913"),
				displayProjection: new OpenLayers.Projection("EPSG:4326")
			} );
			
			// This will enable us to autozoom the map to the displayed data.
			var dataExtent;
			var setExtent = function()
			{
				if(dataExtent)
					dataExtent.extend(this.getDataExtent());
				else
					dataExtent = this.getDataExtent();
				map.zoomToExtent(dataExtent);
			};
			
			// 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);
			
			// Add the Layer with the GPX data
			var lgpx = new OpenLayers.Layer.Vector("Route", {
				strategies: [new OpenLayers.Strategy.Fixed()],
				protocol: new OpenLayers.Protocol.HTTP({
					url: "route.gpx",
					format: new OpenLayers.Format.GPX({extractWaypoints: true, extractRoutes: true, extractAttributes: true})
				}),
                styleMap: gpxStyles,
				projection: new OpenLayers.Projection("EPSG:4326")
			});
			map.addLayer(lgpx);
				
			// This will perform the autozoom as soon as the GPX file is loaded.
			lgpx.events.register("loadend", lgpx, setExtent);
			map.addLayer(lgpx);						
		}
	</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:100%; height:100%" id="map"></div>
</body>
</html>

Zal in het vervolg mijn woorden beter kiezen, sorry, maar dit is wat ik ook bedoel…

@Allroads:
Je slaat de spijker op zijn kop… Zelf zit ik aan een PHP database te denken omdat deze GPX files idd een crime zijn.
Helaas vanaf December veel Offshore in het buitenland geweest, dus dan geen tijd om met de hobby’s bezig te zijn :frowning: , gelukkig nog 1 keer weg, dus vanaf volgende maand meer tijd.
Wat ik denk wat gaat werken is de routes via PHP op een OSM map te krijgen, en dan via een download button ze om te zetten naar GPX.
Wat ik ook zou willen maken is een overzicht van POI’s vanuit OSM zoals in jouw voorbeeld te zien is en deze dan via een soort selectielijst te kunnen samenvoegen met de track naar GPX.

Heb je trouwens dat lijstje rechts bovenin gezien voor V-Max Rijders ?:lol:

Lokaal zijn GPX-bestanden een probleem, maar als ze op een webserver staan niet… dan worden ze wel gewoon ingelezen. Via PHP kan natuurlijk (en heeft organisatorisch wel de voorkeur boven losse bestanden), maar ook dan heb je een webserver nodig.