mapstraction.js

extjs + mysql + java

// (c)2007 Mapstraction Team- http://mapstraction.com

function $m() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string')
element = document.getElementById(element); if (arguments.length == 1)
return element; elements.push(element);}
return elements;}
function loadScript(src,callback) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; if (callback) { var evl=new Object(); evl.handleEvent=function (e){callback();}; script.addEventListener('load',evl,true);}
document.getElementsByTagName("head")[0].appendChild(script); return;}
function convertLatLonXY_Yahoo(point,level){ var size = 1 << (26 - level); var pixel_per_degree = size / 360.0; var pixel_per_radian = size / (2 * Math.PI); var origin = new YCoordPoint(size / 2 , size / 2); var answer = new YCoordPoint(); answer.x = Math.floor(origin.x + point.lon * pixel_per_degree); var sin = Math.sin(point.lat * Math.PI / 180.0); answer.y = Math.floor(origin.y + 0.5 * Math.log((1 + sin) / (1 - sin)) * -pixel_per_radian); return answer;}
function loadStyle(href) { var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = href; document.getElementsByTagName("head")[0].appendChild(link); return;}
function getStyle(el, prop) { var y; if (el.currentStyle)
y = el.currentStyle[prop]; else if (window.getComputedStyle)
y = window.getComputedStyle( el, '').getPropertyValue(prop); return y;}
function lonToMetres (lon,lat) { return lon * 111200 * Math.cos(lat * (Math.PI/180));}
function metresToLon(m,lat) { return m / (111200*Math.cos(lat * (Math.PI/180)));}
function getDegreesFromGoogleZoomLevel (pixels,zoom)
{ return (360*pixels) / (Math.pow(2,zoom+8));}
function getGoogleZoomLevelFromDegrees (pixels,degrees)
{ return logN ((360*pixels)/degrees, 2) - 8;}
function logN (number,base)
{ return Math.log(number) / Math.log(base);}
function Mapstraction(element,api,debug) { this.api = api; this.maps = new Object(); this.currentElement = $m(element); this.eventListeners = new Array(); this.markers = new Array(); this.layers = new Array(); this.polylines = new Array(); this.images = new Array(); this.loaded = new Object(); this.onload = new Object(); if(debug == true)
{ this.debug = true
}
else
{ this.debug = false
}
this.svn_revision_string = '$Revision: 173 $'; this.addControlsArgs = new Object(); if (this.currentElement)
{ this.addAPI($m(element),api);}
}
Mapstraction.prototype.swap = function(element,api) { if (this.api == api) { return;}
var center = this.getCenter(); var zoom = this.getZoom(); this.currentElement.style.visibility = 'hidden'; this.currentElement.style.display = 'none'; this.currentElement = $m(element); this.currentElement.style.visibility = 'visible'; this.currentElement.style.display = 'block'; this.api = api; if (this.maps[this.api] == undefined) { this.addAPI($m(element),api); this.setCenterAndZoom(center,zoom); for (var i=0; i<this.markers.length; i++) { this.addMarker( this.markers[i], true);}
for (var i=0; i<this.polylines.length; i++) { this.addPolyline( this.polylines[i], true);}
}else{ this.setCenterAndZoom(center,zoom);}
this.addControls(this.addControlsArgs);}
Mapstraction.prototype.addAPI = function(element,api) { me = this; this.loaded[api] = false; this.onload[api] = new Array(); switch (api) { case 'yahoo':
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('Yahoo map script not imported');}
break; case 'google':
if (GMap2) { if (GBrowserIsCompatible()) { this.maps[api] = new GMap2(element); GEvent.addListener(this.maps[api], 'click', function(marker,location) { if ( location ) { me.clickHandler(location.y,location.x,location,me);}
}); GEvent.addListener(this.maps[api], 'moveend', function() {me.moveendHandler(me)}); this.loaded[api] = true;}
else { alert('browser not compatible with Google Maps');}
}
else { alert('Google map script not imported');}
break; case 'microsoft':
if (VEMap) { element.style.position='relative'; var msft_width = parseFloat(getStyle($m(element),'width')); var msft_height = parseFloat(getStyle($m(element),'height')); var ffv = 0; var ffn = "Firefox/"; var ffp = navigator.userAgent.indexOf(ffn); if (ffp != -1) ffv = parseFloat(navigator.userAgent.substring(ffp+ffn.length)); if (ffv >= 1.5) { Msn.Drawing.Graphic.CreateGraphic=function(f,b) { return new Msn.Drawing.SVGGraphic(f,b) }
}
this.maps[api] = new VEMap(element.id); this.maps[api].LoadMap(); this.maps[api].AttachEvent("onclick", function(e) { me.clickHandler(e.view.LatLong.Latitude, e.view.LatLong.Longitude, me);}); this.maps[api].AttachEvent("onchangeview", function(e) {me.moveendHandler(me)}); this.resizeTo(msft_width, msft_height); this.loaded[api] = true;}
else { alert('Virtual Earth script not imported');}
break; case 'openlayers':
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']); this.loaded[api] = true; break; case 'openstreetmap':
if (GMap2) { if (GBrowserIsCompatible()) { this.maps[api] = new GMap2(element); GEvent.addListener(this.maps[api], 'click', function(marker,location) { if ( location ) { me.clickHandler(location.y,location.x,location,me);}
}); GEvent.addListener(this.maps[api], 'moveend', function() {me.moveendHandler(me)}); var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0, "copyleft"); var copyrightCollection = new GCopyrightCollection('OSM'); copyrightCollection.addCopyright(copyright); var tilelayers = new Array(); tilelayers[0] = new GTileLayer(copyrightCollection, 1, 18); tilelayers[0].getTileUrl = function (a, b) { return "http://tile.openstreetmap.org/"+b+"/"+a.x+"/"+a.y+".png";}; tilelayers[0].isPng = function() { return true;}; tilelayers[0].getOpacity = function() { return 1.0;}
var custommap = new GMapType(tilelayers, new GMercatorProjection(19), "OSM", {errorMessage:"More OSM coming soon"}); this.maps[api].addMapType(custommap); this.loaded[api] = true; var myPoint = new LatLonPoint(50.6805,-1.4062505); this.setCenterAndZoom(myPoint, 11); this.maps[api].setMapType(custommap);}
else { alert('browser not compatible with Google Maps');}
}
else { alert('Google map script not imported');}
break; case 'multimap':
this.maps[api] = new MultimapViewer( element ); this.maps[api].addEventHandler( 'click', function(eventType, eventTarget, arg1, arg2, arg3) { if (arg1) { me.clickHandler(arg1.lat, arg1.lon, me);}
}); this.maps[api].addEventHandler( 'changeZoom', function(eventType, eventTarget, arg1, arg2, arg3) { me.moveendHandler(me);}); this.maps[api].addEventHandler( 'endPan', function(eventType, eventTarget, arg1, arg2, arg3) { me.moveendHandler(me);}); this.loaded[api] = true; break; case 'map24':
if (Map24) { Map24.loadApi(["core_api","wrapper_api"] , function() { Map24.MapApplication.init
( { NodeName: element.id, MapType: "Static" } ); me.maps[api] = Map24.MapApplication.Map; Map24.MapApplication.Map.addListener('Map24.Event.MapClick', function(e) { me.clickHandler(e.Coordinate.Latitude/60, e.Coordinate.Longitude/60, me); e.stop();} ); Map24.MapApplication.Map.addListener("MapPanStop", function(e) { me.moveendHandler(me);} ); var client=Map24.MapApplication.Map.MapClient['Static']; me.loaded[api] = true; for (var i = 0; i < me.onload[api].length; i++) { me.onload[api][i]();}
}, "2.0.1247" );} else { alert('map24 api not loaded');}
break; case 'mapquest':
myself = this; MQInitOverlays( function() { myself.loaded[api] = true; myself.maps[api] = new MQTileMap(element); for (var i = 0; i < myself.onload[api].length; i++) { myself.onload[api][i]();}
}); break; case 'freeearth':
this.maps[api] = new FE.Map($m(element)); myself = this; this.maps[api].onLoad = function() { myself.freeEarthLoaded = true; myself.loaded[api] = true; for (var i = 0; i < myself.onload[api].length; i++) { myself.onload[api][i]();}
}
this.maps[api].load(); break; default:
if(this.debug)
alert(api + ' not supported by mapstraction');}
}
Mapstraction._getScriptLocation=function(){ var scriptLocation=""; var SCRIPT_NAME = "mapstraction.js"; var scripts=document.getElementsByTagName('script'); for(var i=0; i<scripts.length; i++) { var src=scripts[i].getAttribute('src'); if(src) { var index=src.lastIndexOf(SCRIPT_NAME); if((index>-1)&&(index+SCRIPT_NAME.length==src.length)){scriptLocation=src.slice(0,-SCRIPT_NAME.length); break;}
}
}
return scriptLocation;}
Mapstraction.writeInclude = function(api, key, version) { var jsfiles=new Array(); var allScriptTags=""; var host=Mapstraction._getScriptLocation()+"lib/"; switch(api) { case 'google':
if(version == null) { version = "2";}
jsfiles.push('http://maps.google.com/maps?file=api&v=' + version + '&key=' + key); break; case "microsoft":
if(version == null) { version = "v3";}
jsfiles.push('http://dev.virtualearth.net/mapcontrol/' + version + '/mapcontrol.js'); break; case "yahoo":
if(version == null) { version = "3.0";}
jsfiles.push('http://api.maps.yahoo.com/ajaxymap?v='+ version + '&appid=' + key); break; case "openlayers":
jsfiles.push('http://openlayers.org/api/OpenLayers.js'); break; case "multimap":
if(version == null) { version = "1.2";}
jsfiles.push('http://developer.multimap.com/API/maps/' + version + '/' + key); break; case "map24":
jsfiles.push('http://api.maptp.map24.com/ajax?appkey=' + key); break; case "mapquest":
if(version == null) { version = "5.1";}
jsfiles.push('http://btilelog.access.mapquest.com/tilelog/transaction?transaction=script&key=' + key + '&ipr=true&itk=true&v=' + version); jsfiles.push('mapquest-js/mqcommon.js'); jsfiles.push('mapquest-js/mqutils.js'); jsfiles.push('mapquest-js/mqobjects.js'); jsfiles.push('mapquest-js/mqexec.js'); break; case "freeearth":
jsfiles.push('http://freeearth.poly9.com/api.js');}
for(var i=0; i<jsfiles.length; i++) { if(/MSIE/.test(navigator.userAgent)||/Safari/.test(navigator.userAgent)) { var currentScriptTag = jsfiles[i]; allScriptTags += currentScriptTag;} else { var s=document.createElement("script"); s.src=jsfiles[i]; s.type="text/javascript"; var h=document.getElementsByTagName("head").length ? document.getElementsByTagName("head")[0] : document.body; h.appendChild(s);}
}
if(allScriptTags) document.write(allScriptTags);}
Mapstraction.prototype.isLoaded = function(api){ if(api == null)
api = this.api; return this.loaded[api];}
Mapstraction.prototype.setDebug = function(debug){ if(debug != null)
return this.debug = debug; else
return this.debug;}
Mapstraction.prototype.resizeTo = function(width,height){ if(this.loaded[this.api] == false) { myself = this; this.onload[this.api].push( function() { myself.resizeTo(width,height);} ); return;}
switch (this.api) { case 'yahoo':
this.maps[this.api].resizeTo(new YSize(width,height)); break; case 'google':
case 'openstreetmap':
this.currentElement.style.width = width; this.currentElement.style.height = height; this.maps[this.api].checkResize(); break; case 'openlayers':
this.currentElement.style.width = width; this.currentElement.style.height = height; this.maps[this.api].updateSize(); break; case 'microsoft':
this.maps[this.api].Resize(width, height); break; case 'multimap':
this.currentElement.style.width = width; this.currentElement.style.height = height; this.maps[this.api].resize(); break; case 'mapquest':
this.currentElement.style.width = width; this.currentElement.style.height = height; this.maps[this.api].setSize(new MQSize(width, height)); break; case 'map24':
Map24.MapApplication.Map.Canvas['c'].resizeTo(width,height); break;}
}
Mapstraction.prototype.clickHandler = function(lat,lon, me) { for(var i = 0; i < this.eventListeners.length; i++) { if(this.eventListeners[i][1] == 'click') { this.eventListeners[i][0](new LatLonPoint(lat,lon));}
}
}
Mapstraction.prototype.moveendHandler = function(me) { for(var i = 0; i < this.eventListeners.length; i++) { if(this.eventListeners[i][1] == 'moveend') { this.eventListeners[i][0]();}
}
}
Mapstraction.prototype.addEventListener = function(type, func) { var listener = new Array(); listener.push(func); listener.push(type); this.eventListeners.push(listener); switch (this.api) { case 'openlayers':
this.maps[this.api].events.register(type, this, func); break;}
}
Mapstraction.prototype.addControls = function( args ) { if(this.loaded[this.api] == false) { myself = this; this.onload[this.api].push( function() { myself.addControls(args);} ); return;}
var map = this.maps[this.api]; this.addControlsArgs = args; switch (this.api) { case 'google':
case 'openstreetmap':
if (this.controls) { while (ctl = this.controls.pop()) { map.removeControl(ctl);}
} else { this.controls = new Array();}
c = this.controls; if ( args.zoom || args.pan ) { if ( args.zoom == 'large' ) { c.unshift(new GLargeMapControl()); map.addControl(c[0]);} else { c.unshift(new GSmallMapControl()); map.addControl(c[0]);}
}
if ( args.scale ) { c.unshift(new GScaleControl()); map.addControl(c[0]);}
if (this.api != "openstreetmap") { if ( args.overview ) { c.unshift(new GOverviewMapControl()); map.addControl(c[0]);}
if ( args.map_type ) { c.unshift(new GMapTypeControl()); map.addControl(c[0]);}
}
break; case 'yahoo':
if ( args.pan ) map.addPanControl(); else map.removePanControl(); if ( args.zoom == 'large' ) map.addZoomLong(); else if ( args.zoom == 'small' ) map.addZoomShort(); else map.removeZoomScale(); break; case 'openlayers':
for (var i = map.controls.length; i>1; i--) { map.controls[i-1].deactivate(); map.removeControl(map.controls[i-1]);}
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());}
break; case 'multimap':
pan_zoom_widget = "MM"; if (args.zoom && args.zoom == "small") { pan_zoom_widget = pan_zoom_widget + "Small";}
if (args.pan) { pan_zoom_widget = pan_zoom_widget + "Pan";}
if (args.zoom) { pan_zoom_widget = pan_zoom_widget + "Zoom";}
pan_zoom_widget = pan_zoom_widget + "Widget"; if (pan_zoom_widget != "MMWidget") { eval(" map.addWidget( new " + pan_zoom_widget + "() );");}
if ( args.map_type ) { map.addWidget( new MMMapTypeWidget() );}
if ( args.overview ) { map.addWidget( new MMOverviewWidget() );}
break; case 'mapquest':