diff --git a/examples/data/gpx/fells_loop.gpx b/examples/data/gpx/fells_loop.gpx new file mode 100644 index 0000000000..d8a1df557e --- /dev/null +++ b/examples/data/gpx/fells_loop.gpx @@ -0,0 +1,1077 @@ + + + + + + 44.586548 + + 5066 + + Crossing + + + + 57.607200 + + 5067 + + Dot + + + + 44.826904 + + 5096 + + Dot + + + + 50.594727 + + 5142 + + Dot + + + + 127.711200 + + 5156 + + Dot + + + + 96.926400 + + 5224 + + Dot + + + + 82.600800 + + 5229 + + Dot + + + + 82.905600 + + 5237 + + Dot + + + + 66.696655 + + 5254 + + Dot + + + + 74.627442 + + 5258 + + Dot + + + + 65.254761 + + 5264 + + Dot + + + + 77.419200 + + 526708 + + Dot + + + + 74.676000 + + 526750 + + Dot + + + + 78.713135 + + 527614 + + Dot + + + + 78.713135 + + 527631 + + Dot + + + + 68.275200 + + 5278 + + Dot + + + + 64.008000 + + 5289 + + Dot + + + + 52.997925 + + 5374FIRE + + Dot + + + + 56.388000 + + 5376 + + Dot + + + + 56.388000 + + 6006 + + Dot + + + + 46.028564 + + 6006BLUE + + Dot + + + + 37.616943 + + 6014MEADOW + + Dot + + + + 56.388000 + + 6029 + + Dot + + + + 50.292000 + + 6053 + + Dot + + + + 25.603200 + + 6066 + + Dot + + + + 34.442400 + + 6067 + + Dot + + + + 30.480000 + + 6071 + + Dot + + + + 15.240000 + + 6073 + + Dot + + + + 37.795200 + + 6084 + + Dot + + + + 64.008000 + + 6130 + + Dot + + + + 64.008000 + + 6131 + + Dot + + + + 62.788800 + + 6153 + + Dot + + + + 55.473600 + + 6171 + + Dot + + + + 62.484000 + + 6176 + + Dot + + + + 62.179200 + + 6177 + + Dot + + + + 69.799200 + + 6272 + + Dot + + + + 73.152000 + + 6272 + + Dot + + + + 70.104000 + + 6278 + + Dot + + + + 57.564209 + + 6280 + + Dot + + + + 66.696655 + + 6283 + + Dot + + + + 72.945191 + + 6289 + + Dot + + + + 72.847200 + + 6297 + + Dot + + + + 53.644800 + + 6328 + + Dot + + + + 43.891200 + + 6354 + + Dot + + + + 48.768000 + + 635722 + + Dot + + + + 49.072800 + + 635783 + + Dot + + + + 62.484000 + + 6373 + + Dot + + + + 3.962400 + + 6634 + + Dot + + + + 13.411200 + + 6979 + + Dot + + + + 34.012085 + + 6997 + + Dot + + + + 87.782400 + + BEAR HILL + BEAR HILL TOWER + + Tall Tower + + + + 23.469600 + + BELLEVUE + BELLEVUE + + Parking Area + + + + 43.384766 + + 6016 + + Trailhead + + + + 89.916000 + + 5236BRIDGE + + Bridge + + + + 55.473600 + + 5376BRIDGE + + Bridge + + + + 52.730400 + + 6181CROSS + + Crossing + + + + 45.110400 + + 6042CROSS + + Crossing + + + + DARKHOLLPO + + Fishing Area + + + 56.083200 + + 6121DEAD + + Danger Area + + + + 117.043200 + + 5179DEAD + + Danger Area + + + + 69.494400 + + 5299DEAD + + Danger Area + + + + 56.997600 + + 5376DEAD + + Danger Area + + + + 46.939200 + + 6353DEAD + + Danger Area + + + + 61.264800 + + 6155DEAD + + Danger Area + + + + 110.947200 + + GATE14 + + Truck Stop + + + + 77.724000 + + GATE16 + + Truck Stop + + + + 65.836800 + + GATE17 + + Truck Stop + + + + 57.302400 + + GATE19 + + Truck Stop + + + + 49.377600 + + GATE21 + + Truck Stop + + + + 81.076800 + + GATE24 + + Truck Stop + + + + 21.515015 + + GATE5 + + Truck Stop + + + + 26.561890 + + GATE6 + + Trailhead + + + + 32.004000 + + 6077LOGS + + Amusement Park + + + + 119.809082 + + 5148NANEPA + + Trailhead + + + + 73.761600 + + 5267OBSTAC + + Amusement Park + + + + 45.307495 + + PANTHRCAVE + + Tunnel + + + + 77.992066 + + 5252PURPLE + + Summit + + + + 67.970400 + + 5287WATER + + Swimming Area + + + + 81.076800 + + 5239ROAD + + Truck Stop + + + + 67.360800 + + 5278ROAD + + Truck Stop + + + + 53.949600 + + 5058ROAD + ROAD CROSSING + + Dot + + + + 69.799200 + + SHEEPFOLD + + Parking Area + + + + 64.008000 + + SOAPBOX + + Cemetery + + + + 64.533692 + + 5376STREAM + + Bridge + + + + 61.649902 + + 5144SUMMIT + + Summit + + + + 67.360800 + + 5150TANK + WATER TANK + + Museum + + + + BELLEVUE + + 1 + + 23.469600 + + BELLEVUE + BELLEVUE + + Parking Area + + + + 26.561890 + + GATE6 + + Trailhead + + + + 45.307495 + + PANTHRCAVE + + Tunnel + + + + 37.616943 + + 6014MEADOW + + Dot + + + + 56.388000 + + 6006 + + Dot + + + + 46.028564 + + 6006BLUE + + Dot + + + + 44.826904 + + 5096 + + Dot + + + + 44.586548 + + 5066 + + Crossing + + + + 57.607200 + + 5067 + + Dot + + + + 53.949600 + + 5058ROAD + ROAD CROSSING + + Dot + + + + 67.360800 + + 5150TANK + WATER TANK + + Museum + + + + 50.594727 + + 5142 + + Dot + + + + 61.649902 + + 5144SUMMIT + + Summit + + + + 127.711200 + + 5156 + + Dot + + + + 119.809082 + + 5148NANEPA + + Trailhead + + + + 74.627442 + + 5258 + + Dot + + + + 77.992066 + + 5252PURPLE + + Summit + + + + 78.713135 + + 527631 + + Dot + + + + 78.713135 + + 527614 + + Dot + + + + 73.761600 + + 5267OBSTAC + + Amusement Park + + + + 68.275200 + + 5278 + + Dot + + + + 64.008000 + + 5289 + + Dot + + + + 52.997925 + + 5374FIRE + + Dot + + + + 56.388000 + + 5376 + + Dot + + + + 64.533692 + + 5376STREAM + + Bridge + + + + 53.644800 + + 6328 + + Dot + + + + 48.768000 + + 635722 + + Dot + + + + 49.072800 + + 635783 + + Dot + + + + 62.484000 + + 6373 + + Dot + + + + 87.782400 + + BEAR HILL + BEAR HILL TOWER + + Tall Tower + + + + 72.945191 + + 6289 + + Dot + + + + 72.847200 + + 6297 + + Dot + + + + 66.696655 + + 6283 + + Dot + + + + 57.564209 + + 6280 + + Dot + + + + 62.179200 + + 6177 + + Dot + + + + 62.484000 + + 6176 + + Dot + + + + 62.788800 + + 6153 + + Dot + + + + 55.473600 + + 6171 + + Dot + + + + 64.008000 + + 6131 + + Dot + + + + 64.008000 + + 6130 + + Dot + + + + 56.388000 + + 6029 + + Dot + + + + 56.388000 + + 6006 + + Dot + + + + 37.616943 + + 6014MEADOW + + Dot + + + + 45.307495 + + PANTHRCAVE + + Tunnel + + + + 26.561890 + + GATE6 + + Trailhead + + + + 23.469600 + + BELLEVUE + BELLEVUE + + Parking Area + + + + \ No newline at end of file diff --git a/examples/gpx.html b/examples/gpx.html new file mode 100644 index 0000000000..6e12988b2b --- /dev/null +++ b/examples/gpx.html @@ -0,0 +1,55 @@ + + + + + + + + + + GPX example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

