Combined layer_sledmap and layer_point to just one layer (layer_point).
authorphilipp <philipp@7aebc617-e5e2-0310-91dc-80fb5f6d2477>
Sat, 10 Aug 2013 13:30:29 +0000 (13:30 +0000)
committerphilipp <philipp@7aebc617-e5e2-0310-91dc-80fb5f6d2477>
Sat, 10 Aug 2013 13:30:29 +0000 (13:30 +0000)
git-svn-id: http://www.winterrodeln.org/svn/servermediawiki/mediawiki_extensions/wrmap/trunk@1505 7aebc617-e5e2-0310-91dc-80fb5f6d2477

wrmap.js

index 14c8a5ec55bc3dad2efa79b54c4a6d7233dd24c2..547b3f6cad3283e00d7b18e3e0b2c2743aa87916 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -11,19 +11,35 @@ function init_wrmap(i, jq_map) {
        // extract, tranform and split features to layers
        var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat 
        var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
+       var POINT_NAME = {'sledrun': 'Rodelbahn', 'inn': 'Gasthaus', 'busstop': 'Haltestelle', 'carpark': 'Parkplatz', 'attention': 'Achtung', 'point': 'Punkt'};
        var format_json = new OpenLayers.Format.GeoJSON();
        var features_all = format_json.read(json_string);
        var features_path = new Array();
        var features_point = new Array();
-       var features_sledrun = new Array();
        for (var i = 0; i != features_all.length; ++i) {
                var feature = features_all[i];
                feature.geometry.transform(EPSG4326, EPSG3857);
                if (feature.geometry.CLASS_NAME == 'OpenLayers.Geometry.Point') {
                        if (feature.attributes.type == 'sledrun') {
-                               if (feature.attributes.condition === undefined) feature.attributes.condition = 0;
-                               features_sledrun.push(feature);
-                       } else features_point.push(feature);
+                               var condition = feature.attributes.condition;
+                               if (condition === undefined) condition = 0;
+                               feature.attributes.externalGraphic = 'bahnzustand' + condition + '_0.png';
+                               feature.attributes.graphicWidth = 17;
+                               feature.attributes.graphicHeight = 17;
+                               feature.attributes.graphicXOffset = -8;
+                               feature.attributes.graphicYOffset = -8;
+                       } else {
+                               var name = POINT_NAME[feature.attributes.type];
+                               if (feature.attributes.type == 'point' || name === undefined)
+                                       feature.attributes.externalGraphic = 'gmap.png';
+                               else
+                                       feature.attributes.externalGraphic = 'gmap' + name + '.png';
+                               feature.attributes.graphicWidth = 20;
+                               feature.attributes.graphicHeight = 34;
+                               feature.attributes.graphicXOffset = -10;
+                               feature.attributes.graphicYOffset = -33;
+                       }
+                       features_point.push(feature);
                } else features_path.push(feature);
        }
 
