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                 })]);
  68         });
  69
  70         // disable mouse wheel zoom
  71         var navigation_control = map.getControlsByClass('OpenLayers.Control.Navigation')[0];
  72         navigation_control.disableZoomWheel();
  73
  74         // print sledrun name when mouse moves over it
  75         map.addControl(new OpenLayers.Control.SelectFeature(layer_sledruns, {
  76                 hover: true,
  77                 highlightOnly: true,
  78                 autoActivate: true,
  79                 renderIntent: "highlight"
  80         }));
  81
  82         // show popup when user clicks on a sledrun icon
  83         map.addControl(new OpenLayers.Control.SelectFeature(layer_sledruns, {
  84                 autoActivate: true,
  85                 toggle: true,
  86                 onSelect: function(feature) {
  87                         // Open popup
  88                         var selectFeatureControl = this;
  89                         var popup = new OpenLayers.Popup.FramedCloud("sledruninfopopup_" + feature.attributes['label'],
  90                         feature.geometry.getBounds().getCenterLonLat(),
  91                         null,
  92                         "<h2>" + feature.attributes['label'] + "</h2>\n" +
  93                         "<ul>\n" +
  94                         "<li><a href=\"" + feature.attributes['url'] + "\">Details</a></li>\n" +
  95                         "</ul>\n",
  96                         null, true, function(event) {
  97                                 // onPopupClose
  98                                 selectFeatureControl.unselectAll();
  99                         });
 100                         feature.popup = popup;
 101                         map.addPopup(popup);
 102                 },
 103                 onUnselect: function(feature) {
 104                         // Close popup
 105                         map.removePopup(feature.popup);
 106                         feature.popup.destroy();
 107                         feature.popup = null;
 108                 }
 109         }));
 110
 111
 112         // Center map
 113         map.addLayers([layer_map, layer_sledruns]);
 114         var lon = parseFloat(jq_map.attr('data-center-lon'));
 115         var lat = parseFloat(jq_map.attr('data-center-lat'));
 116         var zoom = parseInt(jq_map.attr('data-zoom'));
 117         map.setCenter(new OpenLayers.LonLat(lon, lat).transform(EPSG4326, map.getProjectionObject()), zoom);
 118
 119 }
 120
 121
 122 function init_wrmaps() {
 123         var jq_maps = $('.wrmap'); // all wrmap <div> elements
 124         jq_maps.each(init_wrmap);
 125 }
 126
 127
 128 $(document).ready(init_wrmaps);
 129