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    return map;
  85 }
  86
  87 function getArrowIcon() {
  88    var size = new OpenLayers.Size(25, 22);
  89    var offset = new OpenLayers.Pixel(-22, -20);
  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(proj(position), icon);
  97
  98    markers.addMarker(marker);
  99
 100    if (description) {
 101        marker.events.register("mouseover", marker, function() {
 102            openMapPopup(marker, description);
 103        });
 104    }
 105
 106    return marker;
 107 }
 108
 109 function addObjectToMap(url, zoom, callback) {
 110    var layer = new OpenLayers.Layer.Vector("Objects", {
 111       strategies: [
 112           new OpenLayers.Strategy.Fixed()
 113       ],
 114       protocol: new OpenLayers.Protocol.HTTP({
 115           url: url,
 116           format: new OpenLayers.Format.OSM()
 117       }),
 118       style: {
 119           strokeColor: "blue",
 120           strokeWidth: 3,
 121           strokeOpacity: 0.5,
 122           fillOpacity: 0.2,
 123           fillColor: "lightblue",
 124           pointRadius: 6
 125       },
 126       projection: new OpenLayers.Projection("EPSG:4326"),
 127       displayInLayerSwitcher: false
 128    });
 129
 130    layer.events.register("loadend", layer, function() {
 131       var extent;
 132
 133       if (this.features.length) {
 134          extent = this.features[0].geometry.getBounds();
 135
 136          for (var i = 1; i < this.features.length; i++) {
 137             extent.extend(this.features[i].geometry.getBounds());
 138          }
 139
 140          if (zoom) {
 141             if (extent) {
 142                this.map.zoomToExtent(extent);
 143             } else {
 144                this.map.zoomToMaxExtent();
 145             }
 146          }
 147       }
 148
 149       if (callback) {
 150          callback(extent);
 151       }
 152    });
 153
 154    map.addLayer(layer);
 155 }
 156
 157 function addBoxToMap(boxbounds, id, outline) {
 158    if (!vectors) {
 159      // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
 160      vectors = new OpenLayers.Layer.Vector("Boxes", {
 161         displayInLayerSwitcher: false
 162      });
 163      map.addLayer(vectors);
 164    }
 165    var geometry;
 166    if (outline) {
 167      vertices = boxbounds.toGeometry().getVertices();
 168      vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
 169      geometry = proj(new OpenLayers.Geometry.LineString(vertices));
 170    } else {
 171      geometry = proj(boxbounds.toGeometry());
 172    }
 173    var box = new OpenLayers.Feature.Vector(geometry, {}, {
 174       strokeWidth: 2,
 175       strokeColor: '#ee9900',
 176       fillOpacity: 0
 177    });
 178    box.fid = id;
 179
 180    vectors.addFeatures(box);
 181
 182    return box;
 183 }
 184
 185 function openMapPopup(marker, description) {
 186    closeMapPopup();
 187
 188    popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
 189                                             description, marker.icon, true);
 190    popup.setBackgroundColor("#E3FFC5");
 191    map.addPopup(popup);
 192
 193    return popup;
 194 }
 195
 196 function closeMapPopup() {
 197    if (popup) {
 198       map.removePopup(popup);
 199       delete popup;
 200    }
 201 }
 202
 203 function removeMarkerFromMap(marker){
 204    markers.removeMarker(marker);
 205 }
 206
 207 function removeBoxFromMap(box){
 208    vectors.removeFeature(box);
 209 }
 210
 211 function proj(x) {
 212     return x.clone().transform(epsg4326, map.getProjectionObject());
 213 }
 214
 215 function unproj(x) {
 216     return x.clone().transform(map.getProjectionObject(), epsg4326);
 217 }
 218
 219 function setMapCenter(center, zoom) {
 220    zoom = parseInt(zoom, 10);
 221    var numzoom = map.getNumZoomLevels();
 222    if (zoom >= numzoom) zoom = numzoom - 1;
 223    map.setCenter(proj(center), zoom);
 224 }
 225
 226 function getEventPosition(event) {
 227    return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326);
 228 }
 229
 230 function getMapLayers() {
 231    var layerConfig = "";
 232
 233    for (var i = 0; i < map.layers.length; i++) {
 234       if (map.layers[i].layerCode && map.layers[i].getVisibility()) {
 235          layerConfig += map.layers[i].layerCode;
 236       }
 237    }
 238
 239    return layerConfig;
 240 }
 241
 242 function setMapLayers(layerConfig) {
 243    if (layerConfig.charAt(0) == "B" || layerConfig.charAt(0) == "0") {
 244       var l = 0;
 245
 246       for (var layers = map.getLayersBy("isBaseLayer", true), i = 0; i < layers.length; i++) {
 247          var c = layerConfig.charAt(l++);
 248
 249          if (c == "B") {
 250             map.setBaseLayer(layers[i]);
 251          } else {
 252             map.layers[i].setVisibility(false);
 253          }
 254       }
 255    } else {
 256       for (var i = 0; i < map.layers.length; i++) {
 257          if (map.layers[i].layerCode) {
 258             if (layerConfig.indexOf(map.layers[i].layerCode) >= 0) {
 259                if (map.layers[i].isBaseLayer) {
 260                   map.setBaseLayer(map.layers[i]);
 261                } else {
 262                   map.layers[i].setVisibility(true);
 263                }
 264             } else if (!map.layers[i].isBaseLayer) {
 265                map.layers[i].setVisibility(false);
 266             }
 267          }
 268       }
 269    }
 270 }