public/javascripts/map.js

   1 var epsg4326 = new OpenLayers.Projection("EPSG:4326");
   2 var map;
   3 var markers;
   4 var vectors;
   5 var popup;
   6
   7 var nonamekeys = {
   8    'openstreetmap.org': '2f59745a6b525b4ebdb100891d5b6711',
   9    'www.openstreetmap.org': 'fd093e52f0965d46bb1c6c6281022199',
  10    'openstreetmap.com': '4c60e7f5f31c576a9bb8da71c8d61152',
  11    'www.openstreetmap.com': '142f25a0770a51a9a400b3513834a199',
  12    'openstreetmap.net': '687c58fd1d715596bfc94abe653d8ac0',
  13    'www.openstreetmap.net': '0bd1654141c85d30b9c2ccdb5302f2e4'
  14 };
  15
  16 function createMap(divName, options) {
  17    options = options || {};
  18
  19    map = new OpenLayers.Map(divName, {
  20       controls: options.controls || [
  21          new OpenLayers.Control.ArgParser(),
  22          new OpenLayers.Control.Attribution(),
  23          new OpenLayers.Control.LayerSwitcher(),
  24          new OpenLayers.Control.Navigation(),
  25          new OpenLayers.Control.PanZoom(),
  26          new OpenLayers.Control.PanZoomBar(),
  27          new OpenLayers.Control.ScaleLine({geodesic: true})
  28       ],
  29       units: "m",
  30       maxResolution: 156543.0339,
  31       numZoomLevels: 20,
  32       displayProjection: new OpenLayers.Projection("EPSG:4326")
  33    });
  34
  35    var mapnik = new OpenLayers.Layer.OSM.Mapnik(i18n("javascripts.map.base.mapnik"), {
  36       keyid: "mapnik",
  37       displayOutsideMaxExtent: true,
  38       wrapDateLine: true,
  39       layerCode: "M"
  40    });
  41    map.addLayer(mapnik);
  42
  43    var osmarender = new OpenLayers.Layer.OSM.Osmarender(i18n("javascripts.map.base.osmarender"), {
  44       keyid: "osmarender",
  45       displayOutsideMaxExtent: true,
  46       wrapDateLine: true,
  47       layerCode: "O"
  48    });
  49    map.addLayer(osmarender);
  50
  51    var cyclemap = new OpenLayers.Layer.OSM.CycleMap(i18n("javascripts.map.base.cycle_map"), {
  52       keyid: "cyclemap",
  53       displayOutsideMaxExtent: true,
  54       wrapDateLine: true,
  55       layerCode: "C"
  56    });
  57    map.addLayer(cyclemap);
  58
  59    var nonamekey = nonamekeys[document.domain];
  60    var noname = new OpenLayers.Layer.OSM(i18n("javascripts.map.base.noname"), [
  61       "http://a.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
  62       "http://b.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png",
  63       "http://c.tile.cloudmade.com/" + nonamekey + "/3/256/${z}/${x}/${y}.png"
  64    ], {
  65       displayOutsideMaxExtent: true,
  66       wrapDateLine: true,
  67       numZoomLevels: 19,
  68       layerCode: "N"
  69    });
  70    map.addLayer(noname);
  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("/images/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       marker.events.register("mouseout", marker, function() { closeMapPopup() });
 103    }
 104
 105    return marker;
 106 }
 107
 108 function addObjectToMap(url, zoom, callback) {
 109    var layer = new OpenLayers.Layer.GML("Objects", url, {
 110       format: OpenLayers.Format.OSM,
 111       style: {
 112           strokeColor: "blue",
 113           strokeWidth: 3,
 114           strokeOpacity: 0.5,
 115           fillOpacity: 0.2,
 116           fillColor: "lightblue",
 117           pointRadius: 6
 118       },
 119       projection: new OpenLayers.Projection("EPSG:4326"),
 120       displayInLayerSwitcher: false
 121    });
 122
 123    layer.events.register("loadend", layer, function() {
 124       var extent;
 125
 126       if (this.features.length) {
 127          extent = this.features[0].geometry.getBounds();
 128
 129          for (var i = 1; i < this.features.length; i++) {
 130             extent.extend(this.features[i].geometry.getBounds());
 131          }
 132
 133          if (zoom) {
 134             if (extent) {
 135                this.map.zoomToExtent(extent);
 136             } else {
 137                this.map.zoomToMaxExtent();
 138             }
 139          }
 140       }
 141
 142       if (callback) {
 143          callback(extent);
 144       }
 145    });
 146
 147    map.addLayer(layer);
 148
 149    layer.loadGML();
 150 }
 151
 152 function addBoxToMap(boxbounds, id, outline) {
 153    if (!vectors) {
 154      // Be aware that IE requires Vector layers be initialised on page load, and not under deferred script conditions
 155      vectors = new OpenLayers.Layer.Vector("Boxes", {
 156         displayInLayerSwitcher: false
 157      });
 158      map.addLayer(vectors);
 159    }
 160    var geometry;
 161    if (outline) {
 162      vertices = boxbounds.toGeometry().getVertices();
 163      vertices.push(new OpenLayers.Geometry.Point(vertices[0].x, vertices[0].y));
 164      geometry = new OpenLayers.Geometry.LineString(vertices).transform(epsg4326, map.getProjectionObject());
 165    } else {
 166      geometry = boxbounds.toGeometry().transform(epsg4326, map.getProjectionObject());
 167    }
 168    var box = new OpenLayers.Feature.Vector(geometry, {}, {
 169       strokeWidth: 2,
 170       strokeColor: '#ee9900',
 171       fillOpacity: 0
 172    });
 173    box.fid = id;
 174
 175    vectors.addFeatures(box);
 176
 177    return box;
 178 }
 179
 180 function openMapPopup(marker, description) {
 181    closeMapPopup();
 182
 183    popup = new OpenLayers.Popup.FramedCloud("popup", marker.lonlat, null,
 184                                             description, marker.icon, true);
 185    popup.setBackgroundColor("#E3FFC5");
 186    map.addPopup(popup);
 187
 188    return popup;
 189 }
 190
 191 function closeMapPopup() {
 192    if (popup) {
 193       map.removePopup(popup);
 194       delete popup;
 195    }
 196 }
 197
 198 function removeMarkerFromMap(marker){
 199    markers.removeMarker(marker);
 200 }
 201
 202 function removeBoxFromMap(box){
 203    vectors.removeFeature(box);
 204 }
 205
 206 function getMapCenter() {
 207    return map.getCenter().clone().transform(map.getProjectionObject(), epsg4326);
 208 }
 209
 210 function setMapCenter(center, zoom) {
 211    zoom = parseInt(zoom);
 212    var numzoom = map.getNumZoomLevels();
 213    if (zoom >= numzoom) zoom = numzoom - 1;
 214    map.setCenter(center.clone().transform(epsg4326, map.getProjectionObject()), zoom);
 215 }
 216
 217 function setMapExtent(extent) {
 218    map.zoomToExtent(extent.clone().transform(epsg4326, map.getProjectionObject()));
 219 }
 220
 221 function getMapExtent() {
 222    return map.getExtent().clone().transform(map.getProjectionObject(), epsg4326);
 223 }
 224
 225 function getMapZoom() {
 226    return map.getZoom();
 227 }
 228
 229 function getEventPosition(event) {
 230    return map.getLonLatFromViewPortPx(event.xy).clone().transform(map.getProjectionObject(), epsg4326);
 231 }
 232
 233 function getMapLayers() {
 234    var layerConfig = "";
 235
 236    for (var i = 0; i < map.layers.length; i++) {
 237       if (map.layers[i].layerCode && map.layers[i].getVisibility()) {
 238          layerConfig += map.layers[i].layerCode;
 239       }
 240    }
 241
 242    return layerConfig;
 243 }
 244
 245 function setMapLayers(layerConfig) {
 246    if (layerConfig.charAt(0) == "B" || layerConfig.charAt(0) == "0") {
 247       var l = 0;
 248
 249       for (var layers = map.getLayersBy("isBaseLayer", true), i = 0; i < layers.length; i++) {
 250          var c = layerConfig.charAt(l++);
 251
 252          if (c == "B") {
 253             map.setBaseLayer(layers[i]);
 254          }
 255       }
 256    } else {
 257       for (var i = 0; i < map.layers.length; i++) {
 258          if (map.layers[i].layerCode) {
 259             if (layerConfig.indexOf(map.layers[i].layerCode) >= 0) {
 260                if (map.layers[i].isBaseLayer) {
 261                   map.setBaseLayer(map.layers[i]);
 262                } else {
 263                    map.layers[i].setVisibility(true);
 264                }
 265             } else {
 266                map.layers[i].setVisibility(false);
 267             }
 268          }
 269       }
 270    }
 271 }
 272
 273 function scaleToZoom(scale) {
 274    return Math.log(360.0/(scale * 512.0)) / Math.log(2.0);
 275 }