Implement simple popup.

diff --git a/extension.json b/extension.json
index 5d38497889fa6446ac7fd35cc0dda96606b147de..849a1e6d98dd588ad8a9172924438416b090d7c7 100644 (file)
--- a/extension.json
+++ b/extension.json
@@ -19,14 +19,14 @@
                        "scripts": [
                                "wrmap.js"
                        ],
-                       "styles": [],
+                       "styles": ["wrmap.css"],
                        "position": "top"
                },
                "ext.wrmap.mobile": {
                        "scripts": [
                                "wrmap.js"
                        ],
-                       "styles": [],
+                       "styles": ["wrmap.css"],
                        "position": "top",
                        "targets": "mobile"
                }

diff --git a/wrmap.body.php b/wrmap.body.php
index 03af984aff360778fc0eca7136ecb06ea731a532..79a4ee8e1245410ba7162f66ec2ffbdf94e3c4be 100644 (file)
--- a/wrmap.body.php
+++ b/wrmap.body.php
@@ -438,12 +438,16 @@ class WrBaseMap {
                // Create <div/> element where the map is placed in
                global $wgExtensionAssetsPath;
                $doc = new WrMapDOMDocument();
-               $div = $doc->appendElement('div', array('class' => 'wrmap', 'style' => 'border-style:none;', 'data-ext-path' => "$wgExtensionAssetsPath/wrmap"));
+               $div_map = $doc->appendElement('div', array('class' => 'wrmap', 'style' => 'border-style:none;', 'data-ext-path' => "$wgExtensionAssetsPath/wrmap"));
                // progress message
-               $div->appendElement('div', array())->appendText(wfMessage('wrmap-loading')->text());
+               $div_map->appendElement('div', array())->appendText(wfMessage('wrmap-loading')->text());
                // data
-               $div->appendElement('div', array('style' => 'height: 0px; display:none;'))->appendText($json_string);
-               return array($doc->saveHTML($div), 'markerType' => 'nowiki');
+               $div_map->appendElement('div', array('style' => 'height: 0px; display:none;'))->appendText($json_string);
+               // popup
+               $div_popup = $doc->appendElement('div', array('id' => 'popup', 'class' => 'ol-popup'));
+               $div_popup->appendElement('a', array('id' => 'popup-closer', 'href' => '#', 'class' => 'ol-popup-closer'));
+               $div_popup->appendElement('div', array('id' => 'popup-content'));
+               return array($doc->saveHTML($div_map) . $doc->saveHTML($div_popup), 'markerType' => 'nowiki');
        }
 
 

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);
        });