701780efcd5c2040a8e9a2f0f4eaaa6fc1db4081
[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         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