[GIS] OpenLayers: line elevation profile with slider

elevationopenlayers

I have an OpenLayers client displaying tracks from a vector source. I would like to display an elevation profile of the track. When hovering mouse on a point on the elevation profile, a marker should appear on the corresponding map point. Are there any online resources on building this?

Tutorial for a similar control in Google Maps API

Example of page using the control

Best Answer

It would be helpful to know what type of elevation profile you are using to achieve this but in reality it doesn't matter.

I managed to do this by assigning a function to a hover event on a Kendo chart but it could be done using a data table or similar. I'm assuming that you are using Openlayers 3?

Basically on hover, if you identify the latitude and longitude of the item; you will need to convert these values to a coordinate which matches the map's projection and then create a feature with these coordinates and it to the map.

It can only be added to the map by creating a vector source and adding this feature to the source, then creating a layer which uses this source, and adding this layer to the map.

I'll supply the code I used and hopefully you should be able to figure it out from there.

{
        // if a previous version of the layer was added, remove it
        if (session.map.elevationMarkerLayer) {
            session.map.removeLayer(session.map.elevationMarkerLayer);
        }

        var LonLat = [];
        LonLat.push(e.dataItem.Longitude, e.dataItem.Latitude);
        var coords = ol.proj.transform(LonLat, 'EPSG:4326', 'EPSG:3857');

        // set a style for the icon
        var iconStyle = new ol.style.Style({
            image: new ol.style.RegularShape({
                fill: new ol.style.Fill({
                    color: '#F58026'
                }),
                stroke: new ol.style.Stroke({
                    color: '#000',
                    width: 2
                }),
                points: 3,
                radius: 15,
                rotation: 0,//Math.PI / 4,
                angle: 0
            }),
            text: new ol.style.Text({
                text: e.value.toString(),
                scale: 1.3,
                offsetX: 0,
                offsetY: 15,
                fill: new ol.style.Fill({
                    color: '#F58026'
                }),
                stroke: new ol.style.Stroke({
                    color: '#000',
                    width: 4
                })
            })
        });
        var elevationMarker = new ol.Feature({
            type: 'elevationMarker',
            geometry: new ol.geom.Point(coords)
        });
        session.map.elevationMarkerLayer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [elevationMarker]
            }),
            style: iconStyle,
            zIndex: 30
        });
        session.map.addLayer(session.map.elevationMarkerLayer);
        // timeout method to make this temporary
        setInterval(function () {
            session.map.removeLayer(session.map.elevationMarkerLayer);
        }, 10000);
    }
Related Question