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