ARTICLE AD BOX
You may have to make bigger points:
style { ..., pointRadius: 6}That's all.
(Eventually you may have to check if you really have waypoints in GPX)
Minimal working code:
index.html
<!DOCTYPE html> <html> <head> <title>OpenLayers GPX Waypoints</title> <script src="https://openlayers.org/api/OpenLayers.js"></script> <style> html, body, #map { width: 100%; height: 100%; margin: 0; } </style> </head> <body> <div id="map"></div> <script> var map = new OpenLayers.Map("map"); var osm = new OpenLayers.Layer.OSM(); map.addLayer(osm); var lgpx = new OpenLayers.Layer.Vector("Track", { protocol: new OpenLayers.Protocol.HTTP({ url: "example.gpx", format: new OpenLayers.Format.GPX({ extractWaypoints: true, extractName: true, extractRoutes: true, extractAttributes: true }) }), strategies: [new OpenLayers.Strategy.Fixed()], projection: new OpenLayers.Projection("EPSG:4326"), // minimal change: add pointRadius style: { strokeColor: "#33aaff", strokeWidth: 2, strokeOpacity: 1, pointRadius: 6, // point size fillColor: "#ff0000", // point color fillOpacity: 0.8 // point opacity } }); map.addLayer(lgpx); lgpx.events.register("loadend", lgpx, function() { map.setCenter( new OpenLayers.LonLat(9, 48) // roughly central Europe .transform("EPSG:4326", map.getProjectionObject()), 5 ); }); map.events.register("moveend", map, function () { var center = map.getCenter() .clone() .transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326")); console.log( "center:", center.lon.toFixed(4), center.lat.toFixed(4), "zoom:", map.getZoom() ); }); </script> </body> </html>example.gpx
<gpx version="1.1" creator="example" xmlns="http://www.topografix.com/GPX/1/1"> <!-- Waypoints --> <wpt lat="51.5074" lon="-0.1278"> <name>London</name> </wpt> <wpt lat="48.8566" lon="2.3522"> <name>Paris</name> </wpt> <wpt lat="52.5200" lon="13.4050"> <name>Berlin</name> </wpt> <wpt lat="41.9028" lon="12.4964"> <name>Rome</name> </wpt> <!-- Track --> <trk> <name>London → Paris → Berlin → Rome</name> <trkseg> <trkpt lat="51.5074" lon="-0.1278"></trkpt> <trkpt lat="48.8566" lon="2.3522"></trkpt> <trkpt lat="52.5200" lon="13.4050"></trkpt> <trkpt lat="41.9028" lon="12.4964"></trkpt> </trkseg> </trk> </gpx>Restult:
