codesite-noreply at google.com
2009-May-08 22:38 UTC
[Mapstraction] [mapstraction commit] r4 - Added first pass of Yahoo implementation which is passing the stuff in tests/index.htm.
Author: dezfowler Date: Fri May 8 14:40:26 2009 New Revision: 4 Added: trunk/source/mxn.(provider).core.js trunk/source/mxn.yahoo.core.js Modified: trunk/source/mxn.core.js trunk/source/mxn.google.core.js trunk/source/mxn.js trunk/tests/index.htm Log: Added first pass of Yahoo implementation which is passing the stuff in tests/index.htm. Added mxn.(provider).core.js template implementation file. A few small changes to core mxn files and google implementation also. Added: trunk/source/mxn.(provider).core.js =============================================================================--- (empty file) +++ trunk/source/mxn.(provider).core.js Fri May 8 14:40:26 2009 @@ -0,0 +1,295 @@ +mxn.register(''{{api_id}}'', { + +Mapstraction: { + + init: function(element, api) { + var me = this; + + // TODO: Add provider code + }, + + applyOptions: function(){ + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + resizeTo: function(width, height){ + // TODO: Add provider code + }, + + addControls: function( args ) { + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + addSmallControls: function() { + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + addLargeControls: function() { + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + addMapTypeControls: function() { + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + dragging: function(on) { + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + setCenterAndZoom: function(point, zoom) { + var map = this.maps[this.api]; + var pt = point.toProprietary(this.api); + + // TODO: Add provider code + }, + + addMarker: function(marker, old) { + var map = this.maps[this.api]; + var pin = marker.toProprietary(this.api); + + // TODO: Add provider code + + return pin; + }, + + removeMarker: function(marker) { + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + 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); + + // TODO: Add provider code + + return pl; + }, + + removePolyline: function(polyline) { + var map = this.maps[this.api]; + + // TODO: Add provider code + }, + + getCenter: function() { + var point; + var map = this.maps[this.api]; + + // TODO: Add provider code + + return point; + }, + + setCenter: function(point, options) { + var map = this.maps[this.api]; + var pt = point.toProprietary(this.api); + if(options && options[''pan'']) { + // TODO: Add provider code + } + else { + // TODO: Add provider code + } + }, + + setZoom: function(zoom) { + var map = this.maps[this.api]; + + // TODO: Add provider code + + }, + + getZoom: function() { + var map = this.maps[this.api]; + var zoom; + + // TODO: Add provider code + + return zoom; + }, + + getZoomLevelForBoundingBox: function( bbox ) { + var map = this.maps[this.api]; + // NE and SW points from the bounding box. + var ne = bbox.getNorthEast(); + var sw = bbox.getSouthWest(); + var zoom; + + // TODO: Add provider code + + return zoom; + }, + + setMapType: function(type) { + var map = this.maps[this.api]; + switch(type) { + case mxn.Mapstraction.ROAD: + // TODO: Add provider code + break; + case mxn.Mapstraction.SATELLITE: + // TODO: Add provider code + break; + case mxn.Mapstraction.HYBRID: + // TODO: Add provider code + break; + default: + // TODO: Add provider code + } + }, + + getMapType: function() { + var map = this.maps[this.api]; + + // TODO: Add provider code + + //return mxn.Mapstraction.ROAD; + //return mxn.Mapstraction.SATELLITE; + //return mxn.Mapstraction.HYBRID; + + }, + + getBounds: function () { + var map = this.maps[this.api]; + + // TODO: Add provider code + + //return new mxn.BoundingBox( , , , ); + }, + + setBounds: function(bounds){ + var map = this.maps[this.api]; + var sw = bounds.getSouthWest(); + var ne = bounds.getNorthEast(); + + // TODO: Add provider code + + }, + + 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() { + // TODO: Add provider code + }, + + fromProprietary: function(googlePoint) { + // TODO: Add provider code + } + +}, + +Marker: { + + toProprietary: function() { + // TODO: Add provider code + }, + + openBubble: function() { + // TODO: Add provider code + }, + + hide: function() { + // TODO: Add provider code + }, + + show: function() { + // TODO: Add provider code + }, + + update: function() { + // TODO: Add provider code + } + +}, + +Polyline: { + + toProprietary: function() { + // TODO: Add provider code + }, + + show: function() { + // TODO: Add provider code + }, + + hide: function() { + // TODO: Add provider code + } + +} + +}); \ No newline at end of file Modified: trunk/source/mxn.core.js =============================================================================--- trunk/source/mxn.core.js (original) +++ trunk/source/mxn.core.js Fri May 8 14:40:26 2009 @@ -37,7 +37,7 @@ this.addControlsArgs = {}; // set up our invoker for calling API methods - this.invoker = new mxn.Invoker(this, ''Mapstraction'', function(){ return api; }); + this.invoker = new mxn.Invoker(this, ''Mapstraction'', function(){ return this.api; }); // TODO: Events mxn.addEvents(this, [''load'', ''endPan'', ''markerAdded'', ''markerRemoved'', ''polylineAdded'', ''polylineRemoved'']); @@ -616,35 +616,23 @@ }; Mapstraction.prototype.setImagePosition = function(id) { - if(this.loaded[this.api] === false) { - var me = this; - this.onload[this.api].push( function() { - me.setImagePosition(id); - } ); - return; - } - - var map = this.maps[this.api]; - var x = document.getElementById(id); - var d; var e; - - switch (this.api) { - case ''google'': - case ''openstreetmap'': - d = map.fromLatLngToDivPixel(new GLatLng(x.getAttribute(''north''), x.getAttribute(''west''))); - e = map.fromLatLngToDivPixel(new GLatLng(x.getAttribute(''south''), x.getAttribute(''east''))); - break; - case ''multimap'': - d = map.geoPosToContainerPixels(new MMLatLon(x.getAttribute(''north''), x.getAttribute(''west''))); - e = map.geoPosToContainerPixels(new MMLatLon(x.getAttribute(''south''), x.getAttribute(''east''))); - break; - case ''viamichelin'': // TODO - } + var imgElement = document.getElementById(id); + var oContext = { + latLng: { + top: imgElement.getAttribute(''north''), + left: imgElement.getAttribute(''west''), + bottom: imgElement.getAttribute(''south''), + right: imgElement.getAttribute(''east'') + }, + pixels: { top: 0, right: 0, bottom: 0, left: 0 } + }; + + this.invoker.go(''setImagePosition'', arguments, false, oContext); - x.style.top = d.y.toString() + ''px''; - x.style.left = d.x.toString() + ''px''; - x.style.width = (e.x - d.x).toString() + ''px''; - x.style.height = (e.y - d.y).toString() + ''px''; + imgElement.style.top = oContext.pixels.top.toString() + ''px''; + imgElement.style.left = oContext.pixels.left.toString() + ''px''; + imgElement.style.width = (oContext.pixels.right - oContext.pixels.left).toString() + ''px''; + imgElement.style.height = (oContext.pixels.bottom - oContext.pixels.top).toString() + ''px''; }; Mapstraction.prototype.addJSON = function(json) { Modified: trunk/source/mxn.google.core.js =============================================================================--- trunk/source/mxn.google.core.js (original) +++ trunk/source/mxn.google.core.js Fri May 8 14:40:26 2009 @@ -34,12 +34,11 @@ }, applyOptions: function(){ - + var map = this.maps[this.api]; if(this.options.enableScrollWheelZoom){ map.enableContinuousZoom(); map.enableScrollWheelZoom(); } - }, resizeTo: function(width, height){ @@ -49,10 +48,7 @@ }, addControls: function( args ) { - var map = this.maps[this.api]; - - this.addControlsArgs = args; //remove old controls if (this.controls) { @@ -140,13 +136,12 @@ removeAllMarkers: function() { var map = this.maps[this.api]; - // got a feeling this doesn''t only delete markers FIXME + // FIXME: got a feeling this doesn''t only delete markers map.clearOverlays(); }, declutterMarkers: function(opts) { - var map = this.maps[this.api]; - // No implementation for google, MarkerManager? + throw ''Not implemented''; }, addPolyline: function(polyline, old) { @@ -233,7 +228,6 @@ }, getBounds: function () { - var map = this.maps[this.api]; var ne, sw, nw, se; var gbox = map.getBounds(); @@ -251,6 +245,7 @@ }, addImageOverlay: function(id, src, opacity, west, south, east, north, oContext) { + var map = this.maps[this.api]; map.getPane(G_MAP_MAP_PANE).appendChild(oContext.imgElm); this.setImageOpacity(id, opacity); this.setImagePosition(id); @@ -262,19 +257,17 @@ }); }, - setImagePosition: function(id) { - + setImagePosition: function(id, oContext) { var map = this.maps[this.api]; - var x = document.getElementById(id); - var d; var e; + var topLeftPoint; var bottomRightPoint; - d = map.fromLatLngToDivPixel(new GLatLng(x.getAttribute(''north''), x.getAttribute(''west''))); - e = map.fromLatLngToDivPixel(new GLatLng(x.getAttribute(''south''), x.getAttribute(''east''))); - - x.style.top = d.y.toString() + ''px''; - x.style.left = d.x.toString() + ''px''; - x.style.width = (e.x - d.x).toString() + ''px''; - x.style.height = (e.y - d.y).toString() + ''px''; + topLeftPoint = map.fromLatLngToDivPixel( new GLatLng(oContext.latLng.top, oContext.latLng.left) ); + bottomRightPoint = map.fromLatLngToDivPixel( new GLatLng(oContext.latLng.bottom, oContext.latLng.right) ); + + oContext.pixels.top = topLeftPoint.y; + oContext.pixels.left = topLeftPoint.x; + oContext.pixels.bottom = bottomRightPoint.y; + oContext.pixels.right = bottomRightPoint.x; }, addOverlay: function(url, autoCenterAndZoom) { Modified: trunk/source/mxn.js =============================================================================--- trunk/source/mxn.js (original) +++ trunk/source/mxn.js Fri May 8 14:40:26 2009 @@ -64,8 +64,15 @@ * Calls the API specific implementation of a particular method */ invoke: function(sApiId, sObjName, sFnName, oScope, args){ - if(typeof(apis[sApiId][sObjName]) == ''undefined'' || - typeof(apis[sApiId][sObjName][sFnName]) == ''undefined'') { + if(typeof(apis[sApiId]) == ''undefined'') { + throw ''API '' + sApiId + '' not loaded. Are you missing a script tag?''; + } + + if(typeof(apis[sApiId][sObjName]) == ''undefined'') { + throw ''Object definition '' + sObjName + '' in API '' + sApiId + '' not loaded. Are you missing a script tag?''; + } + + if(typeof(apis[sApiId][sObjName][sFnName]) == ''undefined'') { throw ''Method '' + sFnName + '' of object '' + sObjName + '' is not supported by API '' + sApiId + ''. Are you missing a script tag?''; } return apis[sApiId][sObjName][sFnName].apply(oScope, args); Added: trunk/source/mxn.yahoo.core.js =============================================================================--- (empty file) +++ trunk/source/mxn.yahoo.core.js Fri May 8 14:40:26 2009 @@ -0,0 +1,367 @@ +mxn.register(''yahoo'', { + +Mapstraction: { + + init: function(element,api) { + var me = this; + if (YMap) { + this.maps[api] = new YMap(element); + + YEvent.Capture(this.maps[api], EventsList.MouseClick, function(event,location) { + me.clickHandler(location.Lat, location.Lon, location, me); + }); + YEvent.Capture(this.maps[api], EventsList.changeZoom, function() { + me.moveendHandler(me); + }); + YEvent.Capture(this.maps[api], EventsList.endPan, function() { + me.moveendHandler(me); + }); + this.loaded[api] = true; + } + else { + alert(api + '' map script not imported''); + } + }, + + applyOptions: function(){ + if(this.options.enableScrollWheelZoom){ + map.enableContinuousZoom(); + map.enableScrollWheelZoom(); + } + }, + + resizeTo: function(width, height){ + this.maps[this.api].resizeTo(new YSize(width,height)); + }, + + addControls: function( args ) { + var map = this.maps[this.api]; + + if (args.pan) { + map.addPanControl(); + } + else { + map.removePanControl(); + } + + if (args.zoom == ''large'') { + map.addZoomLong(); + } + else if ( args.zoom == ''small'' ) { + map.addZoomShort(); + } + else { + map.removeZoomScale(); + } + }, + + addSmallControls: function() { + var map = this.maps[this.api]; + map.addPanControl(); + map.addZoomShort(); + this.addControlsArgs.pan = true; + this.addControlsArgs.zoom = ''small''; + }, + + addLargeControls: function() { + var map = this.maps[this.api]; + map.addPanControl(); + map.addZoomLong(); + this.addControlsArgs.pan = true; // keep the controls in case of swap + this.addControlsArgs.zoom = ''large''; + }, + + addMapTypeControls: function() { + var map = this.maps[this.api]; + map.addTypeControl(); + }, + + dragging: function(on) { + var map = this.maps[this.api]; + if (on) { + map.enableDragMap(); + } else { + map.disableDragMap(); + } + }, + + setCenterAndZoom: function(point, zoom) { + var map = this.maps[this.api]; + var pt = point.toProprietary(this.api); + + var yzoom = 18 - zoom; // maybe? + map.drawZoomAndCenter(pt,yzoom); + }, + + addMarker: function(marker, old) { + var map = this.maps[this.api]; + var pin = marker.toProprietary(this.api); + map.addOverlay(pin); + return pin; + }, + + removeMarker: function(marker) { + var map = this.maps[this.api]; + map.removeOverlay(marker.proprietary_marker); + }, + + removeAllMarkers: function() { + var map = this.maps[this.api]; + map.removeMarkersAll(); + }, + + declutterMarkers: function(opts) { + throw ''Not implemented''; + }, + + addPolyline: function(polyline, old) { + var map = this.maps[this.api]; + var pl = polyline.toProprietary(this.api); + map.addOverlay(pl); + return pl; + }, + + removePolyline: function(polyline) { + var map = this.maps[this.api]; + map.removeOverlay(polyline.proprietary_polyline); + }, + + getCenter: function() { + var map = this.maps[this.api]; + var pt = map.getCenterLatLon(); + var point = new mxn.LatLonPoint(pt.Lat, pt.Lon); + return point; + }, + + setCenter: function(point, options) { + var map = this.maps[this.api]; + var pt = point.toProprietary(this.api); + map.panToLatLon(pt); + }, + + setZoom: function(zoom) { + var map = this.maps[this.api]; + var yzoom = 18 - zoom; // maybe? + map.setZoomLevel(yzoom); + }, + + getZoom: function() { + var map = this.maps[this.api]; + return 18 - map.getZoomLevel(); + }, + + getZoomLevelForBoundingBox: function( bbox ) { + throw ''Not implemented''; + }, + + setMapType: function(type) { + var map = this.maps[this.api]; + + switch(type) { + case mxn.Mapstraction.ROAD: + map.setMapType(YAHOO_MAP_REG); + break; + case mxn.Mapstraction.SATELLITE: + map.setMapType(YAHOO_MAP_SAT); + break; + case mxn.Mapstraction.HYBRID: + map.setMapType(YAHOO_MAP_HYB); + break; + default: + map.setMapType(YAHOO_MAP_REG); + } + }, + + getMapType: function() { + var map = this.maps[this.api]; + var type = map.getCurrentMapType(); + switch(type) { + case YAHOO_MAP_REG: + return mxn.Mapstraction.ROAD; + case YAHOO_MAP_SAT: + return mxn.Mapstraction.SATELLITE; + case YAHOO_MAP_HYB: + return mxn.Mapstraction.HYBRID; + default: + return null; + } + }, + + getBounds: function () { + var map = this.maps[this.api]; + var ybox = map.getBoundsLatLon(); + return new mxn.BoundingBox(ybox.LatMin, ybox.LonMin, ybox.LatMax, ybox.LonMax); + }, + + 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 center = new YGeoPoint((sw.lat + ne.lat)/2, (ne.lon + sw.lon)/2); + + var container = map.getContainerSize(); + for(var zoom = 1 ; zoom <= 17 ; zoom++){ + var sw_pix = mxn.util.convertLatLonXY_Yahoo(sw,zoom); + var ne_pix = mxn.util.convertLatLonXY_Yahoo(ne,zoom); + if(sw_pix.x > ne_pix.x) { + sw_pix.x -= (1 << (26 - zoom)); //earth circumference in pixel + } + if(Math.abs(ne_pix.x - sw_pix.x) <= container.width + && Math.abs(ne_pix.y - sw_pix.y) <= container.height){ + map.drawZoomAndCenter(center, zoom); //Call drawZoomAndCenter here: OK if called multiple times anyway + break; + } + } + }, + + addImageOverlay: function(id, src, opacity, west, south, east, north, oContext) { + throw ''Not implemented''; + }, + + setImagePosition: function(id) { + throw ''Not implemented''; + }, + + addOverlay: function(url, autoCenterAndZoom) { + var map = this.maps[this.api]; + map.addOverlay(new YGeoRSS(url)); + }, + + addTileLayer: function(tile_url, opacity, copyright_text, min_zoom, max_zoom) { + throw ''Not implemented''; + }, + + toggleTileLayer: function(tile_url) { + throw ''Not implemented''; + }, + + getPixelRatio: function() { + throw ''Not implemented''; + }, + + mousePosition: function(element) { + throw ''Not implemented''; + } + +}, + +LatLonPoint: { + + toProprietary: function() { + return new YGeoPoint(this.lat,this.lon); + }, + + fromProprietary: function(yahooPoint) { + this.lat = yahooPoint.Lat; + this.lon = yahooPoint.Lon; + } + +}, + +Marker: { + + toProprietary: function() { + var ymarker; + var size; + if(this.iconSize) { + size = new YSize(this.iconSize[0], this.iconSize[1]); + } + if(this.iconUrl) { + if(this.iconSize) + ymarker = new YMarker(this.location.toProprietary(''yahoo''), new YImage(this.iconUrl, size)); + else + ymarker = new YMarker(this.location.toProprietary(''yahoo''), new YImage(this.iconUrl)); + } + else { + if(this.iconSize) + ymarker = new YMarker(this.location.toProprietary(''yahoo''), null, size); + else + ymarker = new YMarker(this.location.toProprietary(''yahoo'')); + } + + if(this.labelText) { + ymarker.addLabel(this.labelText); + } + + if(this.infoBubble) { + var theInfo = this.infoBubble; + var event_action; + if(this.hover) { + event_action = EventsList.MouseOver; + } + else { + event_action = EventsList.MouseClick; + } + YEvent.Capture(ymarker, event_action, function() { + ymarker.openSmartWindow(theInfo); + }); + + } + + if(this.infoDiv) { + var theInfo = this.infoDiv; + var div = this.div; + var event_div; + if(this.hover) { + event_action = EventsList.MouseOver; + } + else { + event_action = EventsList.MouseClick; + } + YEvent.Capture(ymarker, event_action, function() { + document.getElementById(div).innerHTML = theInfo; + }); + } + + return ymarker; + }, + + openBubble: function() { + var ypin = this.proprietary_marker; + ypin.openSmartWindow(this.infoBubble); + }, + + hide: function() { + this.proprietary_marker.hide(); + }, + + show: function() { + this.proprietary_marker.unhide(); + }, + + update: function() { + throw ''Not implemented''; + } + +}, + +Polyline: { + + toProprietary: function() { + var gpoints = []; + for (var i = 0, length = this.points.length ; i< length; i++){ + gpoints.push(this.points[i].toProprietary(''google'')); + } + if (this.closed || gpoints[0].equals(gpoints[length-1])) { + var gpoly = new GPolygon(gpoints, this.color, this.width, this.opacity, this.fillColor || "#5462E3", this.opacity || "0.3"); + } else { + var gpoly = new GPolyline(gpoints, this.color, this.width, this.opacity); + } + return gpoly; + }, + + show: function() { + throw ''Not implemented''; + }, + + hide: function() { + throw ''Not implemented''; + } + +} + +}); \ No newline at end of file Modified: trunk/tests/index.htm =============================================================================--- trunk/tests/index.htm (original) +++ trunk/tests/index.htm Fri May 8 14:40:26 2009 @@ -3,11 +3,14 @@ <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Mapstraction V2 demo</title> - <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAY70wuSo0zF3ZtJVp5bDm1BS1Y2ErAqCHV5rDhHSzgjy23KqwdRRaoSBuZk72oDzzAYxVBjtsLqSmTw" type="text/javascript"></script> + <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 src="domReady.js" type="text/javascript"></script> <script src="../source/mxn.js" type="text/javascript"></script> <script src="../source/mxn.core.js" type="text/javascript"></script> <script src="../source/mxn.google.core.js" type="text/javascript"></script> + <script src="../source/mxn.yahoo.core.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ @@ -35,7 +38,7 @@ var infoElm = document.getElementById(''info''); var eventsElm = document.getElementById(''events''); - var m = new mxn.Mapstraction(''map'', ''google''); + var m = new mxn.Mapstraction(''map'', ''yahoo''); m.endPan.addHandler(function(sEvtName, oEvtSource, oEvtArgs){ eventsElm.innerHTML += ''Map move: '' + oEvtArgs.center.toString() + ''<br/>''; @@ -115,7 +118,6 @@ { desc: ''Swap API'', action: function(){ - // TODO: Change this to some other provider when available m.swap(''map'', ''google''); } }, @@ -147,7 +149,7 @@ infoElm.innerHTML = ''ERROR: '' + err; infoElm.style.backgroundColor = ''#FCC''; clearInterval(intervalID); - return; + throw err; } a.elm.style.textDecoration = ''line-through''; a.elm.style.color = ''#AAA'';