Parts of styling work again.

git-svn-id: http://www.winterrodeln.org/svn/servermediawiki/mediawiki_extensions/wrmap/trunk@1499 7aebc617-e5e2-0310-91dc-80fb5f6d2477

diff --git a/wrmap.body.php b/wrmap.body.php
index 1fdc8234f855125ab81fd5a21e780caff9385131..f6ed44545c53ea81e11eeb47334934994aa16f60 100644 (file)
--- a/wrmap.body.php
+++ b/wrmap.body.php
@@ -36,23 +36,16 @@ function sledruns_to_json_features() {
                $lat = floatval($lat);
                $lon = floatval($lon);
                $title = Title::newFromText($sledrun['page_title']);
-               $title_text = $title->getText();
-               $title_url = $title->getLocalUrl();
-               $condition = $sledrun['condition'];
-               if (!is_null($condition)) $condition = intval($condition);
+               $properties = array('type' => 'sledrun', 'name' => $title->getText(), 'wiki' => $title->getLocalUrl());
+               if (!is_null($sledrun['date_report'])) $properties[] = $sledrun['date_report'];
+               if (!is_null($sledrun['condition'])) $properties[] = intval($sledrun['condition']);
                $json_feature = array(
                        'type' => 'feature',
                        'geometry' => array(
                                'type' => 'Point',
                                'coordinates' => array($lon, $lat)
                        ),
-                       'properties' => array(
-                               'type' => 'sledrun',
-                               'name' => $title_text,
-                               'wiki' => $title_url,
-                               'date_report' => $sledrun['date_report'],
-                               'condition' => $condition
-                       )
+                       'properties' => $properties
                );
                $json_features[] = $json_feature;
        }
@@ -67,6 +60,7 @@ function xml_to_json_features($input) {
        libxml_use_internal_errors(true); // without that, we get PHP Warnings if the $input is not well-formed
        $xml = new SimpleXMLElement($input); // input
        $json_features = array(); // output
+       $line_type = array('rodelbahn' => 'sledrun', 'gehweg' => 'walk', 'alternative' => 'alternative', 'lift' => 'lift', 'linie' => 'line');
        foreach ($xml as $feature) {
                // point
                if (in_array($feature->getName(), array('gasthaus', 'haltestelle', 'parkplatz', 'punkt'))) {
@@ -87,20 +81,18 @@ function xml_to_json_features($input) {
                        $json_features[] = $json_feature;
                }
                // line
-               if (in_array($feature->getName(), array('rodelbahn', 'gehweg', 'alternative', 'lift', 'linie'))) {
-                       $color = array_get('farbe', $feature, null);
-                       $thickness = array_get('dicke', $feature, null);
+               if (in_array($feature->getName(), array_keys($line_type))) {
+                       $properties = array();
+                       if (array_key_exists('farbe', $feature)) $properties['strokeColor'] = $feature['farbe'];
+                       if (array_key_exists('dicke', $feature)) $properties['strokeWidth'] = $feature['dicke'];
+                       $properties['type'] = $line_type[$feature->getName()];
                        $json_feature = array(
                                'type' => 'feature',
                                'geometry' => array(
                                        'type' => 'LineString',
                                        'coordinates' => geo_to_coordinates($feature)
                                ),
-                               'properties' => array(
-                                       'type' => $feature->getName(),
-                                       'color' => $color,
-                                       'thickness' => $thickness
-                               )
+                               'properties' => $properties
                        );
                        $json_features[] = $json_feature;
                }

diff --git a/wrmap.js b/wrmap.js
index 701780efcd5c2040a8e9a2f0f4eaaa6fc1db4081..c1eab9621372028ff5567e0119f511a62aef0d7a 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -6,14 +6,28 @@ function init_wrmap(i, jq_map) {
        OpenLayers.ImgPath = jq_map.attr('data-img-path'); // e.g. "/mediawiki/extensions/wrmap/openlayers/img/"
        var json_string = jq_map_script.text();
        jq_map_script.detach();
-       
 
-       // Introduce EPSG:3857 as an alias of the built in EPSG:900913 projection (both are the "Google/OSM" projections)
+       
+       // extract, tranform and split features to layers
        var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat 
-       var EPSG3857 = new OpenLayers.Projection("EPSG:900913"); // google
+       var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
+       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') features_sledrun.push(feature);
+                       else features_point.push(feature);
+               } else features_path.push(feature);
+       }
 
 
-       // Google Layer
+       // background layer
+       // ----------------
        var layer_map = new OpenLayers.Layer.Google("Google Physical", {
                type: google.maps.MapTypeId.TERRAIN
        });
@@ -27,11 +41,42 @@ function init_wrmap(i, jq_map) {
        //     key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA"});
 
        
-       // GeoJSON
-       var layer_json = new OpenLayers.Layer.Vector("Overlay", {
+       // path layer
+       // ----------
+       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 == 'sledrun') return '#014e9a';
+                                               if (feature.attributes.type == 'walk') return '#e98401';
+                                               if (feature.attributes.type == 'alternative') return '#7f7fff';
+                                               if (feature.attributes.type == 'lift') return '#000000';
+                                               return '#ee9900';
+                                       },
+                                       getStrokeWidth: function(feature) {
+                                               if (feature.attributes.strokeWidth !== undefined) return feature.attributes.strokeWidth;
+                                               if (feature.attributes.type == 'lift') return 3;
+                                               return 6;
+                                       }
+                               }
+                       }))
+       });
+
+       
+       // point layer
+       // -----------
+       var layer_point = new OpenLayers.Layer.Vector("Point", {
+               rendererOptions: {yOrdering: true}
        });
