// 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');
}
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", {
layer_map,
layer_sledrun
],
+ overlays: [popup_overlay],
view: new ol.View({
center: ol.proj.fromLonLat([lon, lat]),
zoom: zoom
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);
});