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 SimpleLayerSwitcher(),
  15          new OpenLayers.Control.Navigation(),
  16          new OpenLayers.Control.Zoom(),
  17          new OpenLayers.Control.SimplePanZoom(),
  18          new OpenLayers.Control.ScaleLine({geodesic: true})
  19       ],
  20       numZoomLevels: 20,
  21       displayProjection: new OpenLayers.Projection("EPSG:4326"),
  22       theme: "<%= asset_path 'theme/openstreetmap/style.css' %>"
  23    });
  24
  25    var mapnik = new OpenLayers.Layer.OSM.Mapnik(I18n.t("javascripts.map.base.standard"), {
  26       attribution: "",
  27       keyid: "mapnik",
  28       displayOutsideMaxExtent: true,
  29       wrapDateLine: true,
  30       layerCode: "M"
  31    });
  32    map.addLayer(mapnik);
  33
  34    var cyclemap = new OpenLayers.Layer.OSM.CycleMap(I18n.t("javascripts.map.base.cycle_map"), {
  35       attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  36       keyid: "cyclemap",
  37       displayOutsideMaxExtent: true,
  38       wrapDateLine: true,
  39       layerCode: "C"
  40    });
  41    map.addLayer(cyclemap);
  42
  43    var transportmap = new OpenLayers.Layer.OSM.TransportMap(I18n.t("javascripts.map.base.transport_map"), {
  44       attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
  45       keyid: "transportmap",
  46       displayOutsideMaxExtent: true,
  47       wrapDateLine: true,
  48       layerCode: "T"
  49    });
  50    map.addLayer(transportmap);
  51
  52    var mapquest = new OpenLayers.Layer.OSM(I18n.t("javascripts.map.base.mapquest"), [
  53       "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  54       "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  55       "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
  56       "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
  57    ], {
  58       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'>",
  59       keyid: "mapquest",
  60       displayOutsideMaxExtent: true,
  61       wrapDateLine: true,
  62       numZoomLevels: 19,
  63       layerCode: "Q"
  64    });
  65    map.addLayer(mapquest);
  66
  67    markers = new OpenLayers.Layer.Markers("Markers", {
  68       displayInLayerSwitcher: false,
  69       numZoomLevels: 20,
  70       projection: "EPSG:900913"
  71    });
  72    map.addLayer(markers);
  73
  74    map.dataLayer = new OpenLayers.Layer(I18n.t('browse.start_rjs.data_layer_name'), {
  75      visibility: false,
  76      displayInLayerSwitcher: false
  77    });
  78    map.addLayer(map.dataLayer);
  79
  80    $("#" + divName).on("resized", function () {
  81      map.updateSize();
  82    });
  83
  84    $("#" + divName).trigger("initialised");
  85
  86    return map;
  87 }
  88
  89 function getArrowIcon() {
  90    var size = new OpenLayers.Size(25, 22);
  91    var offset = new OpenLayers.Pixel(-22, -20);
  92    var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset);
  93
  94    return icon;
  95 }
  96
  97 function addMarkerToMap(position, icon, description) {
  98    var marker = new OpenLayers.Marker(proj(position), icon);
  99
 100    markers.addMarker(marker);
 101
 102    if (description) {
 103        marker.events.register("mouseover", marker, function() {
 104            openMapPopup(marker, description);
 105        });
 106    }
 107
 108    return marker;
 109 }
 110
 111 function addObjectToMap(object, zoom, callback) {
 112    var layer = new OpenLayers.Layer.Vector("Objects", {
 113       strategies: [
 114           new OpenLayers.Strategy.Fixed()
 115       ],
 116       protocol: new OpenLayers.Protocol.HTTP({
 117           url: OSM.apiUrl(object),
 118           format: new OpenLayers.Format.OSM()
 119       }),
 120       style: {
 121           strokeColor: "blue",
 122           strokeWidth: 3,
 123           strokeOpacity: 0.5,
 124           fillOpacity: 0.2,
 125           fillColor: "lightblue",
 126           pointRadius: 6
 127       },
 128       projection: new OpenLayers.Projection("EPSG:4326"),
 129       displayInLayerSwitcher: false
 130    });
 131
 132    layer.events.register("loadend", layer, function() {
 133       var extent;
 134
 135       if (this.features.length) {
 136          extent = this.features[0].geometry.getBounds();
 137
 138          for (var i = 1; i < this.features.length; i++) {
 139             extent.extend(this.features[i].geometry.getBounds());
 140          }
 141
 142          if (zoom) {
 143             if (extent) {
 144                this.map.zoomToExtent(extent);
 145             } else {
 146                this.map.zoomToMaxExtent();
 147             }
 148          }
 149       }
 150
 151       if (callback) {
 152          callback(extent);
 153       }
 154    });
 155
 156    map.addLayer(layer);
 157 }
 158
 159 function addBoxToMap(boxbounds, id, outline) {
 160    if (!vectors) {
 161      // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
 162      vectors = new OpenLayers.Layer.Vector("Boxes", {
 163         displayInLayerSwitcher: false
 164      });
 165      map.addLayer(vectors);
 166    }
 167    var geometry;
 168    if (outline) {
 169      vertices = boxbounds.toGeometry().getVertices();
 170      vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
 171      geometry = proj(new OpenLayers.Geometry.LineString(vertices));
 172    } else {
 173      geometry = proj(boxbounds.toGeometry());
 174    }
 175    var box = new OpenLayers.Feature.Vector(geometry, {}, {
 176       strokeWidth: 2,
 177       strokeColor: '#ee9900',
 178       fillOpacity: 0
 179    });
 180    box.fid = id;
 181
 182    vectors.addFeatures(box);
 183
 184    return box;
 185 }
 186
 187 function openMapPopup(marker, description) {
 188    closeMapPopup();
 189
 190    popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
 191                                             description, marker.icon, true);
 192    popup.setBackgroundColor("#E3FFC5");
 193    map.addPopup(popup);
 194
 195    return popup;
 196 }
 197
 198 function closeMapPopup() {
 199    if (popup) {
 200       map.removePopup(popup);
 201    }
 202 }
 203
 204 function removeMarkerFromMap(marker){
 205    markers.removeMarker(marker);
 206 }
 207
 208 function proj(x) {
 209     return x.clone().transform(epsg4326, map.getProjectionObject());
 210 }
 211
 212 function unproj(x) {
 213     return x.clone().transform(map.getProjectionObject(), epsg4326);
 214 }
 215
 216 function setMapCenter(center, zoom) {
 217    zoom = parseInt(zoom, 10);
 218    var numzoom = map.getNumZoomLevels();
 219    if (zoom >= numzoom) zoom = numzoom - 1;
 220    map.setCenter(proj(center), zoom);
 221 }
 222
 223 function getEventPosition(event) {
 224    return unproj(map.getLonLatFromViewPortPx(event.xy));
 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 }