Add shadows below markers.

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

diff --git a/wrmap.js b/wrmap.js
index 878b70982faa1cec46f186d855b6d901e2ca8a63..24d4b69b4c31a987838b590cd926b25c6fe9290c 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -19,7 +19,6 @@ function init_wrmap(i, jq_map) {
        var EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
        var EPSG3857 = ol.proj.get("EPSG:3857"); // google
 
        var EPSG4326 = ol.proj.get("EPSG:4326"); // lon/lat
        var EPSG3857 = ol.proj.get("EPSG:3857"); // google
 

-       /*

        // tool functions
        function createElement(tagName, attributes) {
                var element = $(document.createElement(tagName));
        // tool functions
        function createElement(tagName, attributes) {
                var element = $(document.createElement(tagName));


@@ -36,31 +35,18 @@ function init_wrmap(i, jq_map) {
                parentElement.append(element);
                return element;
        }
                parentElement.append(element);
                return element;
        }

-       */

 
 
        // extract geojson from map element and clear map element's content
        jq_map = $(jq_map);
        var ext_path = jq_map.attr('data-ext-path'); // e.g. '/mediawiki/extensions/wrmap'
        var img_path = ext_path + '/img';
 
 
        // extract geojson from map element and clear map element's content
        jq_map = $(jq_map);
        var ext_path = jq_map.attr('data-ext-path'); // e.g. '/mediawiki/extensions/wrmap'
        var img_path = ext_path + '/img';

-       //OpenLayers.ImgPath = ext_path + '/openlayers/img/'; // e.g. '/mediawiki/extensions/wrmap/openlayers/img/'

        var json_string = jq_map.children().last().text();
        jq_map.empty(); // once parsed, remove geojson string from the map element.
        var json_js = JSON.parse(json_string);
        var format_geojson = new ol.format.GeoJSON();
        var features_all = format_geojson.readFeatures(json_js, {dataProjection: EPSG4326, featureProjection: EPSG3857});
 
        var json_string = jq_map.children().last().text();
        jq_map.empty(); // once parsed, remove geojson string from the map element.
        var json_js = JSON.parse(json_string);
        var format_geojson = new ol.format.GeoJSON();
        var features_all = format_geojson.readFeatures(json_js, {dataProjection: EPSG4326, featureProjection: EPSG3857});
 

-       // extract, tranform and split features to layers
-       /*
-       var features_path = new Array();
-       var features_point = new Array();
-       for (var i = 0; i != features_all.length; ++i) {
-               var feature = features_all[i];
-               feature.geometry.transform(EPSG4326, EPSG3857);
-               if (feature.geometry instanceof OpenLayers.Geometry.Point) features_point.push(feature);
-               else features_path.push(feature);
-       }
-       */

 
        // background layer
        // ----------------
 
        // background layer
        // ----------------


@@ -110,30 +96,40 @@ function init_wrmap(i, jq_map) {
 
        function style_point_function(feature, resolution) {
                if (feature.get('type') == 'sledrun') {
 
        function style_point_function(feature, resolution) {
                if (feature.get('type') == 'sledrun') {

-                       var condition = get_sledrun_condition(feature);
-                       var src = img_path + '/marker_c_sledrun_' + condition + 'nn.png';
-                       return new ol.style.Style({
+                       let condition = get_sledrun_condition(feature);
+                       let src = img_path + '/marker_c_sledrun_' + condition + 'nn.png';
+                       let marker_style = new ol.style.Style({

                                image: new ol.style.Icon({
                                        src: src,
                                        imgSize: [17, 17],
                                        anchor: [0.5, 0.5]
                                }),
                        });
                                image: new ol.style.Icon({
                                        src: src,
                                        imgSize: [17, 17],
                                        anchor: [0.5, 0.5]
                                }),
                        });

+                       let shadow_style = new ol.style.Style({
+                               image: new ol.style.Icon({
+                                       src: img_path + '/marker_c_shadow.png',
+                                       imgSize: [23, 23],
+                                       anchor: [0.4, 0.4]
+                               }),
+                       });
+                       return [shadow_style, marker_style];
+

                } else {
                } else {

-                       var src = img_path + '/marker_p_' + feature.get('type') + '.png';
-                       return new ol.style.Style({
+                       let src = img_path + '/marker_p_' + feature.get('type') + '.png';
+                       let marker_style = new ol.style.Style({

                                image: new ol.style.Icon({
                                        src: src,
                                        imgSize: [20, 34],
                                        anchor: [0.5, 1.0]
                                }),
                        });
                                image: new ol.style.Icon({
                                        src: src,
                                        imgSize: [20, 34],
                                        anchor: [0.5, 1.0]
                                }),
                        });

+                       return [marker_style];

                }
        }
 
        function style_point_function_selected(feature, resolution) {
                }
        }
 
        function style_point_function_selected(feature, resolution) {

-               var style = style_point_function(feature, resolution);
-               style.setText(new ol.style.Text({
+               let style_array = style_point_function(feature, resolution);
+               style_array[0].setText(new ol.style.Text({

                        text: get_feature_title(feature),
                        font: 'icon',
                        offsetY: 14,
                        text: get_feature_title(feature),
                        font: 'icon',
                        offsetY: 14,


@@ -142,7 +138,7 @@ function init_wrmap(i, jq_map) {
                                width: 2,
                        }),
                }));
                                width: 2,
                        }),
                }));

-               return style;
+               return style_array;

        }
 
        function style_path_function(feature, resolution) {
        }
 
        function style_path_function(feature, resolution) {


@@ -179,35 +175,48 @@ function init_wrmap(i, jq_map) {
        var popup_container = document.getElementById('popup');
        var popup_content = document.getElementById('popup-content');
        var popup_closer = document.getElementById('popup-closer');
        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}});
