Add shadows below markers.

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

diff --git a/wrmap.js b/wrmap.js
index 2bd5ad7610f8beb88428bacfca61c1aa9ff1d5f3..24d4b69b4c31a987838b590cd926b25c6fe9290c 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -96,30 +96,40 @@ function init_wrmap(i, jq_map) {
 
        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]
                                }),
                        });
+                       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 {
-                       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]
                                }),
                        });
+                       return [marker_style];
                }
        }
 
        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,
@@ -128,7 +138,7 @@ function init_wrmap(i, jq_map) {
                                width: 2,
                        }),
                }));
-               return style;
+               return style_array;
        }
 
        function style_path_function(feature, resolution) {
@@ -165,7 +175,7 @@ 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_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;};
 
        function create_popup_dom(feature) {
@@ -376,8 +386,10 @@ function init_wrmap(i, jq_map) {
                        let feature = event.selected[0];
                        let coordinates = feature.getGeometry().getCoordinates();
                        let popup_dom = create_popup_dom(feature);
-                       $(popup_content).empty().append(popup_dom);
-                       popup_overlay.setPosition(coordinates);
+                       if (popup_dom.children().length > 0) {
+                               $(popup_content).empty().append(popup_dom);
+                               popup_overlay.setPosition(coordinates);
+                       }
                }
        });
 }