513 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			513 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| mxn.register('openlayers', {	
 | |
| 
 | |
|     Mapstraction: {
 | |
| 
 | |
|         init: function(element, api){
 | |
|             var me = this;
 | |
|             this.maps[api] = new OpenLayers.Map(
 | |
|                 element.id,
 | |
|                 {
 | |
|                     maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
 | |
|                     maxResolution:156543,
 | |
|                     numZoomLevels:18,
 | |
|                     units:'meters',
 | |
|                     projection: "EPSG:41001"
 | |
|                 }
 | |
|             );
 | |
| 
 | |
|             this.layers['osmmapnik'] = new OpenLayers.Layer.TMS(
 | |
|                 'OSM Mapnik',
 | |
|                 [
 | |
|                 "http://a.tile.openstreetmap.org/",
 | |
|                 "http://b.tile.openstreetmap.org/",
 | |
|                 "http://c.tile.openstreetmap.org/"
 | |
|                 ],
 | |
|                 {
 | |
|                     type:'png',
 | |
|                     getURL: function (bounds) {
 | |
|                         var res = this.map.getResolution();
 | |
|                         var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
 | |
|                         var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
 | |
|                         var z = this.map.getZoom();
 | |
|                         var limit = Math.pow(2, z);
 | |
|                         if (y < 0 || y >= limit) {
 | |
|                             return null;
 | |
|                         } else {
 | |
|                             x = ((x % limit) + limit) % limit;
 | |
|                             var path = z + "/" + x + "/" + y + "." + this.type;
 | |
|                             var url = this.url;
 | |
|                             if (url instanceof Array) {
 | |
|                                 url = this.selectUrl(path, url);
 | |
|                             }
 | |
|                             return url + path;
 | |
|                         }
 | |
|                     },
 | |
|                     displayOutsideMaxExtent: true
 | |
|                 }
 | |
|             );
 | |
| 
 | |
|             this.layers['osm'] = new OpenLayers.Layer.TMS(
 | |
|                 'OSM',
 | |
|                 [
 | |
|                 "http://a.tah.openstreetmap.org/Tiles/tile.php/",
 | |
|                 "http://b.tah.openstreetmap.org/Tiles/tile.php/",
 | |
|                 "http://c.tah.openstreetmap.org/Tiles/tile.php/"
 | |
|                 ],
 | |
|                 {
 | |
|                     type:'png',
 | |
|                     getURL: function (bounds) {
 | |
|                         var res = this.map.getResolution();
 | |
|                         var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
 | |
|                         var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
 | |
|                         var z = this.map.getZoom();
 | |
|                         var limit = Math.pow(2, z);
 | |
|                         if (y < 0 || y >= limit) {
 | |
|                             return null;
 | |
|                         } else {
 | |
|                             x = ((x % limit) + limit) % limit;
 | |
|                             var path = z + "/" + x + "/" + y + "." + this.type;
 | |
|                             var url = this.url;
 | |
|                             if (url instanceof Array) {
 | |
|                                 url = this.selectUrl(path, url);
 | |
|                             }
 | |
|                             return url + path;
 | |
|                         }
 | |
|                     },
 | |
|                     displayOutsideMaxExtent: true
 | |
|                 }
 | |
|             );
 | |
| 
 | |
|             this.maps[api].addLayer(this.layers['osmmapnik']);
 | |
|             this.maps[api].addLayer(this.layers['osm']);
 | |
|         },
 | |
| 
 | |
|         applyOptions: function(){
 | |
|             // var map = this.maps[this.api];
 | |
|             // var myOptions = [];
 | |
|             // if (this.options.enableDragging) {
 | |
|             //     myOptions.draggable = true;
 | |
|             // } 
 | |
|             // if (this.options.enableScrollWheelZoom){
 | |
|             //     myOptions.scrollwheel = true;
 | |
|             // } 
 | |
|             // map.setOptions(myOptions);
 | |
|         },
 | |
| 
 | |
|         resizeTo: function(width, height){	
 | |
|             this.currentElement.style.width = width;
 | |
|             this.currentElement.style.height = height;
 | |
|             this.maps[this.api].updateSize();
 | |
|         },
 | |
| 
 | |
|         addControls: function( args ) {
 | |
|             var map = this.maps[this.api];	
 | |
|             // FIXME: OpenLayers has a bug removing all the controls says crschmidt
 | |
|             for (var i = map.controls.length; i>1; i--) {
 | |
|                 map.controls[i-1].deactivate();
 | |
|                 map.removeControl(map.controls[i-1]);
 | |
|             }
 | |
|             if ( args.zoom == 'large' )      {
 | |
|                 map.addControl(new OpenLayers.Control.PanZoomBar());
 | |
|             }
 | |
|             else if ( args.zoom == 'small' ) {
 | |
|                 map.addControl(new OpenLayers.Control.ZoomPanel());
 | |
|                 if ( args.pan) {
 | |
|                     map.addControl(new OpenLayers.Control.PanPanel()); 
 | |
|                 }
 | |
|             }
 | |
|             else {
 | |
|                 if ( args.pan){
 | |
|                     map.addControl(new OpenLayers.Control.PanPanel()); 
 | |
|                 }
 | |
|             }
 | |
|             if ( args.overview ) {
 | |
|                 map.addControl(new OpenLayers.Control.OverviewMap());
 | |
|             }
 | |
|             if ( args.map_type ) {
 | |
|                 map.addControl(new OpenLayers.Control.LayerSwitcher());
 | |
|             }
 | |
|         },
 | |
| 
 | |
|         addSmallControls: function() {
 | |
|             var map = this.maps[this.api];
 | |
|             this.addControlsArgs.pan = false;
 | |
|             this.addControlsArgs.scale = false;                        
 | |
|             this.addControlsArgs.zoom = 'small';
 | |
|             map.addControl(new OpenLayers.Control.ZoomBox());
 | |
|             map.addControl(new OpenLayers.Control.LayerSwitcher({
 | |
|                 'ascending':false
 | |
|             }));            
 | |
|         },
 | |
| 
 | |
|         addLargeControls: function() {
 | |
|             var map = this.maps[this.api];
 | |
|             map.addControl(new OpenLayers.Control.PanZoomBar());
 | |
|             this.addControlsArgs.pan = true;
 | |
|             this.addControlsArgs.zoom = 'large';
 | |
|         },
 | |
| 
 | |
|         addMapTypeControls: function() {
 | |
|             var map = this.maps[this.api];
 | |
|             map.addControl( new OpenLayers.Control.LayerSwitcher({
 | |
|                 'ascending':false
 | |
|             }) );
 | |
|             this.addControlsArgs.map_type = true;
 | |
|         },
 | |
| 
 | |
|         setCenterAndZoom: function(point, zoom) { 
 | |
|             var map = this.maps[this.api];
 | |
|             var pt = point.toProprietary(this.api);
 | |
|             map.setCenter(point.toProprietary(this.api), zoom);
 | |
|         },
 | |
| 
 | |
|         addMarker: function(marker, old) {
 | |
|             var map = this.maps[this.api];
 | |
|             var pin = marker.toProprietary(this.api);
 | |
|             if (!this.layers['markers']) {
 | |
|                 this.layers['markers'] = new OpenLayers.Layer.Markers('markers');
 | |
|                 map.addLayer(this.layers['markers']);
 | |
|             }
 | |
|             this.layers['markers'].addMarker(pin);
 | |
| 
 | |
|             return pin;
 | |
|         },
 | |
| 
 | |
|         removeMarker: function(marker) {
 | |
|             var map = this.maps[this.api];
 | |
|             var pin = marker.toProprietary(this.api);
 | |
|             this.layers['markers'].removeMarker(pin);
 | |
|             pin.destroy();
 | |
| 
 | |
|         },
 | |
| 
 | |
|         removeAllMarkers: function() {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code
 | |
|         },
 | |
| 
 | |
|         declutterMarkers: function(opts) {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code
 | |
|         },
 | |
| 
 | |
|         addPolyline: function(polyline, old) {
 | |
|             var map = this.maps[this.api];
 | |
|             var pl = polyline.toProprietary(this.api);
 | |
| 
 | |
|             if (!this.layers['polylines']) {
 | |
|                 this.layers['polylines'] = new OpenLayers.Layer.Vector('polylines');
 | |
|                 map.addLayer(this.layers['polylines']);
 | |
|             }
 | |
|             polyline.setChild(pl);
 | |
|             this.layers['polylines'].addFeatures([pl]);
 | |
|             return pl;
 | |
|         },
 | |
| 
 | |
|         removePolyline: function(polyline) {
 | |
|             var map = this.maps[this.api];
 | |
|             var pl = polyline.toProprietary(this.api);
 | |
|             this.layers['polylines'].removeFeatures([pl]);
 | |
|         },
 | |
|         removeAllPolylines: function() {
 | |
|             var olpolylines = [];
 | |
|             for(var i = 0, length = this.polylines.length; i < length; i++){
 | |
|                 olpolylines.push(this.polylines[i].toProprietary(this.api));
 | |
|             }
 | |
|             if (this.layers['polylines']) this.layers['polylines'].removeFeatures(olpolylines);            
 | |
|         },
 | |
| 
 | |
|         getCenter: function() {
 | |
|             var map = this.maps[this.api];
 | |
|             pt = map.getCenter();
 | |
|             return new mxn.LatLonPoint(pt.lat, pt.lon);
 | |
|         },
 | |
| 
 | |
|         setCenter: function(point, options) {
 | |
|             var map = this.maps[this.api];
 | |
|             var pt = point.toProprietary(this.api);
 | |
|             map.setCenter(pt);
 | |
|             
 | |
|         },
 | |
| 
 | |
|         setZoom: function(zoom) {
 | |
|             var map = this.maps[this.api];
 | |
|             map.zoomTo(zoom);
 | |
|         },
 | |
| 
 | |
|         getZoom: function() {
 | |
|             var map = this.maps[this.api];
 | |
|             return map.zoom;
 | |
|         },
 | |
| 
 | |
|         getZoomLevelForBoundingBox: function( bbox ) {
 | |
|             var map = this.maps[this.api];
 | |
|             // throw 'Not implemented';
 | |
|             return zoom;
 | |
|         },
 | |
| 
 | |
|         setMapType: function(type) {
 | |
|             var map = this.maps[this.api];
 | |
|             throw 'Not implemented (setMapType)';
 | |
| 
 | |
|             // switch(type) {
 | |
|             //     case mxn.Mapstraction.ROAD:
 | |
|             //     map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
 | |
|             //     break;
 | |
|             //     case mxn.Mapstraction.SATELLITE:
 | |
|             //     map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
 | |
|             //     break;
 | |
|             //     case mxn.Mapstraction.HYBRID:
 | |
|             //     map.setMapTypeId(google.maps.MapTypeId.HYBRID);
 | |
|             //     break;
 | |
|             //     default:
 | |
|             //     map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
 | |
|             // }	 
 | |
|         },
 | |
| 
 | |
|         getMapType: function() {
 | |
|             var map = this.maps[this.api];
 | |
|             // TODO: implement actual layer support
 | |
|             return mxn.Mapstraction.ROAD;
 | |
| 
 | |
|             // var type = map.getMapTypeId();
 | |
|             // switch(type) {
 | |
|             //     case google.maps.MapTypeId.ROADMAP:
 | |
|             //     return mxn.Mapstraction.ROAD;
 | |
|             //     case google.maps.MapTypeId.SATELLITE:
 | |
|             //     return mxn.Mapstraction.SATELLITE;
 | |
|             //     case google.maps.MapTypeId.HYBRID:
 | |
|             //     return mxn.Mapstraction.HYBRID;
 | |
|             //     //case google.maps.MapTypeId.TERRAIN:
 | |
|             //     //        return something;
 | |
|             //     default:
 | |
|             //     return null;
 | |
|             // }
 | |
|         },
 | |
| 
 | |
|         getBounds: function () {
 | |
|             var map = this.maps[this.api];
 | |
|             var olbox = map.calculateBounds();
 | |
|             return new mxn.BoundingBox(olbox.bottom, olbox.left, olbox.top, olbox.right);            
 | |
|         },
 | |
| 
 | |
|         setBounds: function(bounds){
 | |
|             var map = this.maps[this.api];
 | |
|             var sw = bounds.getSouthWest();
 | |
|             var ne = bounds.getNorthEast();
 | |
| 
 | |
|             if(sw.lon > ne.lon) {
 | |
|                 sw.lon -= 360;
 | |
|             }
 | |
| 
 | |
|             var obounds = new OpenLayers.Bounds();
 | |
|             
 | |
|             obounds.extend(new mxn.LatLonPoint(sw.lat,sw.lon).toProprietary(this.api));
 | |
|             obounds.extend(new mxn.LatLonPoint(ne.lat,ne.lon).toProprietary(this.api));
 | |
|             map.zoomToExtent(obounds);
 | |
|         },
 | |
| 
 | |
|         addImageOverlay: function(id, src, opacity, west, south, east, north, oContext) {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code
 | |
|         },
 | |
| 
 | |
|         setImagePosition: function(id, oContext) {
 | |
|             var map = this.maps[this.api];
 | |
|             var topLeftPoint; var bottomRightPoint;
 | |
| 
 | |
|             // TODO: Add provider code
 | |
| 
 | |
|             //oContext.pixels.top = ...;
 | |
|             //oContext.pixels.left = ...;
 | |
|             //oContext.pixels.bottom = ...;
 | |
|             //oContext.pixels.right = ...;
 | |
|         },
 | |
| 
 | |
|         addOverlay: function(url, autoCenterAndZoom) {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code
 | |
| 
 | |
|         },
 | |
| 
 | |
|         addTileLayer: function(tile_url, opacity, copyright_text, min_zoom, max_zoom) {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code
 | |
|         },
 | |
| 
 | |
|         toggleTileLayer: function(tile_url) {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code
 | |
|         },
 | |
| 
 | |
|         getPixelRatio: function() {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code	
 | |
|         },
 | |
| 
 | |
|         mousePosition: function(element) {
 | |
|             var map = this.maps[this.api];
 | |
| 
 | |
|             // TODO: Add provider code	
 | |
|         }
 | |
|     },
 | |
| 
 | |
|     LatLonPoint: {
 | |
| 
 | |
|         toProprietary: function() {
 | |
|             var ollon = this.lon * 20037508.34 / 180;
 | |
|             var ollat = Math.log(Math.tan((90 + this.lat) * Math.PI / 360)) / (Math.PI / 180);
 | |
|             ollat = ollat * 20037508.34 / 180;
 | |
|             return new OpenLayers.LonLat(ollon, ollat);            
 | |
|         },
 | |
| 
 | |
|         fromProprietary: function(olPoint) {
 | |
|             var lon = (olPoint.lon / 20037508.34) * 180;
 | |
|             var lat = (olPoint.lat / 20037508.34) * 180;
 | |
|             lat = 180/Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI / 2);
 | |
|             this.lon = lon;
 | |
|             this.lat = lat;
 | |
|         }
 | |
| 
 | |
|     },
 | |
| 
 | |
|     Marker: {
 | |
| 
 | |
|         toProprietary: function() {
 | |
|             var size, anchor, icon;
 | |
|             if(this.iconSize) {
 | |
|                 size = new OpenLayers.Size(this.iconSize[0], this.iconSize[1]);
 | |
|             }
 | |
|             else {
 | |
|                 size = new OpenLayers.Size(21,25);
 | |
|             }
 | |
| 
 | |
|             if(this.iconAnchor) {
 | |
|                 anchor = new OpenLayers.Pixel(this.iconAnchor[0], this.iconAnchor[1]);
 | |
|             }
 | |
|             else {
 | |
|                 // FIXME: hard-coding the anchor point
 | |
|                 anchor = new OpenLayers.Pixel(-(size.w/2), -size.h);
 | |
|             }
 | |
| 
 | |
|             if(this.iconUrl) {
 | |
|                 icon = new OpenLayers.Icon(this.iconUrl, size, anchor);
 | |
|             }
 | |
|             else {
 | |
|                 icon = new OpenLayers.Icon('http://openlayers.org/dev/img/marker-gold.png', size, anchor);
 | |
|             }
 | |
|             var marker = new OpenLayers.Marker(this.location.toProprietary("openlayers"), icon);
 | |
| 
 | |
|             if(this.infoBubble) {
 | |
|                 var popup = new OpenLayers.Popup(null,
 | |
|                     this.location.toProprietary("openlayers"),
 | |
|                     new OpenLayers.Size(100,100),
 | |
|                     this.infoBubble,
 | |
|                     true);
 | |
|                     popup.autoSize = true;
 | |
|                     var theMap = this.map;
 | |
|                     if(this.hover) {
 | |
|                         marker.events.register("mouseover", marker, function(event) {
 | |
|                             theMap.addPopup(popup);
 | |
|                             popup.show();
 | |
|                         });
 | |
|                         marker.events.register("mouseout", marker, function(event) {
 | |
|                             popup.hide();
 | |
|                             theMap.removePopup(popup);
 | |
|                         });
 | |
|                     }
 | |
|                     else {
 | |
|                         var shown = false;
 | |
|                         marker.events.register("mousedown", marker, function(event) {
 | |
|                             if (shown) {
 | |
|                                 popup.hide();
 | |
|                                 theMap.removePopup(popup);
 | |
|                                 shown = false;
 | |
|                             } else {
 | |
|                                 theMap.addPopup(popup);
 | |
|                                 popup.show();
 | |
|                                 shown = true;
 | |
|                             }
 | |
|                         });
 | |
|                     }
 | |
|                 }
 | |
| 
 | |
|                 if(this.hoverIconUrl) {
 | |
|                     // TODO
 | |
|                 }
 | |
| 
 | |
|                 if(this.infoDiv){
 | |
|                     // TODO
 | |
|                 }
 | |
|                 return marker;
 | |
|             },
 | |
| 
 | |
|         openBubble: function() {		
 | |
|             // TODO: Add provider code
 | |
|         },
 | |
| 
 | |
|         hide: function() {
 | |
|             this.proprietary_marker.setOptions({visible:false});
 | |
|         },
 | |
| 
 | |
|         show: function() {
 | |
|             this.proprietary_marker.setOptions({visible:true});
 | |
|         },
 | |
| 
 | |
|         update: function() {
 | |
|             // TODO: Add provider code
 | |
|         }
 | |
| 
 | |
|     },
 | |
| 
 | |
|     Polyline: {
 | |
| 
 | |
|         toProprietary: function() {
 | |
|             var olpolyline;
 | |
|             var olpoints = [];
 | |
|             var ring;
 | |
|             var style = {
 | |
|                 strokeColor: this.color || "#000000",
 | |
|                 strokeOpacity: this.opacity || 1,
 | |
|                 strokeWidth: this.width || 1,
 | |
|                 fillColor: this.fillColor || "#000000",
 | |
|                 fillOpacity: this.getAttribute('fillOpacity') || 0.2
 | |
|             };
 | |
| 
 | |
|             //TODO Handle closed attribute
 | |
| 
 | |
|             for (var i = 0, length = this.points.length ; i< length; i++){
 | |
|                 olpoint = this.points[i].toProprietary("openlayers");
 | |
|                 olpoints.push(new OpenLayers.Geometry.Point(olpoint.lon, olpoint.lat));
 | |
|             }
 | |
| 
 | |
|             if (this.closed) {
 | |
|                 // a closed polygon
 | |
|                 ring = new OpenLayers.Geometry.LinearRing(olpoints);
 | |
|             } else {
 | |
|                 // a line
 | |
|                 ring = new OpenLayers.Geometry.LineString(olpoints);
 | |
|             }
 | |
| 
 | |
|             olpolyline = new OpenLayers.Feature.Vector(ring, null, style);
 | |
| 
 | |
|             return olpolyline;
 | |
|         },
 | |
| 
 | |
|         show: function() {
 | |
|             throw 'Not implemented';
 | |
|         },
 | |
| 
 | |
|         hide: function() {
 | |
|             throw 'Not implemented';
 | |
|         }
 | |
| 
 | |
|     }
 | |
| 
 | |
| }); |