779145373fcc8cc2354f6625731f042a93d7a029
[philipp/winterrodeln/mediawiki_extensions/wrmap.git] / wrmap.js
1 function init_wrmap(i, jq_map) {
2         jq_map = $(jq_map);
3         var jq_sledruns = jq_map.children();
4         jq_sledruns.detach();
5         
6         // Introduce EPSG:3857 as an alias of the built in EPSG:900913 projection (both are the "Google/OSM" projections)
7         var EPSG4326 = new OpenLayers.Projection("EPSG:4326"); // lon/lat 
8         var EPSG3857 = new OpenLayers.Projection("EPSG:3857"); // google
9
10         // Create the map
11         var map = new OpenLayers.Map(jq_map.context, {
12                 projection: EPSG3857,
13                 displayProjection: EPSG4326,
14                 units: "m",
15                 theme: null
16         });
17
18         // Google Layer
19         var layer_map = new OpenLayers.Layer.Google("Google Physical", {
20                 type: google.maps.MapTypeId.TERRAIN
21         });
22
23         // // Alternative: OSM map
24         // var layer_map = new OpenLayers.Layer.OSM();
25         
26         // // Alternative: Microsoft Bing Maps
27         // var layer_map = new OpenLayers.Layer.Bing({
28         //     type: "Road",
29         //     key: "AgPH3SlIXAwajrJKf0FORQyhTqsP8KIlvtN6RKfvxe6fOB6q6-HFmg8EOFm7LSOA"});
30         
31         // Sledrun layer
32         var layer_sledruns = new OpenLayers.Layer.Vector("Rodelbahnen", {
33                 styleMap: new OpenLayers.StyleMap({
34                         "default": new OpenLayers.Style({
35                                 externalGraphic: "/vorlagen/gmap_rodelbahn_c.png",
36                                 graphicWidth: 17,
37                                 graphicHeight: 17,
38                                 graphicXOffset: -8,
39                                 graphicYOffset: -8,
40                                 graphicZIndex: 11,
41                                 backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
42                                 backgroundWidth: 23,
43                                 backgroundHeight: 23,
44                                 backgroundXOffset: -8,
45                                 backgroundYOffset: -8,
46                                 backgroundZIndex: 12,
47                                 title: "${label}"
48                         }),
49                         "highlight": new OpenLayers.Style({
50                                 label: "${label}",
51                                 labelOutlineColor: "white",
52                                 labelYOffset: 12,
53                                 fontWeight: "bold"
54                         })
55                 }),
56                 rendererOptions: {yOrdering: true}
57         });
58         jq_sledruns.each(function(j, jq_sledrun) {
59                 jq_sledrun = $(jq_sledrun);
60                 var lon = parseFloat(jq_sledrun.attr('data-lon'));
61                 var lat = parseFloat(jq_sledrun.attr('data-lat'));
62                 var point = new OpenLayers.Geometry.Point(lon, lat).transform(EPSG4326, EPSG3857);
63                 layer_sledruns.addFeatures([new OpenLayers.Feature.Vector(point, {
64                         label: jq_sledrun.attr('data-title'),
65                         url: jq_sledrun.attr('data-url')
66                 })]);
67         });
68         map.addControl(new OpenLayers.Control.SelectFeature(layer_sledruns, {
69                 hover: true,
70                 highlightOnly: true,
71                 autoActivate: true,
72                 renderIntent: "highlight"
73         }));
74         map.addControl(new OpenLayers.Control.SelectFeature(layer_sledruns, {
75                 autoActivate: true,
76                 toggle: true,
77                 onSelect: function(feature) {
78                         // Open popup
79                         var selectFeatureControl = this;
80                         var popup = new OpenLayers.Popup.FramedCloud("sledruninfopopup_" + feature.attributes['label'], 
81                         feature.geometry.getBounds().getCenterLonLat(),
82                         null,
83                         "<h2>" + feature.attributes['label'] + "</h2>\n" +
84                         "<ul>\n" + 
85                         "<li><a href=\"" + feature.attributes['url'] + "\">Details</a></li>\n" +
86                         "</ul>\n",
87                         null, true, function(event) {
88                                 // onPopupClose
89                                 selectFeatureControl.unselectAll();
90                         });
91                         feature.popup = popup;
92                         map.addPopup(popup);
93                 },
94                 onUnselect: function(feature) {
95                         // Close popup
96                         map.removePopup(feature.popup);
97                         feature.popup.destroy();
98                         feature.popup = null;
99                 }
100         }));
101
102
103         // Center map
104         map.addLayers([layer_map, layer_sledruns]);
105         var lon = parseFloat(jq_map.attr('data-center-lon'));
106         var lat = parseFloat(jq_map.attr('data-center-lat'));
107         var zoom = parseInt(jq_map.attr('data-zoom'));
108         map.setCenter(new OpenLayers.LonLat(lon, lat).transform(EPSG4326, map.getProjectionObject()), zoom);
109
110 }
111
112
113 function init_wrmaps() {
114         var jq_maps = $('.wrmap'); // all wrmap <div> elements
115         jq_maps.each(init_wrmap);
116 }
117
118
119 $(document).ready(init_wrmaps);
120