-       /*
-       var layer_json = new OpenLayers.Layer.Vector("Overlay", { 
+
+       
+       // sledrun layer
+       // ------------
+       var layer_sledrun = new OpenLayers.Layer.Vector("Sledrun", { 
                styleMap: new OpenLayers.StyleMap({
                        "default": new OpenLayers.Style({
                                externalGraphic: "/vorlagen/bahnzustand${condition}_0.png",
@@ -46,10 +91,10 @@ function init_wrmap(i, jq_map) {
                                backgroundXOffset: -8,
                                backgroundYOffset: -8,
                                backgroundGraphicZIndex: 11,
-                               title: "${label}"
+                               title: "${name}"
                        }),
                        "highlight": new OpenLayers.Style({
-                               label: "${label}",
+                               label: "${name}",
                                labelOutlineColor: "white",
                                labelYOffset: 12,
                                fontWeight: "bold"
@@ -57,26 +102,9 @@ function init_wrmap(i, jq_map) {
                }),
                rendererOptions: {yOrdering: true}
        });
-       */
-
-       // Sledrun layer
-       /*
-       jq_sledruns.each(function(j, jq_sledrun) {
-               jq_sledrun = $(jq_sledrun);
-               var lon = parseFloat(jq_sledrun.attr('data-lon'));
-               var lat = parseFloat(jq_sledrun.attr('data-lat'));
-               var point = new OpenLayers.Geometry.Point(lon, lat).transform(EPSG4326, EPSG3857);
-               layer_sledruns.addFeatures([new OpenLayers.Feature.Vector(point, {
-                       label: jq_sledrun.attr('data-title'),
-                       url: jq_sledrun.attr('data-url'),
-                       has_report: jq_sledrun.attr('data-date_report') !== undefined,
-                       date_report: jq_sledrun.attr('data-date_report') === undefined ? null : jq_sledrun.attr('data-date_report'),
-                       condition: jq_sledrun.attr('data-condition') === undefined ? '0' : jq_sledrun.attr('data-condition')
-               })]);
-       });
-       */
 
-       // Create the map
+       // map itself
+       // ----------
        var lon = parseFloat(jq_map.attr('data-center-lon'));
        var lat = parseFloat(jq_map.attr('data-center-lat'));
        var zoom = parseInt(jq_map.attr('data-zoom'));
@@ -85,57 +113,55 @@ function init_wrmap(i, jq_map) {
                displayProjection: EPSG4326,
                units: "m",
                theme: null,
-               layers: [layer_map, layer_json],
+               layers: [layer_map, layer_path, layer_point, layer_sledrun],
                center: new OpenLayers.LonLat(lon, lat).transform(EPSG4326, EPSG3857),
                zoom: zoom
        });
        
 
-       // tranform feature coordinates and add features
-       var format_json = new OpenLayers.Format.GeoJSON();
-       var feature_collection = format_json.read(json_string);
-       for (var i=0, len=feature_collection.length; i!=len; ++i) {
-               feature_collection[i].geometry.transform(EPSG4326, EPSG3857);
-       }
-       layer_json.addFeatures(feature_collection); // if this would be done before the layer is added to the map, the features are not added
+       // 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); 
+       layer_sledrun.addFeatures(features_sledrun); 
 
        // 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_json, {
+       map.addControl(new OpenLayers.Control.SelectFeature(layer_sledrun, {
                hover: true,
                highlightOnly: true,
                autoActivate: true,
                renderIntent: "highlight"
        }));
-       */
 
        // show popup when user clicks on a sledrun icon
-       /*
-       map.addControl(new OpenLayers.Control.SelectFeature(layer_json, {
+       map.addControl(new OpenLayers.Control.SelectFeature(layer_sledrun, {
                autoActivate: true,
                toggle: true,
                onSelect: function(feature) {
                        // Open popup
-                       var popup_text = "<h2>" + feature.attributes['label'] + '</h2>\n' +
+                       var popup_text = "<h2>" + feature.attributes.name + '</h2>\n' +
                        '<ul>\n' +
-                       '<li><a href="' + feature.attributes['url'] + '">Details zur Rodelbahn</a></li>\n' + 
+                       '<li><a href="' + feature.attributes.wiki + '">Details zur Rodelbahn</a></li>\n' + 
                        '<li>Rodelbahnzustand<br/>';
-                       if (feature.attributes['has_report']) {
+                       if (feature.attributes.date_report !== 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['url'] + '#Eintr.C3.A4ge">' + condition_text[feature.attributes['condition']] + '</a> ' + 
+                               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> ' + 
                                '<small>' + year_month_day[2] + '.' + year_month_day[1] + '.</small> ' +
-                               '<em><a href="' + feature.attributes['url'] + '#Eintragen">Neu</a></em>';
+                               '<em><a href="' + feature.attributes.wiki + '#Eintragen">Neu</a></em>';
                        } else {
-                               popup_text += '<em><a href="' + feature.attributes['url'] + '#Eintragen">Bitte eintragen</a></em>';
+                               popup_text += '<em><a href="' + feature.attributes.wiki + '#Eintragen">Bitte eintragen</a></em>';
                        }
                        popup_text += '</li>\n</ul>\n';
                        var selectFeatureControl = this;
-                       var popup = new OpenLayers.Popup.FramedCloud('sledruninfopopup_' + feature.attributes['label'], 
+                       var popup = new OpenLayers.Popup.FramedCloud('sledruninfopopup_' + feature.attributes.wiki, 
                        feature.geometry.getBounds().getCenterLonLat(),
                        null,
                        popup_text,
@@ -153,9 +179,6 @@ function init_wrmap(i, jq_map) {
                        feature.popup = null;
                }
        }));
-       */
-
-
 }