@@ -71,63 +87,41 @@ function init_wrmap(i, jq_map) {
        
        // point layer
        // -----------
-       var POINT_NAME = {'inn': 'Gasthaus', 'busstop': 'Haltestelle', 'carpark': 'Parkplatz', 'attention': 'Achtung', 'point': 'Punkt'};
        var layer_point = new OpenLayers.Layer.Vector("Point", {
-               styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
-                               externalGraphic: '/vorlagen/${getExternalGraphic}',
-                               graphicWidth: 20,
-                               graphicHeight: 34,
-                               graphicXOffset: -10,
-                               graphicYOffset: -33,
-                               title: '${getTitle}'
-                       }, {
-                               context: {
-                                       getExternalGraphic: function(feature) {
-                                               if (feature.attributes.type == 'point') return 'gmap.png';
-                                               var name = POINT_NAME[feature.attributes.type];
-                                               if (name !== undefined) return 'gmap' + name + '.png';
-                                               return 'gmap.png'; // should not happen
-                                       },
-                                       getTitle: function(feature) {
-                                               var title = '';
-                                               if (feature.attributes.type != 'point') {
-                                                       title = POINT_NAME[feature.attributes.type];
-                                                       if (feature.attributes.name !== undefined) title += ': ';
+               styleMap: new OpenLayers.StyleMap({
+                       'default': new OpenLayers.Style({
+                                       externalGraphic: '/vorlagen/${externalGraphic}',
+                                       graphicWidth: '${graphicWidth}',
+                                       graphicHeight: '${graphicHeight}',
+                                       graphicXOffset: '${graphicXOffset}',
+                                       graphicYOffset: '${graphicYOffset}',
+                                       graphicZIndex: 12,
+                                       backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
+                                       backgroundWidth: 23,
+                                       backgroundHeight: 23,
+                                       backgroundXOffset: -8,
+                                       backgroundYOffset: -8,
+                                       backgroundGraphicZIndex: 11,
+                                       title: '${getTitle}'
+                               }, {
+                                       context: {
+                                               getTitle: function(feature) {
+                                                       var title = '';
+                                                       if (feature.attributes.type != 'point') {
+                                                               title = POINT_NAME[feature.attributes.type];
+                                                               if (feature.attributes.name !== undefined) title += ': ';
+                                                       }
+                                                       if (feature.attributes.name !== undefined) title += feature.attributes.name;
+                                                       return title;
                                                }
-                                               if (feature.attributes.name !== undefined) title += feature.attributes.name;
-                                               return title;
                                        }
-                               }
-                       })),
-               rendererOptions: {yOrdering: true}
-       });
-
-
-       // sledrun layer
-       // ------------
-       var layer_sledrun = new OpenLayers.Layer.Vector("Sledrun", { 
-               styleMap: new OpenLayers.StyleMap({
-                       "default": new OpenLayers.Style({
-                               externalGraphic: "/vorlagen/bahnzustand${condition}_0.png",
-                               graphicWidth: 17,
-                               graphicHeight: 17,
-                               graphicXOffset: -8,
-                               graphicYOffset: -8,
-                               graphicZIndex: 12,
-                               backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
-                               backgroundWidth: 23,
-                               backgroundHeight: 23,
-                               backgroundXOffset: -8,
-                               backgroundYOffset: -8,
-                               backgroundGraphicZIndex: 11,
-                               title: "${name}"
-                       }),
-                       "highlight": new OpenLayers.Style({
-                               label: "${name}",
-                               labelOutlineColor: "white",
-                               labelYOffset: 12,
-                               fontWeight: "bold"
-                       }) 
+                               }),
+                       'highlight': new OpenLayers.Style({
+                                       label: "${name}",
+                                       labelOutlineColor: "white",
+                                       labelYOffset: 12,
+                                       fontWeight: "bold"
+                               }) 
                }),
                rendererOptions: {yOrdering: true}
        });
@@ -143,7 +137,7 @@ function init_wrmap(i, jq_map) {
                displayProjection: EPSG4326,
                units: "m",
                theme: null,
-               layers: [layer_map, layer_path, layer_point, layer_sledrun],
+               layers: [layer_map, layer_path, layer_point],
                center: new OpenLayers.LonLat(lon, lat).transform(EPSG4326, EPSG3857),
                zoom: zoom
        });
@@ -153,7 +147,6 @@ function init_wrmap(i, jq_map) {
        // 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); 
-       layer_sledrun.addFeatures(features_sledrun); 
 
        // disable mouse wheel zoom
        var navigation_control = map.getControlsByClass('OpenLayers.Control.Navigation')[0];
@@ -163,7 +156,7 @@ function init_wrmap(i, jq_map) {
        // map.addControl(new OpenLayers.Control.LayerSwitcher());
 
        // print sledrun name when mouse moves over it
-       map.addControl(new OpenLayers.Control.SelectFeature(layer_sledrun, {
+       map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
                hover: true,
                highlightOnly: true,
                autoActivate: true,
@@ -171,16 +164,18 @@ function init_wrmap(i, jq_map) {
        }));
 
        // show popup when user clicks on a sledrun icon
-       map.addControl(new OpenLayers.Control.SelectFeature(layer_sledrun, {
+       map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
                autoActivate: true,
                toggle: true,
                onSelect: function(feature) {
+                       if (feature.attributes.type != 'sledrun') return;
+
                        // Open popup
                        var popup_text = "<h2>" + feature.attributes.name + '</h2>\n' +
                        '<ul>\n' +
                        '<li><a href="' + feature.attributes.wiki + '">Details zur Rodelbahn</a></li>\n' + 
                        '<li>Rodelbahnzustand<br/>';
-                       if (feature.attributes.date_report !== undefined) {
+                       if (feature.attributes.condition !== undefined) {
                                var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelm&auml;&szlig;ig', 4: 'Schlecht', 5: 'Geht nicht'};
                                var year_month_day = feature.attributes.date_report.split('-');
                                popup_text += '<a href="' + feature.attributes.wiki + '#Eintr.C3.A4ge">' + condition_text[feature.attributes.condition] + '</a> ' + 
@@ -203,6 +198,8 @@ function init_wrmap(i, jq_map) {
                        map.addPopup(popup);
                },
                onUnselect: function(feature) {
+                       if (feature.popup === null) return;
+
                        // Close popup
                        map.removePopup(feature.popup);
                        feature.popup.destroy();