GPX Data

This example uses OpenLayers v4.0.1. The latest is v.

#### GPX Data

Example of using the GPX source.

Example of using the GPX source.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.format.GPX
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.BingMaps
,
- ol.source.Vector
,
- ol.style.Circle
,
- ol.style.Fill
,
- ol.style.Stroke
,
- ol.style.Style

Copy Edit
GPX Data Example of using the GPX source. var raster = new ol.layer.Tile({ source: new ol.source.BingMaps({ imagerySet: 'Aerial', key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here' }) }); 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.Vector({ url: 'https://openlayers.org/en/v4.0.1/examples/data/gpx/fells_loop.gpx', format: new ol.format.GPX() }), style: function(feature) { return style[feature.getGeometry().getType()]; } }); var map = new ol.Map({ layers: [raster, vector], target: document.getElementById('map'), view: new ol.View({ center: [-7916041.528716288, 5228379.045749711], zoom: 12 }) }); var displayFeatureInfo = function(pixel) { var features = []; map.forEachFeatureAtPixel(pixel, function(feature) { 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 = '&nbsp;'; map.getTarget().style.cursor = ''; } }; map.on('pointermove', function(evt) { if (evt.dragging) { return; } var pixel = map.getEventPixel(evt.originalEvent); displayFeatureInfo(pixel); }); map.on('click', function(evt) { displayFeatureInfo(evt.pixel); }); <div id="map" class="map"></div> <div id="info">&nbsp;</div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>GPX Data</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div id="info">&nbsp;</div>
        <script>
          var raster = new ol.layer.Tile({
            source: new ol.source.BingMaps({
              imagerySet: 'Aerial',
              key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
            })
          });

          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.Vector({
              url: 'https://openlayers.org/en/v4.0.1/examples/data/gpx/fells_loop.gpx',
              format: new ol.format.GPX()
            }),
            style: function(feature) {
              return style[feature.getGeometry().getType()];
            }
          });

          var map = new ol.Map({
            layers: [raster, vector],
            target: document.getElementById('map'),
            view: new ol.View({
              center: [-7916041.528716288, 5228379.045749711],
              zoom: 12
            })
          });

          var displayFeatureInfo = function(pixel) {
            var features = [];
            map.forEachFeatureAtPixel(pixel, function(feature) {
              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 = '&nbsp;';
              map.getTarget().style.cursor = '';
            }
          };

          map.on('pointermove', function(evt) {
            if (evt.dragging) {
              return;
            }
            var pixel = map.getEventPixel(evt.originalEvent);
            displayFeatureInfo(pixel);
          });

          map.on('click', function(evt) {
            displayFeatureInfo(evt.pixel);
          });
        </script>
      </body>
    </html>