@@ -36,6 +36,7 @@ var Mapstraction = mxn.Mapstraction = function(element, api, debug) { this.layers = []; this.polylines = []; this.images = []; + this.controls = []; this.loaded = {}; this.onload = {}; this.element = element; @@ -953,15 +954,16 @@ Mapstraction.prototype.addJSON = function(json) { * should go in the URL. * * For example, the OpenStreetMap tiles are: - * http://tile.openstreetmap.org/{Z}/{X}/{Y}.png + * m.addTileLayer("http://tile.openstreetmap.org/{Z}/{X}/{Y}.png", 1.0, "OSM", 1, 19, true); * * @param {tile_url} template url of the tiles. * @param {opacity} opacity of the tile layer - 0 is transparent, 1 is opaque. (default=0.6) * @param {copyright_text} copyright text to use for the tile layer. (default=Mapstraction) * @param {min_zoom} Minimum (furtherest out) zoom level that tiles are available (default=1) * @param {max_zoom} Maximum (closest) zoom level that the tiles are available (default=18) + * @param {map_type} Should the tile layer be a selectable map type in the layers palette (default=true) */ -Mapstraction.prototype.addTileLayer = function(tile_url, opacity, copyright_text, min_zoom, max_zoom) { +Mapstraction.prototype.addTileLayer = function(tile_url, opacity, copyright_text, min_zoom, max_zoom, map_type) { if(!tile_url) { return; } @@ -971,8 +973,9 @@ Mapstraction.prototype.addTileLayer = function(tile_url, opacity, copyright_text copyright_text = copyright_text || "Mapstraction"; min_zoom = min_zoom || 1; max_zoom = max_zoom || 18; + map_type = map_type || true; - return this.invoker.go('addTileLayer', [ tile_url, opacity, copyright_text, min_zoom, max_zoom ] ); + return this.invoker.go('addTileLayer', [ tile_url, opacity, copyright_text, min_zoom, max_zoom, map_type] ); }; /** source/mxn.core.js @@ -227,7 +227,7 @@ Mapstraction: { map.setMapType(G_HYBRID_MAP); break; default: - map.setMapType(G_NORMAL_MAP); + map.setMapType(type || G_NORMAL_MAP); } }, @@ -299,12 +299,10 @@ Mapstraction: { }); }, - addTileLayer: function(tile_url, opacity, copyright_text, min_zoom, max_zoom) { - + addTileLayer: function(tile_url, opacity, copyright_text, min_zoom, max_zoom, map_type) { var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, "copyleft"); var copyrightCollection = new GCopyrightCollection(copyright_text); copyrightCollection.addCopyright(copyright); - var tilelayers = []; tilelayers[0] = new GTileLayer(copyrightCollection, min_zoom, max_zoom); tilelayers[0].isPng = function() { @@ -320,11 +318,16 @@ Mapstraction: { url = url.replace(/\{Y\}/g,a.y); return url; }; - tileLayerOverlay = new GTileLayerOverlay(tilelayers[0]); - + if(map_type) { + var tileLayerOverlay = new GMapType(tilelayers, new GMercatorProjection(19), copyright_text, { + errorMessage:"More "+copyright_text+" tiles coming soon" + }); + this.maps[this.api].addMapType(tileLayerOverlay); + } else { + tileLayerOverlay = new GTileLayerOverlay(tilelayers[0]); + this.maps[this.api].addOverlay(tileLayerOverlay); + } this.tileLayers.push( [tile_url, tileLayerOverlay, true] ); - this.maps[this.api].addOverlay(tileLayerOverlay); - return tileLayerOverlay; }, source/mxn.google.core.js @@ -106,19 +106,19 @@ mxn.register('openlayers', { 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()); + map.addControl(new OpenLayers.Control.ZoomPanel()); + if ( args.pan) { + map.addControl(new OpenLayers.Control.PanPanel()); + } } else { - map.addControl(new OpenLayers.Control.ZoomBox()); + if ( args.pan){ + map.addControl(new OpenLayers.Control.PanPanel()); + } } if ( args.overview ) { map.addControl(new OpenLayers.Control.OverviewMap()); source/mxn.openlayers.core.js @@ -32,14 +32,15 @@ //WhenDomReady(function(){ + var m; window.onload = function() { var actionElm = document.getElementById('actions'); var infoElm = document.getElementById('info'); var eventsElm = document.getElementById('events'); - var m = new mxn.Mapstraction('map', 'google'); - + m = new mxn.Mapstraction('map', 'google'); + m.endPan.addHandler(function(sEvtName, oEvtSource, oEvtArgs){ var center = oEvtSource.getCenter(); eventsElm.innerHTML += 'Map pan: (' + center.lat.toFixed(5) + ','+ center.lon.toFixed(5) +') '; @@ -68,89 +69,109 @@ 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: 'Pan map', + action: function(){ + m.setCenter(new mxn.LatLonPoint(37.3419, -122.0419), {pan: true}); + } }, { - desc: 'Get info', - action: function(){ - infoElm.innerHTML = 'Info '; - var bb = m.getBounds(); - infoElm.innerHTML += 'Bounds: SW(' + bb.sw.lat.toFixed(5) + ','+ bb.sw.lon.toFixed(5) +') NE(' + bb.ne.lat.toFixed(5) + ','+ bb.ne.lon.toFixed(5) +') '; - var ll = m.getCenter(); - infoElm.innerHTML += 'Center: (' + ll.lat.toFixed(5) + ','+ ll.lon.toFixed(5) +') '; - infoElm.innerHTML += 'Map type: ' + m.getMapType() + ' '; - infoElm.innerHTML += 'Zoom: ' + m.getZoom() + ' '; - } + desc: 'Get info', + action: function(){ + infoElm.innerHTML = 'Info '; + var bb = m.getBounds(); + infoElm.innerHTML += 'Bounds: SW(' + bb.sw.lat.toFixed(5) + ','+ bb.sw.lon.toFixed(5) +') NE(' + bb.ne.lat.toFixed(5) + ','+ bb.ne.lon.toFixed(5) +') '; + var ll = m.getCenter(); + infoElm.innerHTML += 'Center: (' + ll.lat.toFixed(5) + ','+ ll.lon.toFixed(5) +') '; + infoElm.innerHTML += 'Map type: ' + m.getMapType() + ' '; + infoElm.innerHTML += 'Zoom: ' + m.getZoom() + ' '; + } }, { - desc: 'Set zoom', - action: function(){ - m.setZoom(8); - } + 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', + 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: '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: '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: '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: 'Add controls', + action: function() { + m.addLargeControls(); + m.addControls({ + pan: true, + zoom: 'small', + overview: true, + scale: true, + map_type: true, + }); + } }, - { - desc: 'Swap API (yahoo)', - action: function(){ - m.swap('map', 'yahoo'); - } - }, - { - desc: 'Swap API (microsoft)', - action: function(){ - m.swap('map', 'microsoft'); - } - }, - { - desc: 'Swap API (openlayers)', - action: function(){ - m.swap('map', 'openlayers'); - } - }, - + { + desc: 'Add Base map type', + action: function() { + m.addTileLayer("http://tile.openstreetmap.org/{Z}/{X}/{Y}.png", 1.0, "OSM", 1, 19, true); + // m.setMapType("OSM"); + } + }, + { + desc: 'Swap API (yahoo)', + action: function(){ + m.swap('map', 'yahoo'); + } + }, + { + desc: 'Swap API (microsoft)', + action: function(){ + m.swap('map', 'microsoft'); + } + }, + { + desc: 'Swap API (openlayers)', + action: function(){ + m.swap('map', 'openlayers'); + } + }, + { desc: 'Done.', action: function(){} } ]; tests/index.htm 4ae04d35ad6397af4bb28b9237fa4f55b64fa351 Andrew Turner andrew@highearthorbit.com http://github.com/mapstraction/mxn/commit/67404e4f47d245e58373e980a604469048ad3f5b 67404e4f47d245e58373e980a604469048ad3f5b

2009-10-03T09:26:11-07:00

Fixed OpenLayers controls to work with Small/Large zoom and pan. Extended Google tile support for Map type or just base tiles option f3b5da1470bd7e3d74484f38601f1157a2506aab Andrew Turner andrew@highearthorbit.com