14c8a5ec55bc3dad2efa79b54c4a6d7233dd24c2
[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         // extract, tranform and split features to layers
12         var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat 
13         var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
14         var format_json = new OpenLayers.Format.GeoJSON();
15         var features_all = format_json.read(json_string);
16         var features_path = new Array();
17         var features_point = new Array();
18         var features_sledrun = new Array();
19         for (var i = 0; i != features_all.length; ++i) {
20                 var feature = features_all[i];
21                 feature.geometry.transform(EPSG4326, EPSG3857);
22                 if (feature.geometry.CLASS_NAME == 'OpenLayers.Geometry.Point') {
23                         if (feature.attributes.type == 'sledrun') {
24                                 if (feature.attributes.condition === undefined) feature.attributes.condition = 0;
25                                 features_sledrun.push(feature);
26                         } else features_point.push(feature);
27                 } else features_path.push(feature);
28         }
29
30
31         // background layer
32         // ----------------
33         var layer_map = new OpenLayers.Layer.Google("Google Physical", {
34                 type: google.maps.MapTypeId.TERRAIN
35         });
36
37         // // Alternative: OSM map
38         // var layer_map = new OpenLayers.Layer.OSM();
39         
40         // // Alternative: Microsoft Bing Maps
41         // var layer_map = new OpenLayers.Layer.Bing({
42         //     type: "Road",
43         //     key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA"});
44
45         
46         // path layer
47         // ----------
48         var layer_path = new OpenLayers.Layer.Vector("Path", {
49                 styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
50                                 strokeColor: '${getStrokeColor}',
51                                 strokeWidth: '${getStrokeWidth}'
52                         }, {
53                                 context: {
54                                         getStrokeColor: function(feature) {
55                                                 if (feature.attributes.strokeColor !== undefined) return feature.attributes.strokeColor;
56                                                 if (feature.attributes.type == 'sledrun') return '#014e9a';
57                                                 if (feature.attributes.type == 'walk') return '#e98401';
58                                                 if (feature.attributes.type == 'alternative') return '#7f7fff';
59                                                 if (feature.attributes.type == 'lift') return '#000000';
60                                                 return '#ee9900';
61                                         },
62                                         getStrokeWidth: function(feature) {
63                                                 if (feature.attributes.strokeWidth !== undefined) return feature.attributes.strokeWidth;
64                                                 if (feature.attributes.type == 'lift') return 3;
65                                                 return 6;
66                                         }
67                                 }
68                         }))
69         });
70
71         
72         // point layer
73         // -----------
74         var POINT_NAME = {'inn': 'Gasthaus', 'busstop': 'Haltestelle', 'carpark': 'Parkplatz', 'attention': 'Achtung', 'point': 'Punkt'};
75         var layer_point = new OpenLayers.Layer.Vector("Point", {
76                 styleMap: new OpenLayers.StyleMap(new OpenLayers.Style({
77                                 externalGraphic: '/vorlagen/${getExternalGraphic}',
78                                 graphicWidth: 20,
79                                 graphicHeight: 34,
80                                 graphicXOffset: -10,
81                                 graphicYOffset: -33,
82                                 title: '${getTitle}'
83                         }, {
84                                 context: {
85                                         getExternalGraphic: function(feature) {
86                                                 if (feature.attributes.type == 'point') return 'gmap.png';
87                                                 var name = POINT_NAME[feature.attributes.type];
88                                                 if (name !== undefined) return 'gmap' + name + '.png';
89                                                 return 'gmap.png'; // should not happen
90                                         },
91                                         getTitle: function(feature) {
92                                                 var title = '';
93                                                 if (feature.attributes.type != 'point') {
94                                                         title = POINT_NAME[feature.attributes.type];
95                                                         if (feature.attributes.name !== undefined) title += ': ';
96                                                 }
97                                                 if (feature.attributes.name !== undefined) title += feature.attributes.name;
98                                                 return title;
99                                         }
100                                 }
101                         })),
102                 rendererOptions: {yOrdering: true}
103         });
104
105
106         // sledrun layer
107         // ------------
108         var layer_sledrun = new OpenLayers.Layer.Vector("Sledrun", { 
109                 styleMap: new OpenLayers.StyleMap({
110                         "default": new OpenLayers.Style({
111                                 externalGraphic: "/vorlagen/bahnzustand${condition}_0.png",
112                                 graphicWidth: 17,
113                                 graphicHeight: 17,
114                                 graphicXOffset: -8,
115                                 graphicYOffset: -8,
116                                 graphicZIndex: 12,
117                                 backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
118                                 backgroundWidth: 23,
119                                 backgroundHeight: 23,
120                                 backgroundXOffset: -8,
121                                 backgroundYOffset: -8,
122                                 backgroundGraphicZIndex: 11,
123                                 title: "${name}"
124                         }),
125                         "highlight": new OpenLayers.Style({
126                                 label: "${name}",
127                                 labelOutlineColor: "white",
128                                 labelYOffset: 12,
129                                 fontWeight: "bold"
130                         }) 
131                 }),
132                 rendererOptions: {yOrdering: true}
133         });
134
135
136         // map itself
137         // ----------
138         var lon = parseFloat(jq_map.attr('data-center-lon'));
139         var lat = parseFloat(jq_map.attr('data-center-lat'));
140         var zoom = parseInt(jq_map.attr('data-zoom'));
141         var map = new OpenLayers.Map(jq_map.context, {
142                 projection: EPSG3857,
143                 displayProjection: EPSG4326,
144                 units: "m",
145                 theme: null,
146                 layers: [layer_map, layer_path, layer_point, layer_sledrun],
147                 center: new OpenLayers.LonLat(lon, lat).transform(EPSG4326, EPSG3857),
148                 zoom: zoom
149         });
150         
151
152         // add features
153         // if this would be done before the layer is added to the map, the features are not added
154         layer_path.addFeatures(features_path); 
155         layer_point.addFeatures(features_point); 
156         layer_sledrun.addFeatures(features_sledrun); 
157
158         // disable mouse wheel zoom
159         var navigation_control = map.getControlsByClass('OpenLayers.Control.Navigation')[0];
160         navigation_control.disableZoomWheel();
161
162         // layer switcher
163         // map.addControl(new OpenLayers.Control.LayerSwitcher());
164
165         // print sledrun name when mouse moves over it
166         map.addControl(new OpenLayers.Control.SelectFeature(layer_sledrun, {
167                 hover: true,
168                 highlightOnly: true,
169                 autoActivate: true,
170                 renderIntent: "highlight"
171         }));
172
173         // show popup when user clicks on a sledrun icon
174         map.addControl(new OpenLayers.Control.SelectFeature(layer_sledrun, {
175                 autoActivate: true,
176                 toggle: true,
177                 onSelect: function(feature) {
178                         // Open popup
179                         var popup_text = "<h2>" + feature.attributes.name + '</h2>\n' +
180                         '<ul>\n' +
181                         '<li><a href="' + feature.attributes.wiki + '">Details zur Rodelbahn</a></li>\n' + 
182                         '<li>Rodelbahnzustand<br/>';
183                         if (feature.attributes.date_report !== undefined) {
184                                 var condition_text = {1: 'Sehr gut', 2: 'Gut', 3: 'Mittelm&auml;&szlig;ig', 4: 'Schlecht', 5: 'Geht nicht'};
185                                 var year_month_day = feature.attributes.date_report.split('-');
186                                 popup_text += '<a href="' + feature.attributes.wiki + '#Eintr.C3.A4ge">' + condition_text[feature.attributes.condition] + '</a> ' + 
187                                 '<small>' + year_month_day[2] + '.' + year_month_day[1] + '.</small> ' +
188                                 '<em><a href="' + feature.attributes.wiki + '#Eintragen">Neu</a></em>';
189                         } else {
190                                 popup_text += '<em><a href="' + feature.attributes.wiki + '#Eintragen">Bitte eintragen</a></em>';
191                         }
192                         popup_text += '</li>\n</ul>\n';
193                         var selectFeatureControl = this;
194                         var popup = new OpenLayers.Popup.FramedCloud('sledruninfopopup_' + feature.attributes.wiki, 
195                         feature.geometry.getBounds().getCenterLonLat(),
196                         null,
197                         popup_text,
198                         null, true, function(event) {
199                                 // onPopupClose
200                                 selectFeatureControl.unselectAll();
201                         });
202                         feature.popup = popup;
203                         map.addPopup(popup);
204                 },
205                 onUnselect: function(feature) {
206                         // Close popup
207                         map.removePopup(feature.popup);
208                         feature.popup.destroy();
209                         feature.popup = null;
210                 }
211         }));
212 }
213
214
215 function init_wrmaps() {
216         var jq_maps = $('.wrmap'); // all wrmap <div> elements
217         jq_maps.each(init_wrmap);
218 }
219
220
221 $(document).ready(init_wrmaps);
222