wrmap.js

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