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     //     maxExtent: new OpenLayers.Bounds(1050000, 5880000, 1850000, 6090000)});
  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: 0,
  40                                 graphicYOffset: 0,
  41                                 graphicZIndex: 11,
  42                                 backgroundGraphic: "/vorlagen/gmap_rodelbahn_c_s.png",
  43                                 backgroundWidth: 23,
  44                                 backgroundHeight: 23,
  45                                 backgroundXOffset: 0,
  46                                 backgroundYOffset: 0,
  47                                 backgroundZIndex: 12,
  48                                 title: "${label}"
  49                         }),
  50                         "highlight": new OpenLayers.Style({
  51                                 label: "${label}"
  52                         })
  53
  54                 }),
  55                 rendererOptions: {yOrdering: true}
  56         });
  57         jq_sledruns.each(function(j, jq_sledrun) {
  58                 jq_sledrun = $(jq_sledrun);
  59                 var lon = parseFloat(jq_sledrun.attr('data-lon'));
  60                 var lat = parseFloat(jq_sledrun.attr('data-lat'));
  61                 var point = new OpenLayers.Geometry.Point(lon, lat).transform(EPSG4326, EPSG3857);
  62                 layer_sledruns.addFeatures([new OpenLayers.Feature.Vector(point, {label: jq_sledrun.attr('data-title')})]);
  63         });
  64
  65         // Center map
  66         map.addLayers([layer_map, layer_sledruns]);
  67         var lon = parseFloat(jq_map.attr('data-center-lon'));
  68         var lat = parseFloat(jq_map.attr('data-center-lat'));
  69         var zoom = parseInt(jq_map.attr('data-zoom'));
  70         map.setCenter(new OpenLayers.LonLat(lon, lat).transform(EPSG4326, map.getProjectionObject()), zoom);
  71
  72 }
  73
  74
  75 function init_wrmaps() {
  76         var jq_maps = $('.wrmap'); // all wrmap <div> elements
  77         jq_maps.each(init_wrmap);
  78 }
  79
  80
  81 $(document).ready(init_wrmaps);
  82