|
|
| 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> |