Add .css for popups.

[philipp/winterrodeln/mediawiki_extensions/wrmap.git] / wrmap.js

diff --git a/wrmap.js b/wrmap.js
index 67292d6a8799c0f1df09480561080d51f938faea..8b7607b943123c0b98518a889fa846938ca27550 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -153,6 +153,13 @@ function init_wrmap(i, jq_map) {
                return style_path_function(feature, resolution);
        };
 
+       // popup overlay
+       // -------------
+       var popup_container = document.getElementById('popup');
+       var popup_content = document.getElementById('popup-content');
+       var popup_closer = document.getElementById('popup-closer');
+       var popup_overlay = new ol.Overlay({element: popup_container, autoPan: true, autoPanAnimation: {duration: 250}});
+       popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
 
        /*
        var layer_path = new OpenLayers.Layer.Vector("Path", {
@@ -335,6 +342,7 @@ function init_wrmap(i, jq_map) {
                        layer_map,
                        layer_sledrun
                ],
+               overlays: [popup_overlay],
                view: new ol.View({
                        center: ol.proj.fromLonLat([lon, lat]),
                        zoom: zoom
@@ -352,6 +360,10 @@ function init_wrmap(i, jq_map) {
                style: style_function_selected,
        });
        map.addInteraction(select_hover);
+       map.on('singleclick', function(event) {
+               popup_content.innerHTML = '<p>You clicked</p>';
+               popup_overlay.setPosition(event.coordinate);
+       });
        select_hover.on('select', function(event) {
                console.log(event);
        });