7d279523a832114dbb0baa9110f6d20d0c94fd7b
[philipp/winterrodeln/mediawiki_extensions/wrmap.git] / 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: 12,
44                                 backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
45                                 backgroundWidth: 23,
46                                 backgroundHeight: 23,
47                                 backgroundXOffset: -8,
48                                 backgroundYOffset: -8,
49                                 backgroundGraphicZIndex: 11,
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