Actions

Widget

Difference between revisions of "Map"

From Dragon Eye Atlas

Line 45: Line 45:


<div id="map" class="map"></div>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
  <div id="popup-content"></div>
</div>
<div id="layerList"></div>
<div id="layerList"></div>
<input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">
<input id="slider" type="range" min="0" max="1" step="0.1" value="1" oninput="layer.setOpacity(this.value)">
Line 415: Line 412:
});
});


var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay({element: container});
map.addOverlay(overlay);
map.on('pointermove', function(e) {
    var html = '';
    map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
        var props = feature.getProperties();
        html += '<div class="inspect-layer">#' + props.layer + '</div>';
        for (var key in props) {
            if (key != 'layer') {
                html += '<span class="inspect-row"><span class="inspect-name">' + key + '</span><span class="inspect-value">' + props[key] + '</span></span>';
            }
        }
    });
    if (html.length > 0) {
        content.innerHTML = html;
        overlay.setPosition(e.coordinate);
    } else {
        overlay.setPosition(undefined);
    }
});
</script>
</script>


</includeonly>
</includeonly>

Revision as of 11:23, 19 September 2019

Map Widget