Now a status message ('Die Landkarte wird geladen...') is shown at startup instead...

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

diff --git a/wrmap.js b/wrmap.js
index 22209e04fd81308afcf12ef78ab9e4d3c2ddc4f4..f6b23ec17177ec27394e547ce8a9e10bb2581239 100644 (file)
--- a/wrmap.js
+++ b/wrmap.js
@@ -1,21 +1,21 @@
 "use strict";
 
 function init_wrmap(i, jq_map) {
+       // define constants
+       var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat
+       var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
+
+       // extract geojson from map element and clear map element's content
        jq_map = $(jq_map);
-       var jq_map_script = jq_map.children();
        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();
-
-       
-       // 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 json_string = jq_map.children().last().text();
+       jq_map.empty(); // once parsed, remove geojson string from the map element.
        var format_json = new OpenLayers.Format.JSON();
        var json_js = format_json.read(json_string);
        var format_geojson = new OpenLayers.Format.GeoJSON();
        var features_all = format_geojson.read(json_js);
+
+       // 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) {
@@ -39,6 +39,10 @@ function init_wrmap(i, jq_map) {
        // var layer_map = new OpenLayers.Layer.Bing({
        //     type: "Road",
        //     key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA"});
+       
+       // // Alternative: Dummy base layer
+       // var layer_map = new OpenLayers.Layer.Vector("Base Layer", {
+       //     isBaseLayer: true});
 
        
        // path layer
@@ -51,15 +55,16 @@ function init_wrmap(i, jq_map) {
                                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 == '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 '#ee9900';
                                        },
                                        getStrokeWidth: function(feature) {
                                                if (feature.attributes.strokeWidth !== undefined) return feature.attributes.strokeWidth;
-                                               if (feature.attributes.type == 'lift') return 3;
+                                               if (feature.attributes.type == 'lift' || feature.attributes.type == 'anfahrt') return 3;
                                                return 6;
                                        }
                                }
@@ -85,12 +90,11 @@ function init_wrmap(i, jq_map) {
                                                // the following context functions should only be available in the rule that uses them,
                                                // but the rule dependent contexts are ignored by OpenLayers (I think that's a bug)
                                                getCondition: function(feature) {
-                                                       if (feature.condition === undefined) return 0;
-                                                       return feature.condition;
+                                                       if (feature.attributes.condition === undefined) return 0;
+                                                       return feature.attributes.condition;
                                                },
                                                getSymbol: function(feature) {
-                                                       var name = POINT_NAME[feature.attributes.type];
-                                                       if (feature.attributes.type == 'point' || name === undefined) return '';
+                                                       var name = feature.attributes.type;
                                                        return name;
                                                }
                                        },
@@ -113,7 +117,7 @@ function init_wrmap(i, jq_map) {
                                                new OpenLayers.Rule({
                                                        elseFilter: true,
                                                        symbolizer: {
-                                                               externalGraphic: '/vorlagen/gmap${getSymbol}.png',
+                                                               externalGraphic: '/vorlagen/gmap_${getSymbol}.png',
                                                                graphicWidth: 20,
                                                                graphicHeight: 34,
                                                                graphicXOffset: -10,
@@ -131,7 +135,8 @@ function init_wrmap(i, jq_map) {
                                                getTitle: function(feature) {
                                                        var title = '';
                                                        if (feature.attributes.type != 'point') {
-                                                               title = POINT_NAME[feature.attributes.type];
+                                                               title = feature.attributes.type;
+                                                               title = title.charAt(0).toUpperCase() + title.slice(1); // First letter uppercase
                                                                if (feature.attributes.name !== undefined) title += ': ';
                                                        }
                                                        if (feature.attributes.name !== undefined) title += feature.attributes.name;
@@ -161,9 +166,16 @@ function init_wrmap(i, jq_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'));
+       var lon = json_js.properties.lon;
+       var lat = json_js.properties.lat;
+       var zoom = json_js.properties.zoom;
+       var width = json_js.properties.width;
+       var height = json_js.properties.height;
+       if (zoom === undefined) zoom = 10; // default zoom
+       if (width === undefined) width = '100%'; // default width
+       if (height === undefined) height = 450;  // default: 450 pixel
+       jq_map.width(width);
+       jq_map.height(height);
        var map = new OpenLayers.Map(jq_map.context, {
                projection: EPSG3857,
                displayProjection: EPSG4326,