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         // Introduce EPSG:3857 as an alias of the built in EPSG:900913 projection (both are the "Google/OSM" projections)
  12         var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat
  13         var EPSG3857 = new OpenLayers.Projection("EPSG:900913"); // google
  14
  15
  16         // Google Layer
  17         var layer_map = new OpenLayers.Layer.Google("Google Physical", {
  18                 type: google.maps.MapTypeId.TERRAIN
  19         });
  20
  21         // // Alternative: OSM map
  22         // var layer_map = new OpenLayers.Layer.OSM();
  23
  24         // // Alternative: Microsoft Bing Maps
  25         // var layer_map = new OpenLayers.Layer.Bing({
  26         //     type: "Road",
  27         //     key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA"});
  28
  29
  30         // GeoJSON
  31         var layer_json = new OpenLayers.Layer.Vector("Overlay", {
  32         });
  33         /*
  34         var layer_json = new OpenLayers.Layer.Vector("Overlay", {
  35                 styleMap: new OpenLayers.StyleMap({
  36                         "default": new OpenLayers.Style({
  37                                 externalGraphic: "/vorlagen/bahnzustand${condition}_0.png",
  38                                 graphicWidth: 17,
  39                                 graphicHeight: 17,
  40                                 graphicXOffset: -8,
  41                                 graphicYOffset: -8,
  42                                 graphicZIndex: 12,
  43                                 backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
  44                                 backgroundWidth: 23,
  45                                 backgroundHeight: 23,
  46                                 backgroundXOffset: -8,
  47                                 backgroundYOffset: -8,
  48                                 backgroundGraphicZIndex: 11,
  49                                 title: "${label}"
  50                         }),
  51                         "highlight": new OpenLayers.Style({
  52                                 label: "${label}",
  53                                 labelOutlineColor: "white",
  54                                 labelYOffset: 12,
  55                                 fontWeight: "bold"
  56                         })
  57                 }),
  58                 rendererOptions: {yOrdering: true}
  59         });
  60         */
  61
  62         // Sledrun layer
  63         /*
  64         jq_sledruns.each(function(j, jq_sledrun) {
  65                 jq_sledrun = $(jq_sledrun);
  66                 var lon = parseFloat(jq_sledrun.attr('data-lon'));
  67                 var lat = parseFloat(jq_sledrun.attr('data-lat'));
  68                 var point = new OpenLayers.Geometry.Point(lon, lat).transform(EPSG4326, EPSG3857);
  69                 layer_sledruns.addFeatures([new OpenLayers.Feature.Vector(point, {
  70                         label: jq_sledrun.attr('data-title'),
  71                         url: jq_sledrun.attr('data-url'),
  72                         has_report: jq_sledrun.attr('data-date_report') !== undefined,
  73                         date_report: jq_sledrun.attr('data-date_report') === undefined ? null : jq_sledrun.attr('data-date_report'),
  74                         condition: jq_sledrun.attr('data-condition') === undefined ? '0' : jq_sledrun.attr('data-condition')
  75                 })]);
  76         });
  77         */
  78
  79         // Create the map
  80         var lon = parseFloat(jq_map.attr('data-center-lon'));
  81         var lat = parseFloat(jq_map.attr('data-center-lat'));
  82         var zoom = parseInt(jq_map.attr('data-zoom'));
  83         var map = new OpenLayers.Map(jq_map.context, {
  84                 projection: EPSG3857,
  85                 displayProjection: EPSG4326,
  86                 units: "m",
  87                 theme: null,
  88                 layers: [layer_map, layer_json],
  89                 center: new OpenLayers.LonLat(lon, lat).transform(EPSG4326, EPSG3857),
  90                 zoom: zoom
  91         });
  92
  93
  94         // tranform feature coordinates and add features
  95         var format_json = new OpenLayers.Format.GeoJSON();
  96         var feature_collection = format_json.read(json_string);
  97         for (var i=0, len=feature_collection.length; i!=len; ++i) {
  98                 feature_collection[i].geometry.transform(EPSG4326, EPSG3857);
  99         }
 100         layer_json.addFeatures(feature_collection); // if this would be done before the layer is added to the map, the features are not added
 101
 102         // disable mouse wheel zoom
 103         var navigation_control = map.getControlsByClass('OpenLayers.Control.Navigation')[0];
 104         navigation_control.disableZoomWheel();
 105
 106         // print sledrun name when mouse moves over it
 107         /*
 108         map.addControl(new OpenLayers.Control.SelectFeature(layer_json, {
 109                 hover: true,
 110                 highlightOnly: true,
 111                 autoActivate: true,
 112                 renderIntent: "highlight"
 113         }));
 114         */
 115
 116         // show popup when user clicks on a sledrun icon
 117         /*
 118         map.addControl(new OpenLayers.Control.SelectFeature(layer_json, {
 119                 autoActivate: true,
 120                 toggle: true,
 121                 onSelect: function(feature) {
 122                         // Open popup
 123                         var popup_text = "<h2>" + feature.attributes['label'] + '</h2>\n' +
 124                         '<ul>\n' +
 125                         '<li><a href="' + feature.attributes['url'] + '">Details zur Rodelbahn</a></li>\n' +
 126                         '<li>Rodelbahnzustand<br/>';
 127                         if (feature.attributes['has_report']) {
 128                                 var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelm&auml;&szlig;ig', 4: 'Schlecht', 5: 'Geht nicht'};
 129                                 var year_month_day = feature.attributes['date_report'].split('-');
 130                                 popup_text += '<a href="' + feature.attributes['url'] + '#Eintr.C3.A4ge">' + condition_text[feature.attributes['condition']] + '</a> ' +
 131                                 '<small>' + year_month_day[2] + '.' + year_month_day[1] + '.</small> ' +
 132                                 '<em><a href="' + feature.attributes['url'] + '#Eintragen">Neu</a></em>';
 133                         } else {
 134                                 popup_text += '<em><a href="' + feature.attributes['url'] + '#Eintragen">Bitte eintragen</a></em>';
 135                         }
 136                         popup_text += '</li>\n</ul>\n';
 137                         var selectFeatureControl = this;
 138                         var popup = new OpenLayers.Popup.FramedCloud('sledruninfopopup_' + feature.attributes['label'],
 139                         feature.geometry.getBounds().getCenterLonLat(),
 140                         null,
 141                         popup_text,
 142                         null, true, function(event) {
 143                                 // onPopupClose
 144                                 selectFeatureControl.unselectAll();
 145                         });
 146                         feature.popup = popup;
 147                         map.addPopup(popup);
 148                 },
 149                 onUnselect: function(feature) {
 150                         // Close popup
 151                         map.removePopup(feature.popup);
 152                         feature.popup.destroy();
 153                         feature.popup = null;
 154                 }
 155         }));
 156         */
 157
 158
 159 }
 160
 161
 162 function init_wrmaps() {
 163         var jq_maps = $('.wrmap'); // all wrmap <div> elements
 164         jq_maps.each(init_wrmap);
 165 }
 166
 167
 168 $(document).ready(init_wrmaps);
 169