GPX example

+

Example of using the GPX source.

+
+

See the gpx.js source to see how this is done.

+
+
GPX
+
+
+
+   +
+
+ +
+ +
+ + + + + + + diff --git a/examples/gpx.js b/examples/gpx.js new file mode 100644 index 0000000000..181f5b56a7 --- /dev/null +++ b/examples/gpx.js @@ -0,0 +1,94 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.BingMaps'); +goog.require('ol.source.GPX'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + +var raster = new ol.layer.Tile({ + source: new ol.source.BingMaps({ + imagerySet: 'Aerial', + key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3' + }) +}); + +var style = { + 'Point': [new ol.style.Style({ + image: new ol.style.Circle({ + fill: new ol.style.Fill({ + color: 'rgba(255,255,0,0.4)' + }), + radius: 5, + stroke: new ol.style.Stroke({ + color: '#ff0', + width: 1 + }) + }) + })], + 'LineString': [new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: '#f00', + width: 3 + }) + })], + 'MultiLineString': [new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: '#0f0', + width: 3 + }) + })] +}; + +var vector = new ol.layer.Vector({ + source: new ol.source.GPX({ + reprojectTo: 'EPSG:3857', + url: 'data/gpx/fells_loop.gpx' + }), + styleFunction: function(feature, resolution) { + return style[feature.getGeometry().getType()]; + } +}); + +var map = new ol.Map({ + layers: [raster, vector], + renderer: ol.RendererHint.CANVAS, + target: document.getElementById('map'), + view: new ol.View2D({ + center: [-7916041.528716288, 5228379.045749711], + zoom: 12 + }) +}); + +var displayFeatureInfo = function(pixel) { + var features = []; + map.forEachFeatureAtPixel(pixel, function(feature, layer) { + features.push(feature); + }); + if (features.length > 0) { + var info = []; + var i, ii; + for (i = 0, ii = features.length; i < ii; ++i) { + info.push(features[i].get('desc')); + } + document.getElementById('info').innerHTML = info.join(', ') || '(unknown)'; + map.getTarget().style.cursor = 'pointer'; + } else { + document.getElementById('info').innerHTML = ' '; + map.getTarget().style.cursor = ''; + } +}; + +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + displayFeatureInfo(pixel); +}); + +map.on('singleclick', function(evt) { + var pixel = evt.getPixel(); + displayFeatureInfo(pixel); +});