wrmap.js

   1 "use strict";
   2
   3 function init_wrmap(i, jq_map) {
   4         jq_map = $(jq_map);
   5         var jq_map_script = jq_map.children();
   6         OpenLayers.ImgPath = jq_map.attr('data-img-path'); // e.g. "/mediawiki/extensions/wrmap/openlayers/img/"
   7         var json_string = jq_map_script.text();
   8         jq_map_script.detach();
   9
  10
  11         // extract, tranform and split features to layers
  12         var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat
  13         var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
  14         var POINT_NAME = {'sledrun': 'Rodelbahn', 'inn': 'Gasthaus', 'busstop': 'Haltestelle', 'carpark': 'Parkplatz', 'attention': 'Achtung', 'point': 'Punkt'};
  15         var format_json = new OpenLayers.Format.GeoJSON();
  16         var features_all = format_json.read(json_string);
  17         var features_path = new Array();
  18         var features_point = new Array();
  19         for (var i = 0; i != features_all.length; ++i) {
  20                 var feature = features_all[i];
  21                 feature.geometry.transform(EPSG4326, EPSG3857);
  22                 if (feature.geometry.CLASS_NAME == 'OpenLayers.Geometry.Point') {
  23                         if (feature.attributes.type == 'sledrun') {
  24                                 var condition = feature.attributes.condition;
  25                                 if (condition === undefined) condition = 0;
  26                                 feature.attributes.externalGraphic = 'bahnzustand' + condition + '_0.png';
  27                                 feature.attributes.graphicWidth = 17;
  28                                 feature.attributes.graphicHeight = 17;
  29                                 feature.attributes.graphicXOffset = -8;
  30                                 feature.attributes.graphicYOffset = -8;
  31                         } else {
  32                                 var name = POINT_NAME[feature.attributes.type];
  33                                 if (feature.attributes.type == 'point' || name === undefined)
  34                                         feature.attributes.externalGraphic = 'gmap.png';
  35                                 else
  36                                         feature.attributes.externalGraphic = 'gmap' + name + '.png';
  37                                 feature.attributes.graphicWidth = 20;
  38                                 feature.attributes.graphicHeight = 34;
  39                                 feature.attributes.graphicXOffset = -10;
  40                                 feature.attributes.graphicYOffset = -33;
  41                         }
  42                         features_point.push(feature);
  43                 } else features_path.push(feature);
  44         }
  45
  46
  47         // background layer
  48         // ----------------
  49         var layer_map = new OpenLayers.Layer.Google("Google Physical", {
  50                 type: google.maps.MapTypeId.TERRAIN
  51         });
  52
  53         // // Alternative: OSM map
  54         // var layer_map = new OpenLayers.Layer.OSM();
  55
  56         // // Alternative: Microsoft Bing Maps
  57         // var layer_map = new OpenLayers.Layer.Bing({
  58         //     type: "Road",
  59         //     key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA"});
  60
  61
  62         // path layer
  63         // ----------
  64         var layer_path = new OpenLayers.Layer.Vector("Path", {
  65                 styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
  66                                 strokeColor: '${getStrokeColor}',
  67                                 strokeWidth: '${getStrokeWidth}'
  68                         }, {
  69                                 context: {
  70                                         getStrokeColor: function(feature) {
  71                                                 if (feature.attributes.strokeColor !== undefined) return feature.attributes.strokeColor;
  72                                                 if (feature.attributes.type == 'sledrun') return '#014e9a';
  73                                                 if (feature.attributes.type == 'walk') return '#e98401';
  74                                                 if (feature.attributes.type == 'alternative') return '#7f7fff';
  75                                                 if (feature.attributes.type == 'lift') return '#000000';
  76                                                 return '#ee9900';
  77                                         },
  78                                         getStrokeWidth: function(feature) {
  79                                                 if (feature.attributes.strokeWidth !== undefined) return feature.attributes.strokeWidth;
  80                                                 if (feature.attributes.type == 'lift') return 3;
  81                                                 return 6;
  82                                         }
  83                                 }
  84                         }))
  85         });
  86
  87
  88         // point layer
  89         // -----------
  90         var layer_point = new OpenLayers.Layer.Vector("Point", {
  91                 styleMap: new OpenLayers.StyleMap({
  92                         'default': new OpenLayers.Style({
  93                                         externalGraphic: '/vorlagen/${externalGraphic}',
  94                                         graphicWidth: '${graphicWidth}',
  95                                         graphicHeight: '${graphicHeight}',
  96                                         graphicXOffset: '${graphicXOffset}',
  97                                         graphicYOffset: '${graphicYOffset}',
  98                                         graphicZIndex: 12,
  99                                         backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
 100                                         backgroundWidth: 23,
 101                                         backgroundHeight: 23,
 102                                         backgroundXOffset: -8,
 103                                         backgroundYOffset: -8,
 104                                         backgroundGraphicZIndex: 11,
 105                                         title: '${getTitle}'
 106                                 }, {
 107                                         context: {
 108                                                 getTitle: function(feature) {
 109                                                         var title = '';
 110                                                         if (feature.attributes.type != 'point') {
 111                                                                 title = POINT_NAME[feature.attributes.type];
 112                                                                 if (feature.attributes.name !== undefined) title += ': ';
 113                                                         }
 114                                                         if (feature.attributes.name !== undefined) title += feature.attributes.name;
 115                                                         return title;
 116                                                 }
 117                                         }
 118                                 }),
 119                         'highlight': new OpenLayers.Style({
 120                                         label: "${name}",
 121                                         labelOutlineColor: "white",
 122                                         labelYOffset: 12,
 123                                         fontWeight: "bold"
 124                                 })
 125                 }),
 126                 rendererOptions: {yOrdering: true}
 127         });
 128
 129
 130         // map itself
 131         // ----------
 132         var lon = parseFloat(jq_map.attr('data-center-lon'));
 133         var lat = parseFloat(jq_map.attr('data-center-lat'));
 134         var zoom = parseInt(jq_map.attr('data-zoom'));
 135         var map = new OpenLayers.Map(jq_map.context, {
 136                 projection: EPSG3857,
 137                 displayProjection: EPSG4326,
 138                 units: "m",
 139                 theme: null,
 140                 layers: [layer_map, layer_path, layer_point],
 141                 center: new OpenLayers.LonLat(lon, lat).transform(EPSG4326, EPSG3857),
 142                 zoom: zoom
 143         });
 144
 145
 146         // add features
 147         // if this would be done before the layer is added to the map, the features are not added
 148         layer_path.addFeatures(features_path);
 149         layer_point.addFeatures(features_point);
 150
 151         // disable mouse wheel zoom
 152         var navigation_control = map.getControlsByClass('OpenLayers.Control.Navigation')[0];
 153         navigation_control.disableZoomWheel();
 154
 155         // layer switcher
 156         // map.addControl(new OpenLayers.Control.LayerSwitcher());
 157
 158         // print sledrun name when mouse moves over it
 159         map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
 160                 hover: true,
 161                 highlightOnly: true,
 162                 autoActivate: true,
 163                 renderIntent: "highlight"
 164         }));
 165
 166         // show popup when user clicks on a sledrun icon
 167         map.addControl(new OpenLayers.Control.SelectFeature(layer_point, {
 168                 autoActivate: true,
 169                 toggle: true,
 170                 onSelect: function(feature) {
 171                         if (feature.attributes.type != 'sledrun') return;
 172
 173                         // Open popup
 174                         var popup_text = "<h2>" + feature.attributes.name + '</h2>\n' +
 175                         '<ul>\n' +
 176                         '<li><a href="' + feature.attributes.wiki + '">Details zur Rodelbahn</a></li>\n' +
 177                         '<li>Rodelbahnzustand<br/>';
 178                         if (feature.attributes.condition !== undefined) {
 179                                 var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelm&auml;&szlig;ig', 4: 'Schlecht', 5: 'Geht nicht'};
 180                                 var year_month_day = feature.attributes.date_report.split('-');
 181                                 popup_text += '<a href="' + feature.attributes.wiki + '#Eintr.C3.A4ge">' + condition_text[feature.attributes.condition] + '</a> ' +
 182                                 '<small>' + year_month_day[2] + '.' + year_month_day[1] + '.</small> ' +
 183                                 '<em><a href="' + feature.attributes.wiki + '#Eintragen">Neu</a></em>';
 184                         } else {
 185                                 popup_text += '<em><a href="' + feature.attributes.wiki + '#Eintragen">Bitte eintragen</a></em>';
 186                         }
 187                         popup_text += '</li>\n</ul>\n';
 188                         var selectFeatureControl = this;
 189                         var popup = new OpenLayers.Popup.FramedCloud('sledruninfopopup_' + feature.attributes.wiki,
 190                         feature.geometry.getBounds().getCenterLonLat(),
 191                         null,
 192                         popup_text,
 193                         null, true, function(event) {
 194                                 // onPopupClose
 195                                 selectFeatureControl.unselectAll();
 196                         });
 197                         feature.popup = popup;
 198                         map.addPopup(popup);
 199                 },
 200                 onUnselect: function(feature) {
 201                         if (feature.popup === null) return;
 202
 203                         // Close popup
 204                         map.removePopup(feature.popup);
 205                         feature.popup.destroy();
 206                         feature.popup = null;
 207                 }
 208         }));
 209 }
 210
 211
 212 function init_wrmaps() {
 213         var jq_maps = $('.wrmap'); // all wrmap <div> elements
 214         jq_maps.each(init_wrmap);
 215 }
 216
 217
 218 $(document).ready(init_wrmaps);
 219