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(){} }