codesite-noreply at google.com
2009-Oct-03 15:40 UTC
[Mapstraction] [mapstraction] r37 committed - Added OpenLayers provider support
Revision: 37 Author: ajturner Date: Sat Oct 3 08:39:48 2009 Log: Added OpenLayers provider support http://code.google.com/p/mapstraction/source/detail?r=37 Added: /trunk/source/mxn.openlayers.core.js Modified: /trunk/tests/index.htm ======================================--- /dev/null +++ /trunk/source/mxn.openlayers.core.js Sat Oct 3 08:39:48 2009 @@ -0,0 +1,513 @@ +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]); + } + // FIXME - can pan & zoom be separate? + if ( args.pan ) { + map.addControl(new OpenLayers.Control.PanZoomBar()); + } + else { } + if ( args.zoom == ''large'' ) { + map.addControl(new OpenLayers.Control.PanZoomBar()); + } + else if ( args.zoom == ''small'' ) { + map.addControl(new OpenLayers.Control.ZoomBox()); + } + else { + map.addControl(new OpenLayers.Control.ZoomBox()); + } + 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''; + } + + } + +}); ======================================--- /trunk/tests/index.htm Tue Jun 2 04:10:54 2009 +++ /trunk/tests/index.htm Sat Oct 3 08:39:48 2009 @@ -5,9 +5,10 @@ <title>Mapstraction V2 demo</title> <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAY70wuSo0zF3ZtJVp5bDm1BS1Y2ErAqCHV5rDhHSzgjy23KqwdRRaoSBuZk72oDzzAYxVBjtsLqSmTw"></script> <script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=5wTxDW_V34GQjK.7glLG6OnJSRxCvfLj7ktMsuOoR42Gkm16vDVEjjw6FGWJ1Gky"></script> - <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script> + <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script> + <script src="http://openlayers.org/api/OpenLayers.js"></script> <!--<script src="domReady.js" type="text/javascript"></script>--> - <script src="../source/mxn.js?(google, yahoo, microsoft)" type="text/javascript"></script> + <script src="../source/mxn.js?(google, yahoo, microsoft, openlayers)" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ @@ -37,7 +38,7 @@ var infoElm = document.getElementById(''info''); var eventsElm = document.getElementById(''events''); - var m = new mxn.Mapstraction(''map''); + var m = new mxn.Mapstraction(''map'', ''google''); m.endPan.addHandler(function(sEvtName, oEvtSource, oEvtArgs){ var center = oEvtSource.getCenter(); @@ -62,80 +63,92 @@ }; var ops = [ - { - desc: ''Center map'', - action: function(){ - m.setCenterAndZoom(new mxn.LatLonPoint(37.4419, -122.1419), 10); - } - }, - { - desc: ''Pan map'', + { + desc: ''Center map'', + action: function(){ + m.setCenterAndZoom(new mxn.LatLonPoint(37.4419, -122.1419), 10); + } + }, + { + desc: ''Pan map'', + action: function(){ + m.setCenter(new mxn.LatLonPoint(37.3419, -122.0419), {pan: true}); + } + }, + { + desc: ''Get info'', + action: function(){ + infoElm.innerHTML = ''Info<br/>''; + var bb = m.getBounds(); + infoElm.innerHTML += ''Bounds:<br/>SW('' + bb.sw.lat.toFixed(5) + '',''+ bb.sw.lon.toFixed(5) +'')<br/>NE('' + bb.ne.lat.toFixed(5) + '',''+ bb.ne.lon.toFixed(5) +'')<br/>''; + var ll = m.getCenter(); + infoElm.innerHTML += ''Center: ('' + ll.lat.toFixed(5) + '',''+ ll.lon.toFixed(5) +'')<br/>''; + infoElm.innerHTML += ''Map type: '' + m.getMapType() + ''<br/>''; + infoElm.innerHTML += ''Zoom: '' + m.getZoom() + ''<br/>''; + } + }, + { + desc: ''Set zoom'', + action: function(){ + m.setZoom(8); + } + }, + { + desc: ''Add marker'', + action: function(){ + var mkr = new mxn.Marker(new mxn.LatLonPoint(37.3419, -122.0419)); + mkr.setLabel(''Some random place''); + mkr.setInfoBubble(''Some information about the random place''); + mkr.click.addHandler(markerEventHandler); + mkr.openInfoBubble.addHandler(markerEventHandler); + mkr.closeInfoBubble.addHandler(markerEventHandler); + m.addMarker(mkr); + } + }, + { + desc: ''Add marker offscreen'', + action: function(){ + var mkr = new mxn.Marker(new mxn.LatLonPoint(37.3419, -117.0419)); + mkr.setLabel(''Some other place''); + m.addMarker(mkr); + } + }, + { + desc: ''Auto center'', + action: function(){ + m.autoCenterAndZoom(); + } + }, + { + desc: ''Add line'', + action: function(){ + var pl = new mxn.Polyline([ + new mxn.LatLonPoint(37.3419, -122.0419), + new mxn.LatLonPoint(36.3419, -120.0419), + new mxn.LatLonPoint(38.3419, -119.0419), + new mxn.LatLonPoint(37.3419, -117.0419) + ]); + pl.color = ''#00DD55''; + m.addPolyline(pl); + } + }, + { + desc: ''Swap API (yahoo)'', action: function(){ - m.setCenter(new mxn.LatLonPoint(37.3419, -122.0419), {pan: true}); - } + m.swap(''map'', ''yahoo''); + } }, { - desc: ''Get info'', + desc: ''Swap API (microsoft)'', action: function(){ - infoElm.innerHTML = ''Info<br/>''; - var bb = m.getBounds(); - infoElm.innerHTML += ''Bounds:<br/>SW('' + bb.sw.lat.toFixed(5) + '',''+ bb.sw.lon.toFixed(5) +'')<br/>NE('' + bb.ne.lat.toFixed(5) + '',''+ bb.ne.lon.toFixed(5) +'')<br/>''; - var ll = m.getCenter(); - infoElm.innerHTML += ''Center: ('' + ll.lat.toFixed(5) + '',''+ ll.lon.toFixed(5) +'')<br/>''; - infoElm.innerHTML += ''Map type: '' + m.getMapType() + ''<br/>''; - infoElm.innerHTML += ''Zoom: '' + m.getZoom() + ''<br/>''; - } + m.swap(''map'', ''microsoft''); + } }, { - desc: ''Set zoom'', + desc: ''Swap API (openlayers)'', action: function(){ - m.setZoom(8); - } - }, - { - desc: ''Add marker'', - action: function(){ - var mkr = new mxn.Marker(new mxn.LatLonPoint(37.3419, -122.0419)); - mkr.setLabel(''Some random place''); - mkr.setInfoBubble(''Some information about the random place''); - mkr.click.addHandler(markerEventHandler); - mkr.openInfoBubble.addHandler(markerEventHandler); - mkr.closeInfoBubble.addHandler(markerEventHandler); - m.addMarker(mkr); - } - }, - { - desc: ''Add marker offscreen'', - action: function(){ - var mkr = new mxn.Marker(new mxn.LatLonPoint(37.3419, -117.0419)); - mkr.setLabel(''Some other place''); - m.addMarker(mkr); - } - }, - { - desc: ''Auto center'', - action: function(){ - m.autoCenterAndZoom(); - } - }, - { - desc: ''Add line'', - action: function(){ - var pl = new mxn.Polyline([ - new mxn.LatLonPoint(37.3419, -122.0419), - new mxn.LatLonPoint(36.3419, -120.0419), - new mxn.LatLonPoint(38.3419, -119.0419), - new mxn.LatLonPoint(37.3419, -117.0419) - ]); - pl.color = ''#00DD55''; - m.addPolyline(pl); - } - }, - { - desc: ''Swap API'', - action: function(){ - m.swap(''map'', ''yahoo''); - } + m.swap(''map'', ''openlayers''); + } }, { desc: ''Done.'', action: function(){} }