+       var popup_overlay = new ol.Overlay({element: popup_container, autoPan: {animation: {duration: 250}}});

        popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
 
        popup_closer.onclick = function() {popup_overlay.setPosition(undefined); popup_closer.blur(); return false;};
 

-       /*
-       var layer_path = new OpenLayers.Layer.Vector("Path", {
-               styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
-                               strokeColor: '${getStrokeColor}',
-                               strokeWidth: '${getStrokeWidth}'
-                       }, {
-                               context: {
-                                       getStrokeColor: function(feature) {
-                                               if (feature.attributes.strokeColor !== undefined) return feature.attributes.strokeColor;
-                                               if (feature.attributes.type == 'rodelbahn') return '#014e9a';
-                                               if (feature.attributes.type == 'gehweg') return '#e98401';
-                                               if (feature.attributes.type == 'alternative') return '#7f7fff';
-                                               if (feature.attributes.type == 'lift') return '#000000';
-                                               if (feature.attributes.type == 'anfahrt') return '#e1e100';
-                                               return '#e7525b';
-                                       },
-                                       getStrokeWidth: function(feature) {
-                                               if (feature.attributes.strokeWidth !== undefined) return feature.attributes.strokeWidth;
-                                               if (feature.attributes.type == 'lift' || feature.attributes.type == 'anfahrt') return 3;
-                                               return 6;
-                                       }
-                               }
-                       }))
-       });
+       function create_popup_dom(feature) {
+               var popup_div = createElement('div');

 
 

-       
+               // name
+               if (feature.get('name') !== undefined && (feature.get('wiki') !== undefined || feature.get('thumb_url') !== undefined)) {
+                       var h2 = appendElement(popup_div, 'h2');
+                       if (feature.get('wiki') === undefined) h2.text(feature.get('name'));
+                       else appendElement(h2, 'a', {href: feature.get('wiki')}).text(feature.get('name'));
+               }
+
+               // sledrun information
+               if (feature.get('type') == 'sledrun') {
+                       var p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
+                       if (feature.get('condition') !== undefined) {
+                               var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
+                               var year_month_day = feature.get('date_report').split('-');
+                               p.append(createElement('a', {href: feature.get('wiki') + '#Eintr.C3.A4ge'}).text(condition_text[feature.get('condition')]), ' ');
+                               p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
+                               p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Neu')));
+                       } else {
+                               p.append(createElement('em').append(createElement('a', {href: feature.get('wiki') + '#Eintragen'}).text('Bitte eintragen')));
+                       }
+               }
+
+               // wiki link
+               if (feature.get('wiki') !== undefined) {
+                       var a = appendElement(appendElement(popup_div, 'p'), 'a', {href: feature.get('wiki')});
+                       var detail_text = 'Details';
+                       if (feature.get('type') == 'sledrun') detail_text += ' zur Rodelbahn';
+                       if (feature.get('type') == 'gasthaus') detail_text += ' zum Gasthaus';
+                       if (feature.get('thumb_url') === undefined) a.text(detail_text);
+                       else a.append(createElement('img', {src: feature.get('thumb_url'), alt: detail_text, title: detail_text}));
+               }
+
+               return popup_div;
+       }
+
+
+       /*

        // point layer
        // -----------
        var filter_point_sledrun = new OpenLayers.Filter.Comparison({
        // point layer
        // -----------
        var filter_point_sledrun = new OpenLayers.Filter.Comparison({


@@ -333,17 +342,6 @@ function init_wrmap(i, jq_map) {
        if (height === undefined) height = 450;  // default: 450 pixel
        jq_map.width(width);
        jq_map.height(height);
        if (height === undefined) height = 450;  // default: 450 pixel
        jq_map.width(width);
        jq_map.height(height);

-       /*
-       var map = new OpenLayers.Map(jq_map[0], {
-               projection: EPSG3857,
-               displayProjection: EPSG4326,
-               units: "m",
-               theme: null,
-               layers: [layer_map, layer_path, layer_point],
-               center: new OpenLayers.LonLat(lon, lat).transform(EPSG4326, EPSG3857),
-               zoom: zoom
-       });
-       */

 
        var layer_sledrun_source = new ol.source.Vector({features: features_all});
        var layer_sledrun = new ol.layer.Vector({
 
        var layer_sledrun_source = new ol.source.Vector({features: features_all});
        var layer_sledrun = new ol.layer.Vector({


@@ -387,97 +385,13 @@ function init_wrmap(i, jq_map) {
                if (event.selected.length > 0) {
                        let feature = event.selected[0];
                        let coordinates = feature.getGeometry().getCoordinates();
                if (event.selected.length > 0) {
                        let feature = event.selected[0];
                        let coordinates = feature.getGeometry().getCoordinates();

-                       popup_content.innerHTML = '<p>You clicked</p>';
-                       popup_overlay.setPosition(coordinates);
-               }
-       });
-
-       /*
-       // add features
-       // if this would be done before the layer is added to the map, the features are not added
-       layer_path.addFeatures(features_path); 
-       layer_point.addFeatures(features_point); 
-
-       // disable mouse wheel zoom
-       var navigation_control = map.getControlsByClass('OpenLayers.Control.Navigation')[0];
-       navigation_control.disableZoomWheel();
-
-       // layer switcher
-       // map.addControl(new OpenLayers.Control.LayerSwitcher());
-
-       // print sledrun name when mouse moves over it
-       map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
-               hover: true,
-               highlightOnly: true,
-               autoActivate: true,
-               renderIntent: "highlight"
-       }));
-
-       // show popup when user clicks on a sledrun icon
-       map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
-               autoActivate: true,
-               toggle: true,
-               onSelect: function(feature) {
-                       var attr = feature.attributes;
-                       var popup_div = createElement('div');
-
-                       // name
-                       if (attr.name !== undefined && (attr.wiki !== undefined || attr.thumb_url !== undefined)) {
-                               var h2 = appendElement(popup_div, 'h2');
-                               if (attr.wiki === undefined) h2.text(attr.name);
-                               else appendElement(h2, 'a', {href: attr.wiki}).text(attr.name);
-                       }
-
-                       // sledrun information
-                       if (attr.type == 'sledrun') {
-                               var p = appendElement(popup_div, 'p').text('Rodelbahnzustand').append(createElement('br'));
-                               if (attr.condition !== undefined) {
-                                       var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelmäßig', 4: 'Schlecht', 5: 'Geht nicht'};
-                                       var year_month_day = attr.date_report.split('-');
-                                       p.append(createElement('a', {href: attr.wiki + '#Eintr.C3.A4ge'}).text(condition_text[attr.condition]), ' ');
-                                       p.append(createElement('small').text(year_month_day[2] + '.' + year_month_day[1] + '.'), ' ');
-                                       p.append(createElement('em').append(createElement('a', {href: attr.wiki + '#Eintragen'}).text('Neu')));
-                               } else {
-                                       p.append(createElement('em').append(createElement('a', {href: attr.wiki + '#Eintragen'}).text('Bitte eintragen')));
-                               }
-                       }
-
-                       // wiki link
-                       if (attr.wiki !== undefined) {
-                               var a = appendElement(appendElement(popup_div, 'p'), 'a', {href: attr.wiki});
-                               var detail_text = 'Details';
-                               if (attr.type == 'sledrun') detail_text += ' zur Rodelbahn';
-                               if (attr.type == 'gasthaus') detail_text += ' zum Gasthaus';
-                               if (attr.thumb_url === undefined) a.text(detail_text);
-                               else a.append(createElement('img', {src: attr.thumb_url, alt: detail_text, title: detail_text}));
+                       let popup_dom = create_popup_dom(feature);
+                       if (popup_dom.children().length > 0) {
+                               $(popup_content).empty().append(popup_dom);
+                               popup_overlay.setPosition(coordinates);

                        }
                        }

-
-                       // no popup if we don't have anything to say
-                       if (popup_div.children().length == 0) return;
-
-                       // Open popup
-                       var selectFeatureControl = this;
-                       var popup = new OpenLayers.Popup.WrInfo('sledruninfopopup_' + attr.wiki,
-                       feature.geometry.getBounds().getCenterLonLat(),
-                       null,
-                       popup_div.html(),
-                       null, true, function(event) {
-                               // onPopupClose
-                               selectFeatureControl.unselectAll();
-                       });
-                       feature.popup = popup;
-                       map.addPopup(popup);
-               },
-               onUnselect: function(feature) {
-                       if (feature.popup === null) return;
-
-                       // Close popup
-                       map.removePopup(feature.popup);
-                       feature.popup.destroy();
-                       feature.popup = null;

                }
                }

-       }));
-*/
+       });

 }
 
 function init_wrmaps() {
 }
 
 function init_wrmaps() {