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