plugins/Mapstraction/js/mxn.openlayers.core.js

   1 mxn.register('openlayers', {
   2
   3     Mapstraction: {
   4
   5         init: function(element, api){
   6             var me = this;
   7             this.maps[api] = new OpenLayers.Map(
   8                 element.id,
   9                 {
  10                     maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
  11                     maxResolution:156543,
  12                     numZoomLevels:18,
  13                     units:'meters',
  14                     projection: "EPSG:41001"
  15                 }
  16             );
  17
  18             this.layers['osmmapnik'] = new OpenLayers.Layer.TMS(
  19                 'OSM Mapnik',
  20                 [
  21                 "http://a.tile.openstreetmap.org/",
  22                 "http://b.tile.openstreetmap.org/",
  23                 "http://c.tile.openstreetmap.org/"
  24                 ],
  25                 {
  26                     type:'png',
  27                     getURL: function (bounds) {
  28                         var res = this.map.getResolution();
  29                         var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  30                         var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
  31                         var z = this.map.getZoom();
  32                         var limit = Math.pow(2, z);
  33                         if (y < 0 || y >= limit) {
  34                             return null;
  35                         } else {
  36                             x = ((x % limit) + limit) % limit;
  37                             var path = z + "/" + x + "/" + y + "." + this.type;
  38                             var url = this.url;
  39                             if (url instanceof Array) {
  40                                 url = this.selectUrl(path, url);
  41                             }
  42                             return url + path;
  43                         }
  44                     },
  45                     displayOutsideMaxExtent: true
  46                 }
  47             );
  48
  49             this.layers['osm'] = new OpenLayers.Layer.TMS(
  50                 'OSM',
  51                 [
  52                 "http://a.tah.openstreetmap.org/Tiles/tile.php/",
  53                 "http://b.tah.openstreetmap.org/Tiles/tile.php/",
  54                 "http://c.tah.openstreetmap.org/Tiles/tile.php/"
  55                 ],
  56                 {
  57                     type:'png',
  58                     getURL: function (bounds) {
  59                         var res = this.map.getResolution();
  60                         var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  61                         var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
  62                         var z = this.map.getZoom();
  63                         var limit = Math.pow(2, z);
  64                         if (y < 0 || y >= limit) {
  65                             return null;
  66                         } else {
  67                             x = ((x % limit) + limit) % limit;
  68                             var path = z + "/" + x + "/" + y + "." + this.type;
  69                             var url = this.url;
  70                             if (url instanceof Array) {
  71                                 url = this.selectUrl(path, url);
  72                             }
  73                             return url + path;
  74                         }
  75                     },
  76                     displayOutsideMaxExtent: true
  77                 }
  78             );
  79
  80             this.maps[api].addLayer(this.layers['osmmapnik']);
  81             this.maps[api].addLayer(this.layers['osm']);
  82         },
  83
  84         applyOptions: function(){
  85             // var map = this.maps[this.api];
  86             // var myOptions = [];
  87             // if (this.options.enableDragging) {
  88             //     myOptions.draggable = true;
  89             // }
  90             // if (this.options.enableScrollWheelZoom){
  91             //     myOptions.scrollwheel = true;
  92             // }
  93             // map.setOptions(myOptions);
  94         },
  95
  96         resizeTo: function(width, height){
  97             this.currentElement.style.width = width;
  98             this.currentElement.style.height = height;
  99             this.maps[this.api].updateSize();
 100         },
 101
 102         addControls: function( args ) {
 103             var map = this.maps[this.api];
 104             // FIXME: OpenLayers has a bug removing all the controls says crschmidt
 105             for (var i = map.controls.length; i>1; i--) {
 106                 map.controls[i-1].deactivate();
 107                 map.removeControl(map.controls[i-1]);
 108             }
 109             if ( args.zoom == 'large' )      {
 110                 map.addControl(new OpenLayers.Control.PanZoomBar());
 111             }
 112             else if ( args.zoom == 'small' ) {
 113                 map.addControl(new OpenLayers.Control.ZoomPanel());
 114                 if ( args.pan) {
 115                     map.addControl(new OpenLayers.Control.PanPanel());
 116                 }
 117             }
 118             else {
 119                 if ( args.pan){
 120                     map.addControl(new OpenLayers.Control.PanPanel());
 121                 }
 122             }
 123             if ( args.overview ) {
 124                 map.addControl(new OpenLayers.Control.OverviewMap());
 125             }
 126             if ( args.map_type ) {
 127                 map.addControl(new OpenLayers.Control.LayerSwitcher());
 128             }
 129         },
 130
 131         addSmallControls: function() {
 132             var map = this.maps[this.api];
 133             this.addControlsArgs.pan = false;
 134             this.addControlsArgs.scale = false;
 135             this.addControlsArgs.zoom = 'small';
 136             map.addControl(new OpenLayers.Control.ZoomBox());
 137             map.addControl(new OpenLayers.Control.LayerSwitcher({
 138                 'ascending':false
 139             }));
 140         },
 141
 142         addLargeControls: function() {
 143             var map = this.maps[this.api];
 144             map.addControl(new OpenLayers.Control.PanZoomBar());
 145             this.addControlsArgs.pan = true;
 146             this.addControlsArgs.zoom = 'large';
 147         },
 148
 149         addMapTypeControls: function() {
 150             var map = this.maps[this.api];
 151             map.addControl( new OpenLayers.Control.LayerSwitcher({
 152                 'ascending':false
 153             }) );
 154             this.addControlsArgs.map_type = true;
 155         },
 156
 157         setCenterAndZoom: function(point, zoom) {
 158             var map = this.maps[this.api];
 159             var pt = point.toProprietary(this.api);
 160             map.setCenter(point.toProprietary(this.api), zoom);
 161         },
 162
 163         addMarker: function(marker, old) {
 164             var map = this.maps[this.api];
 165             var pin = marker.toProprietary(this.api);
 166             if (!this.layers['markers']) {
 167                 this.layers['markers'] = new OpenLayers.Layer.Markers('markers');
 168                 map.addLayer(this.layers['markers']);
 169             }
 170             this.layers['markers'].addMarker(pin);
 171
 172             return pin;
 173         },
 174
 175         removeMarker: function(marker) {
 176             var map = this.maps[this.api];
 177             var pin = marker.toProprietary(this.api);
 178             this.layers['markers'].removeMarker(pin);
 179             pin.destroy();
 180
 181         },
 182
 183         removeAllMarkers: function() {
 184             var map = this.maps[this.api];
 185
 186             // TODO: Add provider code
 187         },
 188
 189         declutterMarkers: function(opts) {
 190             var map = this.maps[this.api];
 191
 192             // TODO: Add provider code
 193         },
 194
 195         addPolyline: function(polyline, old) {
 196             var map = this.maps[this.api];
 197             var pl = polyline.toProprietary(this.api);
 198
 199             if (!this.layers['polylines']) {
 200                 this.layers['polylines'] = new OpenLayers.Layer.Vector('polylines');
 201                 map.addLayer(this.layers['polylines']);
 202             }
 203             polyline.setChild(pl);
 204             this.layers['polylines'].addFeatures([pl]);
 205             return pl;
 206         },
 207
 208         removePolyline: function(polyline) {
 209             var map = this.maps[this.api];
 210             var pl = polyline.toProprietary(this.api);
 211             this.layers['polylines'].removeFeatures([pl]);
 212         },
 213         removeAllPolylines: function() {
 214             var olpolylines = [];
 215             for(var i = 0, length = this.polylines.length; i < length; i++){
 216                 olpolylines.push(this.polylines[i].toProprietary(this.api));
 217             }
 218             if (this.layers['polylines']) this.layers['polylines'].removeFeatures(olpolylines);
 219         },
 220
 221         getCenter: function() {
 222             var map = this.maps[this.api];
 223             pt = map.getCenter();
 224             return new mxn.LatLonPoint(pt.lat, pt.lon);
 225         },
 226
 227         setCenter: function(point, options) {
 228             var map = this.maps[this.api];
 229             var pt = point.toProprietary(this.api);
 230             map.setCenter(pt);
 231
 232         },
 233
 234         setZoom: function(zoom) {
 235             var map = this.maps[this.api];
 236             map.zoomTo(zoom);
 237         },
 238
 239         getZoom: function() {
 240             var map = this.maps[this.api];
 241             return map.zoom;
 242         },
 243
 244         getZoomLevelForBoundingBox: function( bbox ) {
 245             var map = this.maps[this.api];
 246             // throw 'Not implemented';
 247             return zoom;
 248         },
 249
 250         setMapType: function(type) {
 251             var map = this.maps[this.api];
 252             throw 'Not implemented (setMapType)';
 253
 254             // switch(type) {
 255             //     case mxn.Mapstraction.ROAD:
 256             //     map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
 257             //     break;
 258             //     case mxn.Mapstraction.SATELLITE:
 259             //     map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
 260             //     break;
 261             //     case mxn.Mapstraction.HYBRID:
 262             //     map.setMapTypeId(google.maps.MapTypeId.HYBRID);
 263             //     break;
 264             //     default:
 265             //     map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
 266             // }
 267         },
 268
 269         getMapType: function() {
 270             var map = this.maps[this.api];
 271             // TODO: implement actual layer support
 272             return mxn.Mapstraction.ROAD;
 273
 274             // var type = map.getMapTypeId();
 275             // switch(type) {
 276             //     case google.maps.MapTypeId.ROADMAP:
 277             //     return mxn.Mapstraction.ROAD;
 278             //     case google.maps.MapTypeId.SATELLITE:
 279             //     return mxn.Mapstraction.SATELLITE;
 280             //     case google.maps.MapTypeId.HYBRID:
 281             //     return mxn.Mapstraction.HYBRID;
 282             //     //case google.maps.MapTypeId.TERRAIN:
 283             //     //        return something;
 284             //     default:
 285             //     return null;
 286             // }
 287         },
 288
 289         getBounds: function () {
 290             var map = this.maps[this.api];
 291             var olbox = map.calculateBounds();
 292             return new mxn.BoundingBox(olbox.bottom, olbox.left, olbox.top, olbox.right);
 293         },
 294
 295         setBounds: function(bounds){
 296             var map = this.maps[this.api];
 297             var sw = bounds.getSouthWest();
 298             var ne = bounds.getNorthEast();
 299
 300             if(sw.lon > ne.lon) {
 301                 sw.lon -= 360;
 302             }
 303
 304             var obounds = new OpenLayers.Bounds();
 305
 306             obounds.extend(new mxn.LatLonPoint(sw.lat,sw.lon).toProprietary(this.api));
 307             obounds.extend(new mxn.LatLonPoint(ne.lat,ne.lon).toProprietary(this.api));
 308             map.zoomToExtent(obounds);
 309         },
 310
 311         addImageOverlay: function(id, src, opacity, west, south, east, north, oContext) {
 312             var map = this.maps[this.api];
 313
 314             // TODO: Add provider code
 315         },
 316
 317         setImagePosition: function(id, oContext) {
 318             var map = this.maps[this.api];
 319             var topLeftPoint; var bottomRightPoint;
 320
 321             // TODO: Add provider code
 322
 323             //oContext.pixels.top = ...;
 324             //oContext.pixels.left = ...;
 325             //oContext.pixels.bottom = ...;
 326             //oContext.pixels.right = ...;
 327         },
 328
 329         addOverlay: function(url, autoCenterAndZoom) {
 330             var map = this.maps[this.api];
 331
 332             // TODO: Add provider code
 333
 334         },
 335
 336         addTileLayer: function(tile_url, opacity, copyright_text, min_zoom, max_zoom) {
 337             var map = this.maps[this.api];
 338
 339             // TODO: Add provider code
 340         },
 341
 342         toggleTileLayer: function(tile_url) {
 343             var map = this.maps[this.api];
 344
 345             // TODO: Add provider code
 346         },
 347
 348         getPixelRatio: function() {
 349             var map = this.maps[this.api];
 350
 351             // TODO: Add provider code
 352         },
 353
 354         mousePosition: function(element) {
 355             var map = this.maps[this.api];
 356
 357             // TODO: Add provider code
 358         }
 359     },
 360
 361     LatLonPoint: {
 362
 363         toProprietary: function() {
 364             var ollon = this.lon * 20037508.34 / 180;
 365             var ollat = Math.log(Math.tan((90 + this.lat) * Math.PI / 360)) / (Math.PI / 180);
 366             ollat = ollat * 20037508.34 / 180;
 367             return new OpenLayers.LonLat(ollon, ollat);
 368         },
 369
 370         fromProprietary: function(olPoint) {
 371             var lon = (olPoint.lon / 20037508.34) * 180;
 372             var lat = (olPoint.lat / 20037508.34) * 180;
 373             lat = 180/Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
 374             this.lon = lon;
 375             this.lat = lat;
 376         }
 377
 378     },
 379
 380     Marker: {
 381
 382         toProprietary: function() {
 383             var size, anchor, icon;
 384             if(this.iconSize) {
 385                 size = new OpenLayers.Size(this.iconSize[0], this.iconSize[1]);
 386             }
 387             else {
 388                 size = new OpenLayers.Size(21,25);
 389             }
 390
 391             if(this.iconAnchor) {
 392                 anchor = new OpenLayers.Pixel(this.iconAnchor[0], this.iconAnchor[1]);
 393             }
 394             else {
 395                 // FIXME: hard-coding the anchor point
 396                 anchor = new OpenLayers.Pixel(-(size.w/2), -size.h);
 397             }
 398
 399             if(this.iconUrl) {
 400                 icon = new OpenLayers.Icon(this.iconUrl, size, anchor);
 401             }
 402             else {
 403                 icon = new OpenLayers.Icon('http://openlayers.org/dev/img/marker-gold.png', size, anchor);
 404             }
 405             var marker = new OpenLayers.Marker(this.location.toProprietary("openlayers"), icon);
 406
 407             if(this.infoBubble) {
 408                 var popup = new OpenLayers.Popup(null,
 409                     this.location.toProprietary("openlayers"),
 410                     new OpenLayers.Size(100,100),
 411                     this.infoBubble,
 412                     true);
 413                     popup.autoSize = true;
 414                     var theMap = this.map;
 415                     if(this.hover) {
 416                         marker.events.register("mouseover", marker, function(event) {
 417                             theMap.addPopup(popup);
 418                             popup.show();
 419                         });
 420                         marker.events.register("mouseout", marker, function(event) {
 421                             popup.hide();
 422                             theMap.removePopup(popup);
 423                         });
 424                     }
 425                     else {
 426                         var shown = false;
 427                         marker.events.register("mousedown", marker, function(event) {
 428                             if (shown) {
 429                                 popup.hide();
 430                                 theMap.removePopup(popup);
 431                                 shown = false;
 432                             } else {
 433                                 theMap.addPopup(popup);
 434                                 popup.show();
 435                                 shown = true;
 436                             }
 437                         });
 438                     }
 439                 }
 440
 441                 if(this.hoverIconUrl) {
 442                     // TODO
 443                 }
 444
 445                 if(this.infoDiv){
 446                     // TODO
 447                 }
 448                 return marker;
 449             },
 450
 451         openBubble: function() {
 452             // TODO: Add provider code
 453         },
 454
 455         hide: function() {
 456             this.proprietary_marker.setOptions({visible:false});
 457         },
 458
 459         show: function() {
 460             this.proprietary_marker.setOptions({visible:true});
 461         },
 462
 463         update: function() {
 464             // TODO: Add provider code
 465         }
 466
 467     },
 468
 469     Polyline: {
 470
 471         toProprietary: function() {
 472             var olpolyline;
 473             var olpoints = [];
 474             var ring;
 475             var style = {
 476                 strokeColor: this.color || "#000000",
 477                 strokeOpacity: this.opacity || 1,
 478                 strokeWidth: this.width || 1,
 479                 fillColor: this.fillColor || "#000000",
 480                 fillOpacity: this.getAttribute('fillOpacity') || 0.2
 481             };
 482
 483             //TODO Handle closed attribute
 484
 485             for (var i = 0, length = this.points.length ; i< length; i++){
 486                 olpoint = this.points[i].toProprietary("openlayers");
 487                 olpoints.push(new OpenLayers.Geometry.Point(olpoint.lon, olpoint.lat));
 488             }
 489
 490             if (this.closed) {
 491                 // a closed polygon
 492                 ring = new OpenLayers.Geometry.LinearRing(olpoints);
 493             } else {
 494                 // a line
 495                 ring = new OpenLayers.Geometry.LineString(olpoints);
 496             }
 497
 498             olpolyline = new OpenLayers.Feature.Vector(ring, null, style);
 499
 500             return olpolyline;
 501         },
 502
 503         show: function() {
 504             throw 'Not implemented';
 505         },
 506
 507         hide: function() {
 508             throw 'Not implemented';
 509         }
 510
 511     }
 512
 513 });