app/assets/javascripts/map.js.erb

   1 var epsg4326 = new OpenLayers.Projection("EPSG:4326");
   2 var map;
   3 var markers;
   4 var vectors;
   5 var popup;
   6
   7 function createMap(divName, options) {
   8    options = options || {};
   9
  10    map = new OpenLayers.Map(divName, {
  11       controls: options.controls || [
  12          new OpenLayers.Control.ArgParser(),
  13          new OpenLayers.Control.Attribution(),
  14          new OpenLayers.Control.LayerSwitcher(),
  15          new OpenLayers.Control.Navigation(),
  16          new OpenLayers.Control.PanZoom(),
  17          new OpenLayers.Control.PanZoomBar(),
  18          new OpenLayers.Control.ScaleLine({geodesic: true})
  19       ],
  20       units: "m",
  21       maxResolution: 156543.0339,
  22       numZoomLevels: 20,
  23       displayProjection: new OpenLayers.Projection("EPSG:4326"),
  24       theme: "<%= asset_path 'theme/default/style.css' %>"
  25    });
  26
  27    var mapnik = new OpenLayers.Layer.OSM.Mapnik(i18n("javascripts.map.base.mapnik"), {
  28       attribution: "",
  29       keyid: "mapnik",
  30       displayOutsideMaxExtent: true,
  31       wrapDateLine: true,
  32       layerCode: "M"
  33    });
  34    map.addLayer(mapnik);
  35
  36    var cyclemap = new OpenLayers.Layer.OSM.CycleMap(i18n("javascripts.map.base.cycle_map"), {
  37       attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  38       keyid: "cyclemap",
  39       displayOutsideMaxExtent: true,
  40       wrapDateLine: true,
  41       layerCode: "C"
  42    });
  43    map.addLayer(cyclemap);
  44
  45    var transportmap = new OpenLayers.Layer.OSM.TransportMap(i18n("javascripts.map.base.transport_map"), {
  46       attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  47       keyid: "transportmap",
  48       displayOutsideMaxExtent: true,
  49       wrapDateLine: true,
  50       layerCode: "T"
  51    });
  52    map.addLayer(transportmap);
  53
  54    var mapquest = new OpenLayers.Layer.OSM(i18n("javascripts.map.base.mapquest"), [
  55       "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  56       "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  57       "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  58       "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
  59    ], {
  60       attribution: "Tiles courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'>",
  61       keyid: "mapquest",
  62       displayOutsideMaxExtent: true,
  63       wrapDateLine: true,
  64       numZoomLevels: 19,
  65       layerCode: "Q"
  66    });
  67    map.addLayer(mapquest);
  68
  69    markers = new OpenLayers.Layer.Markers("Markers", {
  70       displayInLayerSwitcher: false,
  71       numZoomLevels: 20,
  72       maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
  73       maxResolution: 156543,
  74       units: "m",
  75       projection: "EPSG:900913"
  76    });
  77    map.addLayer(markers);
  78
  79    return map;
  80 }
  81
  82 function getArrowIcon() {
  83    var size = new OpenLayers.Size(25, 22);
  84    var offset = new OpenLayers.Pixel(-30, -27);
  85    var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset);
  86
  87    return icon;
  88 }
  89
  90 function addMarkerToMap(position, icon, description) {
  91    var marker = new OpenLayers.Marker(position.clone().transform(epsg4326, map.getProjectionObject()), icon);
  92
  93    markers.addMarker(marker);
  94
  95    if (description) {
  96       marker.events.register("mouseover", marker, function() { openMapPopup(marker, description) });
  97    }
  98
  99    return marker;
 100 }
 101
 102 function addObjectToMap(url, zoom, callback) {
 103    var layer = new OpenLayers.Layer.GML("Objects", url, {
 104       format: OpenLayers.Format.OSM,
 105       style: {
 106           strokeColor: "blue",
 107           strokeWidth: 3,
 108           strokeOpacity: 0.5,
 109           fillOpacity: 0.2,
 110           fillColor: "lightblue",
 111           pointRadius: 6
 112       },
 113       projection: new OpenLayers.Projection("EPSG:4326"),
 114       displayInLayerSwitcher: false
 115    });
 116
 117    layer.events.register("loadend", layer, function() {
 118       var extent;
 119
 120       if (this.features.length) {
 121          extent = this.features[0].geometry.getBounds();
 122
 123          for (var i = 1; i < this.features.length; i++) {
 124             extent.extend(this.features[i].geometry.getBounds());
 125          }
 126
 127          if (zoom) {
 128             if (extent) {
 129                this.map.zoomToExtent(extent);
 130             } else {
 131                this.map.zoomToMaxExtent();
 132             }
 133          }
 134       }
 135
 136       if (callback) {
 137          callback(extent);
 138       }
 139    });
 140
 141    map.addLayer(layer);
 142
 143    layer.loadGML();
 144 }
 145
 146 function addBoxToMap(boxbounds, id, outline) {
 147    if (!vectors) {
 148      // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
 149      vectors = new OpenLayers.Layer.Vector("Boxes", {
 150         displayInLayerSwitcher: false
 151      });
 152      map.addLayer(vectors);
 153    }
 154    var geometry;
 155    if (outline) {
 156      vertices = boxbounds.toGeometry().getVertices();
 157      vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
 158      geometry = new OpenLayers.Geometry.LineString(vertices).transform(epsg4326, map.getProjectionObject());
 159    } else {
 160      geometry = boxbounds.toGeometry().transform(epsg4326, map.getProjectionObject());
 161    }
 162    var box = new OpenLayers.Feature.Vector(geometry, {}, {
 163       strokeWidth: 2,
 164       strokeColor: '#ee9900',
 165       fillOpacity: 0
 166    });
 167    box.fid = id;
 168
 169    vectors.addFeatures(box);
 170
 171    return box;
 172 }
 173
 174 function openMapPopup(marker, description) {
 175    closeMapPopup();
 176
 177    popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
 178                                             description, marker.icon, true);
 179    popup.setBackgroundColor("#E3FFC5");
 180    map.addPopup(popup);
 181
 182    return popup;
 183 }
 184
 185 function closeMapPopup() {
 186    if (popup) {
 187       map.removePopup(popup);
 188       delete popup;
 189    }
 190 }
 191
 192 function removeMarkerFromMap(marker){
 193    markers.removeMarker(marker);
 194 }
 195
 196 function removeBoxFromMap(box){
 197    vectors.removeFeature(box);
 198 }
 199
 200 function getMapCenter() {
 201    return map.getCenter().clone().transform(map.getProjectionObject(), epsg4326);
 202 }
 203
 204 function setMapCenter(center, zoom) {
 205    zoom = parseInt(zoom);
 206    var numzoom = map.getNumZoomLevels();
 207    if (zoom >= numzoom) zoom = numzoom - 1;
 208    map.setCenter(center.clone().transform(epsg4326, map.getProjectionObject()), zoom);
 209 }
 210
 211 function setMapExtent(extent) {
 212    map.zoomToExtent(extent.clone().transform(epsg4326, map.getProjectionObject()));
 213 }
 214
 215 function getMapExtent() {
 216    return map.getExtent().clone().transform(map.getProjectionObject(), epsg4326);
 217 }
 218
 219 function getMapZoom() {
 220    return map.getZoom();
 221 }
 222
 223 function getEventPosition(event) {
 224    return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326);
 225 }
 226
 227 function getMapLayers() {
 228    var layerConfig = "";
 229
 230    for (var i = 0; i < map.layers.length; i++) {
 231       if (map.layers[i].layerCode && map.layers[i].getVisibility()) {
 232          layerConfig += map.layers[i].layerCode;
 233       }
 234    }
 235
 236    return layerConfig;
 237 }
 238
 239 function setMapLayers(layerConfig) {
 240    if (layerConfig.charAt(0) == "B" || layerConfig.charAt(0) == "0") {
 241       var l = 0;
 242
 243       for (var layers = map.getLayersBy("isBaseLayer", true), i = 0; i < layers.length; i++) {
 244          var c = layerConfig.charAt(l++);
 245
 246          if (c == "B") {
 247             map.setBaseLayer(layers[i]);
 248          } else {
 249             map.layers[i].setVisibility(false);
 250          }
 251       }
 252    } else {
 253       for (var i = 0; i < map.layers.length; i++) {
 254          if (map.layers[i].layerCode) {
 255             if (layerConfig.indexOf(map.layers[i].layerCode) >= 0) {
 256                if (map.layers[i].isBaseLayer) {
 257                   map.setBaseLayer(map.layers[i]);
 258                } else {
 259                   map.layers[i].setVisibility(true);
 260                }
 261             } else if (!map.layers[i].isBaseLayer) {
 262                map.layers[i].setVisibility(false);
 263             }
 264          }
 265       }
 266    }
 267 }
 268
 269 function scaleToZoom(scale) {
 270    return Math.log(360.0/(scale * 512.0)) / Math.log(2.0);
 271 }