444 lines
13 KiB
JavaScript
444 lines
13 KiB
JavaScript
|
mxn.register('googlev3', {
|
||
|
|
|
||
|
|
Mapstraction: {
|
||
|
|
|
||
|
|
init: function(element, api){
|
||
|
|
var me = this;
|
||
|
|
if ( google && google.maps ){
|
||
|
|
// by default no controls and road map
|
||
|
|
var myOptions = {
|
||
|
|
disableDefaultUI: true,
|
||
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||
|
|
};
|
||
|
|
var map = new google.maps.Map(element, myOptions);
|
||
|
|
|
||
|
|
// deal with click
|
||
|
|
google.maps.event.addListener(map, 'click', function(location){
|
||
|
|
me.clickHandler(location.latLng.lat(),location.latLng.lng(),location,me);
|
||
|
|
});
|
||
|
|
|
||
|
|
// deal with zoom change
|
||
|
|
google.maps.event.addListener(map, 'zoom_changed', function(){
|
||
|
|
me.changeZoom.fire();
|
||
|
|
});
|
||
|
|
// deal with map movement
|
||
|
|
google.maps.event.addListener(map, 'dragend', function(){
|
||
|
|
me.moveendHandler(me);
|
||
|
|
me.endPan.fire();
|
||
|
|
});
|
||
|
|
this.maps[api] = map;
|
||
|
|
this.loaded[api] = true;
|
||
|
|
me.load.fire();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
alert(api + ' map script not imported');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
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;
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
google.maps.event.trigger(map,'resize');
|
||
|
|
},
|
||
|
|
|
||
|
|
addControls: function( args ) {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
// remove old controls
|
||
|
|
|
||
|
|
// Google has a combined zoom and pan control.
|
||
|
|
if (args.zoom || args.pan) {
|
||
|
|
if (args.zoom == 'large'){
|
||
|
|
this.addLargeControls();
|
||
|
|
} else {
|
||
|
|
this.addSmallControls();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (args.scale){
|
||
|
|
var myOptions = {
|
||
|
|
scaleControl:true,
|
||
|
|
scaleControlOptions: {style:google.maps.ScaleControlStyle.DEFAULT}
|
||
|
|
};
|
||
|
|
map.setOptions(myOptions);
|
||
|
|
this.addControlsArgs.scale = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
addSmallControls: function() {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var myOptions = {
|
||
|
|
navigationControl: true,
|
||
|
|
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
|
||
|
|
};
|
||
|
|
map.setOptions(myOptions);
|
||
|
|
|
||
|
|
this.addControlsArgs.pan = false;
|
||
|
|
this.addControlsArgs.scale = false;
|
||
|
|
this.addControlsArgs.zoom = 'small';
|
||
|
|
},
|
||
|
|
|
||
|
|
addLargeControls: function() {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var myOptions = {
|
||
|
|
navigationControl:true,
|
||
|
|
navigationControlOptions: {style:google.maps.NavigationControlStyle.DEFAULT}
|
||
|
|
};
|
||
|
|
map.setOptions(myOptions);
|
||
|
|
this.addControlsArgs.pan = true;
|
||
|
|
this.addControlsArgs.zoom = 'large';
|
||
|
|
},
|
||
|
|
|
||
|
|
addMapTypeControls: function() {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var myOptions = {
|
||
|
|
mapTypeControl: true,
|
||
|
|
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT}
|
||
|
|
};
|
||
|
|
map.setOptions(myOptions);
|
||
|
|
this.addControlsArgs.map_type = true;
|
||
|
|
},
|
||
|
|
|
||
|
|
setCenterAndZoom: function(point, zoom) {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var pt = point.toProprietary(this.api);
|
||
|
|
map.setCenter(pt);
|
||
|
|
map.setZoom(zoom);
|
||
|
|
},
|
||
|
|
|
||
|
|
addMarker: function(marker, old) {
|
||
|
|
return marker.toProprietary(this.api);
|
||
|
|
},
|
||
|
|
|
||
|
|
removeMarker: function(marker) {
|
||
|
|
// doesn't really remove them, just hides them
|
||
|
|
marker.hide();
|
||
|
|
},
|
||
|
|
|
||
|
|
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];
|
||
|
|
return polyline.toProprietary(this.api);
|
||
|
|
},
|
||
|
|
|
||
|
|
removePolyline: function(polyline) {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
// TODO: Add provider code
|
||
|
|
},
|
||
|
|
|
||
|
|
getCenter: function() {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var pt = map.getCenter();
|
||
|
|
return new mxn.LatLonPoint(pt.lat(),pt.lng());
|
||
|
|
},
|
||
|
|
|
||
|
|
setCenter: function(point, options) {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var pt = point.toProprietary(this.api);
|
||
|
|
if(options && options.pan) {
|
||
|
|
map.panTo(pt);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
map.setCenter(pt);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
setZoom: function(zoom) {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
map.setZoom(zoom);
|
||
|
|
},
|
||
|
|
|
||
|
|
getZoom: function() {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
return map.getZoom();
|
||
|
|
},
|
||
|
|
|
||
|
|
getZoomLevelForBoundingBox: function( bbox ) {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var sw = bbox.getSouthWest().toProprietary(this.api);
|
||
|
|
var ne = bbox.getNorthEast().toProprietary(this.api);
|
||
|
|
var gLatLngBounds = new google.maps.LatLngBounds(sw, ne);
|
||
|
|
map.fitBounds(gLatLngBounds);
|
||
|
|
return map.getZoom();
|
||
|
|
},
|
||
|
|
|
||
|
|
setMapType: function(type) {
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
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];
|
||
|
|
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 gLatLngBounds = map.getBounds();
|
||
|
|
var sw = gLatLngBounds.getSouthWest();
|
||
|
|
var ne = gLatLngBounds.getNorthEast();
|
||
|
|
return new mxn.BoundingBox(sw.lat(), sw.lng(), ne.lat(), ne.lng());
|
||
|
|
},
|
||
|
|
|
||
|
|
setBounds: function(bounds){
|
||
|
|
var map = this.maps[this.api];
|
||
|
|
var sw = bounds.getSouthWest().toProprietary(this.api);
|
||
|
|
var ne = bounds.getNorthEast().toProprietary(this.api);
|
||
|
|
var gLatLngBounds = new google.maps.LatLngBounds(sw, ne);
|
||
|
|
map.fitBounds(gLatLngBounds);
|
||
|
|
},
|
||
|
|
|
||
|
|
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, map_type) {
|
||
|
|
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() {
|
||
|
|
return new google.maps.LatLng(this.lat, this.lon);
|
||
|
|
},
|
||
|
|
|
||
|
|
fromProprietary: function(googlePoint) {
|
||
|
|
this.lat = googlePoint.lat();
|
||
|
|
this.lon = googlePoint.lng();
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
Marker: {
|
||
|
|
|
||
|
|
toProprietary: function() {
|
||
|
|
var options = {};
|
||
|
|
|
||
|
|
// do we have an Anchor?
|
||
|
|
var ax = 0; // anchor x
|
||
|
|
var ay = 0; // anchor y
|
||
|
|
|
||
|
|
if (this.iconAnchor) {
|
||
|
|
ax = this.iconAnchor[0];
|
||
|
|
ay = this.iconAnchor[1];
|
||
|
|
}
|
||
|
|
var gAnchorPoint = new google.maps.Point(ax,ay);
|
||
|
|
|
||
|
|
if (this.iconUrl) {
|
||
|
|
options.icon = new google.maps.MarkerImage(
|
||
|
|
this.iconUrl,
|
||
|
|
new google.maps.Size(this.iconSize[0],
|
||
|
|
this.iconSize[1]),
|
||
|
|
new google.maps.Point(0,0),
|
||
|
|
gAnchorPoint
|
||
|
|
);
|
||
|
|
|
||
|
|
// do we have a Shadow?
|
||
|
|
if (this.iconShadowUrl) {
|
||
|
|
if (this.iconShadowSize) {
|
||
|
|
var x = this.iconShadowSize[0];
|
||
|
|
var y = this.iconShadowSize[1];
|
||
|
|
options.shadow = new google.maps.MarkerImage(
|
||
|
|
this.iconShadowUrl,
|
||
|
|
new google.maps.Size(x,y),
|
||
|
|
new google.maps.Point(0,0),
|
||
|
|
gAnchorPoint
|
||
|
|
);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
options.shadow = new google.maps.MarkerImage(this.iconShadowUrl);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.draggable){
|
||
|
|
options.draggable = this.draggable;
|
||
|
|
}
|
||
|
|
if (this.labelText){
|
||
|
|
options.title = this.labelText;
|
||
|
|
}
|
||
|
|
if (this.imageMap){
|
||
|
|
options.shape = {
|
||
|
|
coord: this.imageMap,
|
||
|
|
type: 'poly'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
options.position = this.location.toProprietary(this.api);
|
||
|
|
options.map = this.map;
|
||
|
|
|
||
|
|
var marker = new google.maps.Marker(options);
|
||
|
|
|
||
|
|
if (this.infoBubble){
|
||
|
|
var infowindow = new google.maps.InfoWindow({
|
||
|
|
content: this.infoBubble
|
||
|
|
});
|
||
|
|
|
||
|
|
var event_action = "click";
|
||
|
|
if (this.hover) {
|
||
|
|
event_action = "mouseover";
|
||
|
|
}
|
||
|
|
google.maps.event.addListener(marker, event_action, function() { infowindow.open(this.map,marker); });
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.hoverIconUrl){
|
||
|
|
var gSize = new google.maps.Size(this.iconSize[0],
|
||
|
|
this.iconSize[1]);
|
||
|
|
var zerozero = new google.maps.Point(0,0);
|
||
|
|
var hIcon = new google.maps.MarkerImage(
|
||
|
|
this.hoverIconUrl,
|
||
|
|
gSize,
|
||
|
|
zerozero,
|
||
|
|
gAnchorPoint
|
||
|
|
);
|
||
|
|
var Icon = new google.maps.MarkerImage(
|
||
|
|
this.iconUrl,
|
||
|
|
gSize,
|
||
|
|
zerozero,
|
||
|
|
gAnchorPoint
|
||
|
|
);
|
||
|
|
google.maps.event.addListener(
|
||
|
|
marker,
|
||
|
|
"mouseover",
|
||
|
|
function(){
|
||
|
|
marker.setIcon(hIcon);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
google.maps.event.addListener(
|
||
|
|
marker,
|
||
|
|
"mouseout",
|
||
|
|
function(){ marker.setIcon(Icon); }
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
google.maps.event.addListener(marker, 'click', function() {
|
||
|
|
marker.mapstraction_marker.click.fire();
|
||
|
|
});
|
||
|
|
|
||
|
|
return marker;
|
||
|
|
},
|
||
|
|
|
||
|
|
openBubble: function() {
|
||
|
|
var infowindow = new google.maps.InfoWindow({
|
||
|
|
content: this.infoBubble
|
||
|
|
});
|
||
|
|
infowindow.open(this.map,this.proprietary_marker);
|
||
|
|
},
|
||
|
|
|
||
|
|
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() {
|
||
|
|
throw 'Not implemented';
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function() {
|
||
|
|
throw 'Not implemented';
|
||
|
|
},
|
||
|
|
|
||
|
|
hide: function() {
|
||
|
|
throw 'Not implemented';
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|