openstreetmap-website/app/assets/javascripts/map.js.erb

var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var map;
var markers;
var vectors;
var popup;

function createMap(divName, options) {
   options = options || {};

   map = new OpenLayers.Map(divName, {
      controls: options.controls || [
         new OpenLayers.Control.ArgParser(),
         new OpenLayers.Control.Attribution(),
         new SimpleLayerSwitcher(),
         new OpenLayers.Control.Navigation(),
         new OpenLayers.Control.Zoom(),
         new OpenLayers.Control.SimplePanZoom(),
         new OpenLayers.Control.ScaleLine({geodesic: true})
      ],
      numZoomLevels: 20,
      displayProjection: new OpenLayers.Projection("EPSG:4326"),
      theme: "<%= asset_path 'theme/openstreetmap/style.css' %>"
   });

   var mapnik = new OpenLayers.Layer.OSM.Mapnik(I18n.t("javascripts.map.base.standard"), {
      attribution: "",
      keyid: "mapnik",
      displayOutsideMaxExtent: true,
      wrapDateLine: true,
      layerCode: "M"
   });
   map.addLayer(mapnik);

   var cyclemap = new OpenLayers.Layer.OSM.CycleMap(I18n.t("javascripts.map.base.cycle_map"), {
      attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
      keyid: "cyclemap",
      displayOutsideMaxExtent: true,
      wrapDateLine: true,
      layerCode: "C"
   });
   map.addLayer(cyclemap);

   var transportmap = new OpenLayers.Layer.OSM.TransportMap(I18n.t("javascripts.map.base.transport_map"), {
      attribution: "Tiles courtesy of <a href='http://www.opencyclemap.org/' target='_blank'>Andy Allan</a>",
      keyid: "transportmap",
      displayOutsideMaxExtent: true,
      wrapDateLine: true,
      layerCode: "T"
   });
   map.addLayer(transportmap);

   var mapquest = new OpenLayers.Layer.OSM(I18n.t("javascripts.map.base.mapquest"), [
      "http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
      "http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
      "http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
      "http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"
   ], {
      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'>",
      keyid: "mapquest",
      displayOutsideMaxExtent: true,
      wrapDateLine: true,
      numZoomLevels: 19,
      layerCode: "Q"
   });
   map.addLayer(mapquest);

   markers = new OpenLayers.Layer.Markers("Markers", {
      displayInLayerSwitcher: false,
      numZoomLevels: 20,
      projection: "EPSG:900913"
   });
   map.addLayer(markers);

   $("#" + divName).on("resized", function () {
     map.updateSize();
   });

   return map;
}

function getArrowIcon() {
   var size = new OpenLayers.Size(25, 22);
   var offset = new OpenLayers.Pixel(-22, -20);
   var icon = new OpenLayers.Icon("<%= asset_path 'arrow.png' %>", size, offset);

   return icon;
}

function addMarkerToMap(position, icon, description) {
   var marker = new OpenLayers.Marker(proj(position), icon);

   markers.addMarker(marker);

   if (description) {
       marker.events.register("mouseover", marker, function() {
           openMapPopup(marker, description);
       });
   }

   return marker;
}

function addObjectToMap(url, zoom, callback) {
   var layer = new OpenLayers.Layer.Vector("Objects", {
      strategies: [ 
          new OpenLayers.Strategy.Fixed()
      ],
      protocol: new OpenLayers.Protocol.HTTP({
          url: url,
          format: new OpenLayers.Format.OSM()
      }),
      style: {
          strokeColor: "blue",
          strokeWidth: 3,
          strokeOpacity: 0.5,
          fillOpacity: 0.2,
          fillColor: "lightblue",
          pointRadius: 6
      },
      projection: new OpenLayers.Projection("EPSG:4326"),
      displayInLayerSwitcher: false
   });

   layer.events.register("loadend", layer, function() {
      var extent;

      if (this.features.length) {
         extent = this.features[0].geometry.getBounds();

         for (var i = 1; i < this.features.length; i++) {
            extent.extend(this.features[i].geometry.getBounds());
         }

         if (zoom) {
            if (extent) {
               this.map.zoomToExtent(extent);
            } else {
               this.map.zoomToMaxExtent();
            }
         }
      }

      if (callback) {
         callback(extent);
      }
   });

   map.addLayer(layer);
}

function addBoxToMap(boxbounds, id, outline) {
   if (!vectors) {
     // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
     vectors = new OpenLayers.Layer.Vector("Boxes", {
        displayInLayerSwitcher: false
     });
     map.addLayer(vectors);
   }
   var geometry;
   if (outline) {
     vertices = boxbounds.toGeometry().getVertices();
     vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
     geometry = proj(new OpenLayers.Geometry.LineString(vertices));
   } else {
     geometry = proj(boxbounds.toGeometry());
   }
   var box = new OpenLayers.Feature.Vector(geometry, {}, {
      strokeWidth: 2,
      strokeColor: '#ee9900',
      fillOpacity: 0
   });
   box.fid = id;

   vectors.addFeatures(box);

   return box;
}

function openMapPopup(marker, description) {
   closeMapPopup();

   popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
                                            description, marker.icon, true);
   popup.setBackgroundColor("#E3FFC5");
   map.addPopup(popup);

   return popup;
}

function closeMapPopup() {
   if (popup) {
      map.removePopup(popup);
      delete popup;
   }
}

function removeMarkerFromMap(marker){
   markers.removeMarker(marker);
}

function removeBoxFromMap(box){
   vectors.removeFeature(box);
}

function proj(x) {
    return x.clone().transform(epsg4326, map.getProjectionObject());
}

function unproj(x) {
    return x.clone().transform(map.getProjectionObject(), epsg4326);
}

function setMapCenter(center, zoom) {
   zoom = parseInt(zoom, 10);
   var numzoom = map.getNumZoomLevels();
   if (zoom >= numzoom) zoom = numzoom - 1;
   map.setCenter(proj(center), zoom);
}

function getEventPosition(event) {
   return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326);
}

function getMapLayers() {
   var layerConfig = "";

   for (var i = 0; i < map.layers.length; i++) {
      if (map.layers[i].layerCode && map.layers[i].getVisibility()) {
         layerConfig += map.layers[i].layerCode;
      }
   }

   return layerConfig;
}

function setMapLayers(layerConfig) {
   if (layerConfig.charAt(0) == "B" || layerConfig.charAt(0) == "0") {
      var l = 0;

      for (var layers = map.getLayersBy("isBaseLayer", true), i = 0; i < layers.length; i++) {
         var c = layerConfig.charAt(l++);

         if (c == "B") {
            map.setBaseLayer(layers[i]);
         } else {
            map.layers[i].setVisibility(false);
         }
      }
   } else {
      for (var i = 0; i < map.layers.length; i++) {
         if (map.layers[i].layerCode) {
            if (layerConfig.indexOf(map.layers[i].layerCode) >= 0) {
               if (map.layers[i].isBaseLayer) {
                  map.setBaseLayer(map.layers[i]);
               } else {
                  map.layers[i].setVisibility(true);
               }
            } else if (!map.layers[i].isBaseLayer) {
               map.layers[i].setVisibility(false);
            }
         }
      }
   }
}