' : '\n' : this.HTML ? ' ' : ' '; }, indent: function( extra ) {// extra can be a number, shortcut for increasing-calling-decreasing if ( !this.multiline ) { return ''; } var chr = this.indentChar; if ( this.HTML ) { chr = chr.replace(/\t/g,' ').replace(/ /g,' '); } return new Array( this._depth_ + (extra||0) ).join(chr); }, up: function( a ) { this._depth_ += a || 1; }, down: function( a ) { this._depth_ -= a || 1; }, setParser: function( name, parser ) { this.parsers[name] = parser; }, // The next 3 are exposed so you can use them quote: quote, literal: literal, join: join, // _depth_: 1, // This is the list of parsers, to modify them, use jsDump.setParser parsers: { window: '[Window]', document: '[Document]', error: '[ERROR]', //when no parser is found, shouldn't happen unknown: '[Unknown]', 'null': 'null', 'undefined': 'undefined', 'function': function( fn ) { var ret = 'function', name = 'name' in fn ? fn.name : (reName.exec(fn)||[])[1];//functions never have name in IE if ( name ) { ret += ' ' + name; } ret += '('; ret = [ ret, QUnit.jsDump.parse( fn, 'functionArgs' ), '){'].join(''); return join( ret, QUnit.jsDump.parse(fn,'functionCode'), '}' ); }, array: array, nodelist: array, 'arguments': array, object: function( map, stack ) { var ret = [ ], keys, key, val, i; QUnit.jsDump.up(); if (Object.keys) { keys = Object.keys( map ); } else { keys = []; for (key in map) { keys.push( key ); } } keys.sort(); for (i = 0; i < keys.length; i++) { key = keys[ i ]; val = map[ key ]; ret.push( QUnit.jsDump.parse( key, 'key' ) + ': ' + QUnit.jsDump.parse( val, undefined, stack ) ); } QUnit.jsDump.down(); return join( '{', ret, '}' ); }, node: function( node ) { var open = QUnit.jsDump.HTML ? '<' : '<', close = QUnit.jsDump.HTML ? '>' : '>'; var tag = node.nodeName.toLowerCase(), ret = open + tag; for ( var a in QUnit.jsDump.DOMAttrs ) { var val = node[QUnit.jsDump.DOMAttrs[a]]; if ( val ) { ret += ' ' + a + '=' + QUnit.jsDump.parse( val, 'attribute' ); } } return ret + close + open + '/' + tag + close; }, functionArgs: function( fn ) {//function calls it internally, it's the arguments part of the function var l = fn.length; if ( !l ) { return ''; } var args = new Array(l); while ( l-- ) { args[l] = String.fromCharCode(97+l);//97 is 'a' } return ' ' + args.join(', ') + ' '; }, key: quote, //object calls it internally, the key part of an item in a map functionCode: '[code]', //function calls it internally, it's the content of the function attribute: quote, //node calls it internally, it's an html attribute value string: quote, date: quote, regexp: literal, //regex number: literal, 'boolean': literal }, DOMAttrs:{//attributes to dump from nodes, name=>realName id:'id', name:'name', 'class':'className' }, HTML:false,//if true, entities are escaped ( <, >, \t, space and \n ) indentChar:' ',//indentation unit multiline:true //if true, items in a collection, are separated by a \n, else just a space. }; return jsDump; }()); // from Sizzle.js function getText( elems ) { var ret = "", elem; for ( var i = 0; elems[i]; i++ ) { elem = elems[i]; // Get the text from text nodes and CDATA nodes if ( elem.nodeType === 3 || elem.nodeType === 4 ) { ret += elem.nodeValue; // Traverse everything else, except comment nodes } else if ( elem.nodeType !== 8 ) { ret += getText( elem.childNodes ); } } return ret; } //from jquery.js function inArray( elem, array ) { if ( array.indexOf ) { return array.indexOf( elem ); } for ( var i = 0, length = array.length; i < length; i++ ) { if ( array[ i ] === elem ) { return i; } } return -1; } /* * Javascript Diff Algorithm * By John Resig (http://ejohn.org/) * Modified by Chu Alan "sprite" * * Released under the MIT license. * * More Info: * http://ejohn.org/projects/javascript-diff-algorithm/ * * Usage: QUnit.diff(expected, actual) * * QUnit.diff("the quick brown fox jumped over", "the quick fox jumps over") == "the quick
"
}
],
tilingScheme: {
tileWidth: 256,
tileHeight: 256,
levels: 18,
basePixelSize: 156543.03392799936,
origin: [-20037508.342787, 20037508.342787]
},
axisLayout: "map",
zoom: 0,
zoomMin: 0,
zoomMax: Number.POSITIVE_INFINITY,
pixelSize: 0
};
$.widget("geo.geomap", {
// private widget members
_$elem: undefined, //< map div for maps, service div for services
_map: undefined, //< only defined in services
_created: false,
_createdGraphics: false,
_widgetId: 0,
_tmplLengthId: "",
_tmplAreaId: "",
_contentBounds: {},
_$resizeContainer: undefined, //< all elements that should match _contentBounds' size
_$eventTarget: undefined,
_$contentFrame: undefined,
_$existingChildren: undefined,
_$attrList: undefined,
_$servicesContainer: undefined,
_$shapesContainers: undefined, //< all shapesContainer divs (map only)
_$panContainer: undefined, //< all non-service elements that move while panning
_$shapesContainer: undefined, //< just "our" shapesContainer div (map & service)
_$drawContainer: undefined,
_$measureContainer: undefined,
_$measureLabel: undefined,
_dpi: 96,
_currentServices: [], //< internal copy
_center: undefined,
_pixelSize: undefined,
_centerMax: undefined,
_pixelSizeMax: undefined,
_userGeodetic: true,
_centerInteractive: undefined,
_pixelSizeInteractive: undefined,
_timeoutInteractive: null,
_triggerInteractive: false,
_loadCount: 0,
_wheelTimeout: null,
_wheelLevel: 0,
_zoomFactor: 2, //< determines what a zoom level means
_fullZoomFactor: 2, //< interactiveScale factor needed to zoom a whole level
_partialZoomFactor: 1.18920711500273, //< interactiveScale factor needed to zoom a fraction of a level (the fourth root of 2)
_mouseDown: undefined,
_inOp: undefined,
_toolPan: undefined,
_shiftDown: undefined,
_anchor: undefined,
_current: undefined,
_downDate: undefined,
_moveDate: undefined,
_clickDate: undefined,
_lastMove: undefined,
_lastDrag: undefined,
_windowHandler: null,
_resizeTimeout: null,
_panning: undefined,
_velocity: undefined,
_friction: undefined,
_supportTouch: undefined,
_softDblClick: undefined,
_isTap: undefined,
_isDbltap: undefined,
_isMultiTouch: undefined,
_multiTouchAnchor: [], //< TouchList
_multiTouchAnchorBbox: undefined, //< bbox
_multiTouchCurrentBbox: undefined, //< bbox
_drawTimeout: null, //< used in drawPoint mode so we don't send two shape events on dbltap
_drawPixels: [], //< an array of coordinate arrays for drawing lines & polygons, in pixel coordinates
_drawCoords: [],
_graphicShapes: [], //< an array of objects containing style object refs & GeoJSON object refs
_initOptions: {},
_options: {},
options: $.extend({}, _defaultOptions),
_createWidget: function (options, element) {
this._$elem = $(element);
if (this._$elem.is(".geo-service")) {
this._graphicShapes = [];
$.Widget.prototype._createWidget.apply(this, arguments);
return;
}
this._widgetId = _widgetIdSeed++;
this._tmplLengthId = "geoMeasureLength" + this._widgetId;
this._tmplAreaId = "geoMeasureArea" + this._widgetId;
this._$elem.addClass("geo-map").css( {
webkitTransform: "translateZ(0)"
} );
this._initOptions = options || {};
this._forcePosition(this._$elem);
this._$elem.css("text-align", "left");
var size = this._findMapSize();
this._contentBounds = {
x: parseInt(this._$elem.css("padding-left"), 10),
y: parseInt(this._$elem.css("padding-top"), 10),
width: size["width"],
height: size["height"]
};
this._createChildren();
this._center = [ 0, 0 ];
this._centerMax = [ 0, 0 ];
this._centerInteractive = [ 0, 0 ];
this.options["pixelSize"] = this._pixelSize = this._pixelSizeMax = 156543.03392799936;
this._mouseDown =
this._inOp =
this._toolPan =
this._shiftDown =
this._panning =
this._isTap =
this._isDbltap = false;
this._anchor = [ 0, 0 ];
this._current = [ 0, 0 ];
this._lastMove = [ 0, 0 ];
this._lastDrag = [ 0, 0 ];
this._velocity = [ 0, 0 ];
this._friction = [0.8, 0.8];
this._downDate =
this._moveDate =
this._clickDate = 0;
this._drawPixels = [];
this._drawCoords = [];
this._graphicShapes = [];
$.Widget.prototype._createWidget.apply(this, arguments);
},
_create: function () {
this._options = this.options;
if (this._$elem.is(".geo-service")) {
this._map = this._$elem.data( "geoMap" );
this._$elem.data( "geoService", this );
return;
}
this._map = this;
this._supportTouch = "ontouchend" in document;
this._softDblClick = this._supportTouch || _ieVersion == 7;
var geomap = this,
touchStartEvent = this._supportTouch ? "touchstart" : "mousedown",
touchStopEvent = this._supportTouch ? "touchend touchcancel" : "mouseup",
touchMoveEvent = this._supportTouch ? "touchmove" : "mousemove";
$(document).keydown($.proxy(this._document_keydown, this));
this._$eventTarget.dblclick($.proxy(this._eventTarget_dblclick, this));
this._$eventTarget.bind(touchStartEvent, $.proxy(this._eventTarget_touchstart, this));
var dragTarget = (this._$eventTarget[0].setCapture) ? this._$eventTarget : $(document);
dragTarget.bind(touchMoveEvent, $.proxy(this._dragTarget_touchmove, this));
dragTarget.bind(touchStopEvent, $.proxy(this._dragTarget_touchstop, this));
this._$eventTarget.mousewheel($.proxy(this._eventTarget_mousewheel, this));
this._windowHandler = function () {
if (geomap._resizeTimeout) {
clearTimeout(geomap._resizeTimeout);
}
geomap._resizeTimeout = setTimeout(function () {
if (geomap._created) {
geomap._$elem.geomap( "resize", true );
}
}, 500);
};
$(window).resize(this._windowHandler);
this._$drawContainer.geographics({ style: this._initOptions.drawStyle || {} });
this._options["drawStyle"] = this._$drawContainer.geographics("option", "style");
this._$shapesContainer.geographics( { style: this._initOptions.shapeStyle || { } } );
this._createdGraphics = true;
this._options["shapeStyle"] = this._$shapesContainer.geographics("option", "style");
if (this._initOptions) {
// always init tilingScheme right away, even if it's null
if ( this._initOptions.tilingScheme !== undefined ) {
this._setOption("tilingScheme", this._initOptions.tilingScheme || null, false);
}
if ( this._initOptions.services ) {
// jQuery UI Widget Factory merges user services with our default, we want to clobber the default
this._options[ "services" ] = $.merge( [ ], this._initOptions.services );
}
if (this._initOptions.bboxMax) {
this._setOption("bboxMax", this._initOptions.bboxMax, false);
this._setOption("bbox", this._initOptions.bboxMax, false);
}
if (this._initOptions.zoomMin !== undefined) {
this._setOption("zoomMin", this._initOptions.zoomMin, false);
}
if (this._initOptions.zoomMax !== undefined) {
this._setOption("zoomMax", this._initOptions.zoomMax, false);
}
if (this._initOptions.bbox) {
this._setOption("bbox", this._initOptions.bbox, false);
}
if (this._initOptions.center) {
this._setOption("center", this._initOptions.center, false);
}
if (this._initOptions.zoom !== undefined) {
this._setOption("zoom", this._initOptions.zoom, false);
}
}
$.templates( this._tmplLengthId, this._options[ "measureLabels" ].length );
$.templates( this._tmplAreaId, this._options[ "measureLabels" ].area );
this._$eventTarget.css("cursor", this._options["cursors"][this._options["mode"]]);
this._createServices();
this._refresh();
this._created = true;
},
_setOption: function (key, value, refresh) {
if ( key == "pixelSize" ) {
return;
}
refresh = (refresh === undefined || refresh);
if ( this._$elem.is( ".geo-map" ) ) {
this._panFinalize();
}
var center, pixelSize, bbox, zoom;
switch (key) {
case "bbox":
if ( this._created ) {
this._clearInteractiveTimeout( );
}
this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
if ( this._userGeodetic ) {
value = $.geo.proj.fromGeodetic( value );
}
center = [value[0] + (value[2] - value[0]) / 2, value[1] + (value[3] - value[1]) / 2];
pixelSize = Math.max($.geo.width(value, true) / this._contentBounds.width, $.geo.height(value, true) / this._contentBounds.height);
// clamp to zoom
zoom = this._getZoom( center, pixelSize );
if ( this._options[ "tilingScheme" ] ) {
pixelSize = this._getPixelSize( Math.min( Math.max( zoom, this._options[ "zoomMin" ] ), this._options[ "zoomMax" ] ) );
} else {
if ( zoom < this._options[ "zoomMin" ] ) {
pixelSize = this._getPixelSize( this._options[ "zoomMin" ] );
} else if ( zoom > this._options[ "zoomMax" ] ) {
pixelSize = this._getPixelSize( this._options[ "zoomMax" ] );
}
}
if ( this._created ) {
this._setInteractiveCenterAndSize( center, pixelSize );
this._setInteractiveTimeout( false );
} else {
this._setCenterAndSize( center, pixelSize, false, refresh );
}
value = this._getBbox();
break;
case "bboxMax":
this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
break;
case "center":
if ( this._created ) {
this._clearInteractiveTimeout( );
}
this._userGeodetic = $.geo.proj && $.geo._isGeodetic( value );
if ( this._userGeodetic ) {
value = $.geo.proj.fromGeodetic( value );
}
if ( this._created ) {
this._setInteractiveCenterAndSize( value, this._pixelSize );
this._setInteractiveTimeout( false );
} else {
this._setCenterAndSize( value, this._pixelSize, false, refresh );
}
break;
case "measureLabels":
value = $.extend( this._options[ "measureLabels" ], value );
$.templates( this._tmplLengthId, this._options[ "measureLabels" ].length );
$.templates( this._tmplAreaId, this._options[ "measureLabels" ].area );
break;
case "drawStyle":
if (this._$drawContainer) {
this._$drawContainer.geographics("option", "style", value);
value = this._$drawContainer.geographics("option", "style");
}
break;
case "shapeStyle":
if ( this._$elem.is( ".geo-service" ) && !this._createdGraphics ) {
this._createServiceGraphics( );
}
if ( this._createdGraphics ) {
this._$shapesContainer.geographics("option", "style", value);
value = this._$shapesContainer.geographics("option", "style");
}
break;
case "mode":
this._resetDrawing( );
this._$eventTarget.css("cursor", this._options["cursors"][value]);
break;
case "zoom":
if ( this._created ) {
this._setZoom(value, false, refresh);
} else {
value = Math.max( value, 0 );
this._setCenterAndSize( this._center, this._getPixelSize( value ), false, refresh );
}
break;
}
$.Widget.prototype._setOption.apply(this, arguments);
switch ( key ) {
case "bbox":
case "center":
if ( this._userGeodetic ) {
this._options[ "bbox" ] = $.geo.proj.toGeodetic( this._options[ "bbox" ] );
this._options[ "center" ] = $.geo.proj.toGeodetic( this._center );
}
break;
case "tilingScheme":
if ( value !== null ) {
this._pixelSizeMax = this._getPixelSize( 0 );
this._centerMax = [
value.origin[ 0 ] + this._pixelSizeMax * value.tileWidth / 2,
value.origin[ 1 ] + this._pixelSizeMax * value.tileHeight / 2
];
}
break;
case "bboxMax":
if ( $.geo.proj && $.geo._isGeodetic( value ) ) {
bbox = $.geo.proj.fromGeodetic( value );
} else {
bbox = value;
}
this._centerMax = $.geo.center( bbox );
this._pixelSizeMax = Math.max( $.geo.width( bbox, true ) / this._contentBounds.width, $.geo.height( bbox, true ) / this._contentBounds.height );
break;
case "services":
this._createServices();
if (refresh) {
this._refresh();
}
break;
case "shapeStyle":
if ( refresh && this._createdGraphics ) {
this._$shapesContainer.geographics("clear");
this._refreshShapes( this._$shapesContainer, this._graphicShapes, this._graphicShapes, this._graphicShapes );
}
break;
}
},
destroy: function () {
if ( this._$elem.is(".geo-service") ) {
if ( this._createdGraphics ) {
this._$shapesContainer.geographics("destroy");
this._$shapesContainer = undefined;
this._createdGraphics = false;
}
} else {
clearTimeout( this._timeoutInteractive );
this._timeoutInteractive = null;
this._created = false;
$(window).unbind("resize", this._windowHandler);
for ( var i = 0; i < this._currentServices.length; i++ ) {
this._currentServices[ i ].serviceContainer.geomap("destroy");
$.geo["_serviceTypes"][this._currentServices[i].type].destroy(this, this._$servicesContainer, this._currentServices[i]);
}
this._$shapesContainer.geographics("destroy");
this._$shapesContainer = undefined;
this._createdGraphics = false;
this._$drawContainer.geographics("destroy");
this._$drawContainer = undefined;
this._$existingChildren.detach();
this._$elem.html("");
this._$elem.append(this._$existingChildren);
this._$elem.removeClass("geo-map");
}
$.Widget.prototype.destroy.apply(this, arguments);
},
toMap: function (p) {
p = this._toMap(p);
return this._userGeodetic ? $.geo.proj.toGeodetic(p) : p;
},
toPixel: function ( p, _center /* Internal Use Only */, _pixelSize /* Internal Use Only */ ) {
return this._toPixel( $.geo.proj ? $.geo.proj.fromGeodetic( p ) : p, _center, _pixelSize );
},
opacity: function ( value, _serviceContainer ) {
if ( this._$elem.is( ".geo-service" ) ) {
this._$elem.closest( ".geo-map" ).geomap( "opacity", value, this._$elem );
} else {
if ( value >= 0 || value <= 1 ) {
for ( var i = 0; i < this._currentServices.length; i++ ) {
var service = this._currentServices[ i ];
if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
service.style.opacity = value;
// update the original service object's style property
service.serviceObject.style = $.extend( { }, service.serviceObject.style, service.style );
$.geo[ "_serviceTypes" ][ service.type ].opacity( this, service );
}
}
}
}
},
toggle: function ( value, _serviceContainer ) {
if ( this._$elem.is( ".geo-service" ) ) {
this._$elem.closest( ".geo-map" ).geomap( "toggle", value, this._$elem );
} else {
for ( var i = 0; i < this._currentServices.length; i++ ) {
var service = this._currentServices[ i ];
if ( !_serviceContainer || service.serviceContainer[ 0 ] == _serviceContainer[ 0 ] ) {
if ( value === undefined ) {
// toggle visibility
value = ( service.style.visibility !== "visible" );
}
service.style.visibility = ( value ? "visible" : "hidden" );
// update the original service object's style property
service.serviceObject.style = $.extend( { }, service.serviceObject.style, service.style );
service.serviceContainer.toggle( value );
if ( value ) {
$.geo[ "_serviceTypes" ][ service.type ].refresh( this, service );
}
}
}
}
},
zoom: function (numberOfLevels) {
if (numberOfLevels !== null) {
this._setZoom(this._options["zoom"] + numberOfLevels, false, true);
}
},
refresh: function ( force, _serviceContainer ) {
if ( this._$elem.is( ".geo-service" ) ) {
this._$elem.closest( ".geo-map" ).geomap( "refresh", force, this._$elem );
} else {
this._refresh( force, _serviceContainer );
}
},
resize: function ( _trigger /* Internal Use Only */ ) {
var size = this._findMapSize(),
dx = size["width"]/2 - this._contentBounds.width/2,
dy = size["height"]/2 - this._contentBounds.height/2,
i;
this._contentBounds = {
x: parseInt(this._$elem.css("padding-left"), 10),
y: parseInt(this._$elem.css("padding-top"), 10),
width: size["width"],
height: size["height"]
};
this._$resizeContainer.css( {
width: size["width"],
height: size["height"]
} );
for (i = 0; i < this._currentServices.length; i++) {
$.geo["_serviceTypes"][this._currentServices[i].type].resize(this, this._currentServices[i]);
}
this._$elem.find( ".geo-graphics" ).css( {
width: size["width"],
height: size["height"]
}).geographics( "resize" );
for (i = 0; i < this._drawPixels.length; i++) {
this._drawPixels[i][0] += dx;
this._drawPixels[i][1] += dy;
}
this._setCenterAndSize(this._center, this._pixelSize, _trigger, true);
},
append: function ( shape, style, label, refresh ) {
if ( shape && ( $.isPlainObject( shape ) || ( $.isArray( shape ) && shape.length > 0 ) ) ) {
if ( !this._createdGraphics ) {
this._createServiceGraphics( );
}
var shapes, arg, i, realStyle, realLabel, realRefresh;
if ( $.isArray( shape ) ) {
shapes = shape;
} else if ( shape.type == "FeatureCollection" ) {
shapes = shape.features;
} else {
shapes = [ shape ];
}
for ( i = 1; i < arguments.length; i++ ) {
arg = arguments[ i ];
if ( typeof arg === "object" ) {
realStyle = arg;
} else if ( typeof arg === "number" || typeof arg === "string" ) {
realLabel = arg;
} else if ( typeof arg === "boolean" ) {
realRefresh = arg;
}
}
for ( i = 0; i < shapes.length; i++ ) {
if ( shapes[ i ].type != "Point" ) {
var bbox = $.geo.bbox( shapes[ i ] );
if ( $.geo.proj && $.geo._isGeodetic( bbox ) ) {
bbox = $.geo.proj.fromGeodetic( bbox );
}
$.data( shapes[ i ], "geoBbox", bbox );
}
this._graphicShapes.push( {
shape: shapes[ i ],
style: realStyle,
label: realLabel
} );
}
if ( realRefresh === undefined || realRefresh ) {
if ( this._$elem.is( ".geo-service" ) ) {
this._refresh( false, this._$elem );
} else {
this._refresh( );
}
}
}
},
empty: function ( refresh ) {
for ( var i = 0; i < this._graphicShapes.length; i++ ) {
$.removeData( this._graphicShapes[ i ].shape, "geoBbox" );
}
this._graphicShapes = [];
if ( refresh === undefined || refresh ) {
if ( this._$elem.is( ".geo-service" ) ) {
this._refresh( false, this._$elem );
} else {
this._refresh( );
}
}
},
find: function ( selector, pixelTolerance ) {
var isPoint = $.isPlainObject( selector ),
searchPixel = isPoint ? this._map.toPixel( selector.coordinates ) : undefined,
mapTol = this._map._pixelSize * pixelTolerance,
result = [],
graphicShape,
geometries,
curGeom,
i = 0;
for ( ; i < this._graphicShapes.length; i++ ) {
graphicShape = this._graphicShapes[ i ];
if ( isPoint ) {
if ( graphicShape.shape.type == "Point" ) {
if ( $.geo.distance( graphicShape.shape, selector ) <= mapTol ) {
result.push( graphicShape.shape );
}
} else {
var bbox = $.data( graphicShape.shape, "geoBbox" ),
bboxPolygon = {
type: "Polygon",
coordinates: [ [
[bbox[0], bbox[1]],
[bbox[0], bbox[3]],
[bbox[2], bbox[3]],
[bbox[2], bbox[1]],
[bbox[0], bbox[1]]
] ]
},
projectedPoint = {
type: "Point",
coordinates: $.geo.proj && $.geo._isGeodetic( selector.coordinates ) ? $.geo.proj.fromGeodetic( selector.coordinates ) : selector.coordinates
};
if ( $.geo.distance( bboxPolygon, projectedPoint, true ) <= mapTol ) {
geometries = $.geo._flatten( graphicShape.shape );
for ( curGeom = 0; curGeom < geometries.length; curGeom++ ) {
if ( $.geo.distance( geometries[ curGeom ], selector ) <= mapTol ) {
result.push( graphicShape.shape );
break;
}
}
}
}
} else {
result.push( graphicShape.shape );
}
}
if ( this._$elem.is( ".geo-map" ) ) {
this._$elem.find( ".geo-service" ).each( function( ) {
result = $.merge( result, $( this ).geomap( "find", selector, pixelTolerance ) );
} );
}
return result;
},
remove: function ( shape, refresh ) {
if ( shape && ( $.isPlainObject( shape ) || ( $.isArray( shape ) && shape.length > 0 ) ) ) {
var shapes = $.isArray( shape ) ? shape : [ shape ],
rest;
for ( var i = 0; i < this._graphicShapes.length; i++ ) {
if ( $.inArray( this._graphicShapes[ i ].shape, shapes ) >= 0 ) {
$.removeData( shape, "geoBbox" );
rest = this._graphicShapes.slice( i + 1 );
this._graphicShapes.length = i;
this._graphicShapes.push.apply( this._graphicShapes, rest );
i--;
}
}
if ( refresh === undefined || refresh ) {
if ( this._$elem.is( ".geo-service" ) ) {
this._refresh( false, this._$elem );
} else {
this._refresh( );
}
}
}
},
_getBbox: function (center, pixelSize) {
center = center || this._center;
pixelSize = pixelSize || this._pixelSize;
// calculate the internal bbox
var halfWidth = this._contentBounds[ "width" ] / 2 * pixelSize,
halfHeight = this._contentBounds[ "height" ] / 2 * pixelSize;
return [ center[ 0 ] - halfWidth, center[ 1 ] - halfHeight, center[ 0 ] + halfWidth, center[ 1 ] + halfHeight ];
},
_setBbox: function (value, trigger, refresh) {
var center = [value[0] + (value[2] - value[0]) / 2, value[1] + (value[3] - value[1]) / 2],
pixelSize = Math.max($.geo.width(value, true) / this._contentBounds.width, $.geo.height(value, true) / this._contentBounds.height),
zoom = this._getZoom( center, pixelSize );
// clamp to zoom
if ( this._options[ "tilingScheme" ] ) {
pixelSize = this._getPixelSize( Math.min( Math.max( zoom, this._options[ "zoomMin" ] ), this._options[ "zoomMax" ] ) );
} else {
if ( zoom < this._options[ "zoomMin" ] ) {
pixelSize = this._getPixelSize( this._options[ "zoomMin" ] );
} else if ( zoom > this._options[ "zoomMax" ] ) {
pixelSize = this._getPixelSize( this._options[ "zoomMax" ] );
}
}
this._setInteractiveCenterAndSize( center, pixelSize );
this._interactiveTransform( );
},
_getBboxMax: function () {
// calculate the internal bboxMax
var halfWidth = this._contentBounds["width"] / 2 * this._pixelSizeMax,
halfHeight = this._contentBounds["height"] / 2 * this._pixelSizeMax;
return [this._centerMax[0] - halfWidth, this._centerMax[1] - halfHeight, this._centerMax[0] + halfWidth, this._centerMax[1] + halfHeight];
},
_getCenter: function () {
return this._center;
},
_getContentBounds: function () {
return this._contentBounds;
},
_getServicesContainer: function () {
return this._$servicesContainer;
},
_getZoom: function ( center, pixelSize ) {
// calculate the internal zoom level, vs. public zoom property
// this does not take zoomMin or zoomMax into account
center = center || this._center;
pixelSize = pixelSize || this._pixelSize;
var tilingScheme = this._options["tilingScheme"];
if ( tilingScheme ) {
if ( tilingScheme.pixelSizes ) {
var roundedPixelSize = Math.floor(pixelSize * 1000),
levels = tilingScheme.pixelSizes.length,
i = levels - 1;
for ( ; i >= 0; i-- ) {
if ( Math.floor( tilingScheme.pixelSizes[ i ] * 1000 ) >= roundedPixelSize ) {
return i;
}
}
return 0;
} else {
return Math.round( Math.log( tilingScheme.basePixelSize / pixelSize) / Math.log( 2 ) );
}
} else {
var ratio = this._contentBounds["width"] / this._contentBounds["height"],
bbox = $.geo.reaspect( this._getBbox( center, pixelSize ), ratio, true ),
bboxMax = $.geo.reaspect(this._getBboxMax(), ratio, true);
return Math.round( Math.log($.geo.width(bboxMax, true) / $.geo.width(bbox, true)) / Math.log(this._zoomFactor) );
}
},
_setZoom: function ( value, trigger, refresh ) {
// set the map widget's zoom, taking zoomMin and zoomMax into account
this._clearInteractiveTimeout( );
value = Math.min( Math.max( value, this._options[ "zoomMin" ] ), this._options[ "zoomMax" ] );
this._setInteractiveCenterAndSize( this._center, this._getPixelSize( value ) );
this._interactiveTransform( );
this._setInteractiveTimeout( trigger );
},
_createChildren: function () {
this._$existingChildren = this._$elem.children();
this._forcePosition(this._$existingChildren);
this._$existingChildren.detach().css( {
mozUserSelect: "none"
} );
var contentSizeCss = "width:" + this._contentBounds["width"] + "px; height:" + this._contentBounds["height"] + "px; margin:0; padding:0;",
contentPosCss = "position:absolute; left:0; top:0;";
this._$elem.prepend('');
this._$eventTarget = this._$contentFrame = this._$elem.children(':first');
this._$contentFrame.append('');
this._$servicesContainer = this._$contentFrame.children(':last');
this._$contentFrame.append('');
this._$shapesContainer = this._$contentFrame.children(':last');
this._$contentFrame.append( 'length
| return type | Number |
|---|---|
| syntax | $.geo.length( Object shape ( GeoJSON object ) ) |
| usage | |
The length method calculates the length of a basic GeoJSON geometry object and returns it in non-geodetic units. The basic shapes are Point, LineString and Polygon. If you are using geomap with its default map service, the length is in meters because the default projection is web mercator meters.
This function returns 0 for Point objects, the length of LineString objects and the perimeter of Polygon objects.
If the argument is not a basic GeoJSON geometry object, this function returns undefined.
This function is similar to Geometry.getLength in JTS.
bbox
| return type | Array ( GeoJSON bounding box ) |
|---|---|
| syntax | $.geo.bbox( Object shape ( GeoJSON object ) ) |
| usage | |
The bbox method calculates the smallest box that will contain all the positions in the passed-in shape. The shape can be any GeoJSON geometry object from Point to GeometryCollection.
The GeoJSON spec allows for each geometry type to have a bbox property. The $.geo.bbox method will honor that property and assume it is accurate. It will return the value of that property before attempting to calculate the bbox itself. If you wish to force $.geo.bbox to calculate the bbox, you will have to manually delete the bbox property from the geometry object.
var shape = {
type: "LineString", coordinates: [
[ -71, 40 ], [ -70.5, 41 ]
],
bbox: [ -71, 40, -70.5, 41 ]
};
var bboxFromProperty = $.geo.bbox(shape);
delete shape.bbox;
var calculatedBbox = $.geo.bbox(shape);
If the argument is not a basic GeoJSON geometry object, this function returns undefined.
This function is similar to Geometry.getEnvelope in JTS.
polygonize
| return type | Array ( GeoJSON Polygon ) |
|---|---|
| syntax | $.geo.polygonize( Array bbox ( GeoJSON bounding box ) ) |
| usage | |
The polygonize method creates a new Polygon with an outer ring that matches the rectangle covered by the bbox. The Polygon is closed and will have five coordinates.
This function is a simplification/adaptation of the Polygonizer class in JTS. While the JTS object operates on the line work of geometry objects, this function operates on bounding boxes.
$.geo.proj object
The $.geo namespace has a property named proj which is a JavaScript object having four functions: fromGeodetic, fromGeodeticPos, toGeodetic, and toGeodeticPos. These four functions allow all $.geo static bbox/geometry functions, geomap widget properties, geomap widget events & geomap widget methods (collectively referred to as plugin functions from now on) to work in geodetic (lon, lat) coordinates.
Consider the following example:
- assume you are using the default map service
- you call $.geo.distance passing two geodetic Point objects, i.e., the GeoJSON position in each point is an array where coordinates[0] is the longitude and coordinates[1] is latitude
jQuery Geo will first convert the points to map units, a process called projection. jQuery Geo needs projected coordinates to properly calculate some relationships between shapes. After converting the points, $.geo.distance can then calculate the distance between them. This distance will be in meters because the default map service is web mercator meters.
In order to work directly in map units, you used to have to set $.geo.proj to null. While still valid, you no longer have to do this. You can leave $.geo.proj set to, e.g., web mercator meters and send either projected web mercator GeoJSON geometry objects or geodetic (lon, lat) objects to $.geo functions. The return value will depend on the type of arguments passed.
The geomap widget keeps track of how you set options. For example, if you set the map's center using geodetic coordinates, geodetic coordinates will then be returned when you ask for the center later. They will also be used when the geomap widget triggers events such as bboxchange or shape.
The default $.geo.proj object comes pre-built with functions that quickly convert between geodetic coordinates and web mercator meters so you can start using lon, lat right away with the default OpenStreetMap-based tiles. If your map service uses a different projection you can roll your own $.geo.proj object and continue to have the option to use geodetic coordinates. Read Other projections below for information on how to do that.
Usage
The two base functions, fromGeodetic and toGeodetic, can take and return: a single bounding box, a single GeoJSON position (Point.coordinates), an array of GeoJSON positions (MultiPoint.coordinates or LineString.coordinates), an array of arrays of positions (MultiLineString.coordinates or Polygon.coordinates) or an array of arrays of arrays of positions (MultiPolygon.coordinates). In other words, the $.geo.proj functions convert the coordinates property of any of the GeoJSON geometry types. For example, you can use the following to convert the position contained in a GeoJSON point object:
var geodeticPoint = {
type: "Point",
coordinates: [ -73.5100, 41.3500 ]
};
var projectedCoords = $.geo.proj.fromGeodetic( geodeticPoint.coordinates );However, a LineString's coordinates property is an array of positions which you can also pass to the fromGeodetic method to get an array converted positions
var projectedLineStringCoords = $.geo.proj.fromGeodetic( geodeticLineString.coordinates );To convert a set of projected GeoJSON positions back to web mercator, call toGeodetic.
var geodeticLineString = {
type: "LineString",
coordinates: $.geo.proj.toGeodetic( projectedLineStringCoords )
};Other projections
The $.geo.proj object allows you to use geodetic coordinates with whichever coordinate system or projection you want in any plugin function. If you pass a geodetic Polygon to $.geo.bbox, the returned bounding box will be in geodetic coordinates.
If you are working in a projection other than the default web mercator meters but still wish to use geodetic coordinates, you will have to update the $.geo.proj object so that it can convert between geodetic coordinates and ones in your projection.
However, if you don't need to work in longitude, latitude at all, you can ignore $.geo.proj and use projected coordinates throughout your project. You also still have the option to set $.geo.proj to null for completeness and remind yourself that you are limited to projected coordinates. If you are working in Massachusetts Mainland State Plane meters for example, you can pass a Polygon of that projection to any plugin function and you will get results in that projection. This includes all $.geo functions and geomap options & methods.
$.geo.proj = null; // not required but reminds us that jQuery Geo can't use lon, lat in this project
$('map').geomap( {
tilingScheme: null,
bboxMax: [ 31790, 790195, 337250, 961865 ],
bbox: [ 235644, 894775, 237775, 898523 ],
services: [ /* service object that supports MA State Plane */ ]
} );jQuery Geo uses the four $.geo.proj functions throughout to convert between geodetic and projected coordinates. However, fromGeodeticPos and toGeodeticPos handle the conversion of individual GeoJSON positions and are used by fromGeodetic and toGeodetic. You can extend $.geo.proj with your own implementations of fromGeodeticPos and toGeodeticPos to change the internal projection used by all plugin functions and still use geodetic (lon, lat) coordinates as arguments and return values.
Please note that you must extend $.geo.proj with new functionality instead of replacing it wholesale with a new object. You need to keep the original fromGeodetic and toGeodetic functions intact.
$.extend($.geo.proj, {
fromGeodeticPos: function( coordinate ) {
var converted = [];
// convert the GeoJSON lon/lat position to MA State Plane
return converted;
},
toGeodeticPos: function( coordinate ) {
var converted = [];
// convert the GeoJSON MA State Plane position to lon/lat
return converted;
}
});
$('map').geomap( {
tilingScheme: null,
// notice that with a custom $.geo.proj object,
// these properties can be in geodetic coordinates
bboxMax: [ -73.5100, 41.3500, -69.8600, 42.8900 ],
bbox: [ -71.098709, 42.330322, -71.072617, 42.351608 ],
// the services option must still be in map coordinates
// see geomap's services property docs for more info
services: [ /* service object that supports MA State Plane */ ]
} );Implementing custom from/to GeodeticPos functions is currently beyond the scope of this documentation but reading up on Proj4js is a good start.
width
| return type | Number |
|---|---|
| syntax | $.geo.width( Array bbox ( GeoJSON bounding box ) |
| usage | |
The width method returns the true width of a bbox in non-geodetic units. If you are using geomap with its default map service, the width is in meters because the default projection is web mercator meters.
This function is similar to Envelope.getWidth in JTS.
area
| return type | Number |
|---|---|
| syntax | $.geo.area( Object shape ( GeoJSON object ) ) |
| usage | |
The area method calculates the area of a basic GeoJSON geometry object and returns it in non-geodetic units. The basic shapes are Point, LineString and Polygon. If you are using geomap with its default map service, the area is in square meters because the default projection is web mercator meters.
While you can pass any basic geometry, this function returns the area of Polygon objects and 0 for objects of other shape types.
If the argument is not a basic GeoJSON geometry object, this function returns undefined.
This function is similar to Geometry.getArea in JTS.
height
| return type | Number |
|---|---|
| syntax | $.geo.height( Array bbox ( GeoJSON bounding box ) |
| usage | |
The height method returns the true height of a bbox in non-geodetic map units. If you are using geomap with its default map service, the height is in meters because the default projection is web mercator meters.
This function is similar to Envelope.getHeight in JTS.
recenter
| return type | Array ( GeoJSON bounding box ) |
|---|---|
| syntax | $.geo.recenter( Array bbox ( GeoJSON bounding box ), Array (GeoJSON position) ) |
| usage | |
The recenter method creates a new bbox with the same width and height as the original but moving the center to a new location.
This function is not defined in JTS.
expandBy
| return type | Array ( GeoJSON bounding box ) |
|---|---|
| syntax | $.geo.expandBy( Array bbox ( GeoJSON bounding box ), Number dx, Number dy ) |
| usage | |
The expandBy method creates a new bbox with the same center as the original but having a width and height that is modified by the dx and dy arguments respectively.
The dx and dy arguments are non-geodetic map units. If you are using geomap with its default map service, these are in meters because the default projection is web mercator meters. If, for example, you are working in a different projection such as NAD83 / New Jersey feet, this function will expand or contract the bbox by feet.
The dx and dy arguments can be positive, negative or zero and will modify the width or height of the bbox accordingly.
This function is similar to Envelope.expandBy in JTS.
centroid
| return type | Object ( GeoJSON Point ) |
|---|---|
| syntax | $.geo.centroid( Object shape ( GeoJSON object ) ) |
| usage | |
The centroid method calculates the center of mass for the passed-in basic GeoJSON geometry object. The basic geometry types are Point, LineString and Polygon.
Technically, only Polygons can be considered to have mass. However, a centroid can be calculated for other geometry types. This method operates on LineStrings as if they were closed polygons and the centroid will likely not lie along the line. The centroid of a Point is a clone of the Point.
If the argument is not a basic GeoJSON geometry object, this function returns undefined.
This function is similar to Geometry.getCentroid in JTS.
distance
| return type | Number |
|---|---|
| syntax | $.geo.distance( Object shape1 ( GeoJSON object ), Object shape2 ( GeoJSON object ) ) |
| usage | |
The distance method calculates the distance between two basic GeoJSON geometry objects and returns it in non-geodetic units. The basic shapes are Point, LineString and Polygon. If you are using geomap with its default map service, the distance is in meters because the default projection is web mercator meters.
If either argument is not a basic GeoJSON geometry object, this function returns undefined.
This function is similar to Geometry.distance in JTS.
reaspect
| return type | Array ( GeoJSON bounding box ) |
|---|---|
| syntax | $.geo.reaspect( Array bbox ( GeoJSON bounding box ), Number ratio ) |
| usage | |
The reaspect method creates a new bbox with the same center as the original but forcing the ratio of width to height to a specific value.
If the original width is greater than the original height (think a landscape printout) then the width of the new bbox will be the same as the original but the new height will change to fit the ratio. If the original height is greater than the original width (think a portrait printout) then the new bbox height will remain unchanged but the width will to fit the ratio.
This function is not defined in JTS.
scaleBy
| return type | Array ( GeoJSON bounding box ) |
|---|---|
| syntax | $.geo.scaleBy( Array bbox ( GeoJSON bounding box ), Number scale ) |
| usage | |
The scaleBy method creates a new bbox with the same center as the original but having a width and height that are both multiplied by the scale argument.
The scale argument is a percentage increase or decrease. This means that supplying 2 will increase the size of the bbox by 200%, which if thinking in terms of a map's view, would zoom out. Supplying .5 will decrease the size of the bbox to half its original size.
The scale argument must be greater than zero.
This function is not defined in JTS.
include
| return type | Array ( GeoJSON bounding box ) |
|---|---|
| syntax | $.geo.include( null | Array bbox ( GeoJSON bounding box ), Array position ( GeoJSON position ) | Array bbox ( GeoJSON bounding box ) ) |
| usage | |
The include method expands a bbox to include either a coordinate or another bbox. The expanded bbox is returned.
If the first argument is null or undefined, the result is a new bbox and will contain the second argument.
For efficency, if the first argument is a valid bbox, it is modified in-place and a reference is returned.
If the second argument is not a coordinate or bbox, this function returns the first argument.
This function is similar to Envelope.expandToInclude in JTS.
pointAlong
| return type | Object ( GeoJSON Point ) |
|---|---|
| syntax | $.geo.pointAlong( Object shape ( GeoJSON object ), Number percentage ) |
| usage | |
The pointAlong method calculates a Point that lies a given fraction along the passed-in basic GeoJSON geometry object. The basic geometry types are Point, LineString and Polygon. A percentage of 0.0 returns the first Point; a percentage of 1.0 returns the last.
Technically, only LineStrings can be used properly in this calculation. However, pointAlong can be calculated for other geometry types. With Point objects, pointAlong will always return a copy of the original Point. For Polygon objects, pointAlong operates on the Polygon's perimeter (outer ring), i.e., myPolygon.coordinates[0]. For Polygons, percentage values of 0.0 and 1.0 will return the same Point.
If the argument is not a basic GeoJSON geometry object, this function returns undefined.
This function is similar to LineSegment.pointAlong in JTS.
geo namespace
The $.geo namespace contains all geometry functions implemented in the plugin and an object having the plugin's four projection functions.
projection
The $.geo namespace has a property named proj which is a JavaScript object having four functions: fromGeodetic, fromGeodeticPos, toGeodetic, and toGeodeticPos. These four functions allow all $.geo static bbox/geometry functions, geomap widget properties, geomap widget events & geomap widget methods (collectively referred to as plugin functions from now on) to work in geodetic (lon, lat) coordinates.
geometry operations
Geometry isn't much fun if you can't do anything with it. These functions help you analyze and manipulate bounding boxes and GeoJSON geometry objects. You call them directly from the $.geo namespace:
$.geo.distance( point1, point2 )Except for a few name changes and switching from an object-oriented API to a function-based one, jQuery Geo attempts to follow the names and behavior of the Java Topology Suite (JTS), which is the de-facto standard for geometry library APIs. JTS itself is an implementation of the OGC Simple Features specification but has made design decisions that improve the API for developers. The most notable of which is having Envelope (called bbox in jQuery Geo and GeoJSON) be its own class type.
bbox functions
These functions operate on GeoJSON bounding box array, i.e., a JavaScript array having four values:
- minimum x/longitude
- minimum y/latitude
- maximum x/longitude
- maximum y/latitude
geometry object functions
These functions operate on GeoJSON geometry objects: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. They do not operate on Feature or FeatureCollection objects, you have to call these functions on the geometry properties of Feature objects.
The geometry functions allow you to analyze relationships between geometries such as their distance apart as well as obtain information about them such as bounding box and center point, called the centroid. This section will eventually expand to cover all of the important spatial operations available in the Java Topology Suite.
center
| return type | Array ( GeoJSON position ) |
|---|---|
| syntax | $.geo.center( Array bbox ( GeoJSON bounding box ) ) |
| usage | |
The center method calculates the center of a bbox and returns it as a GeoJSON position.
It operates on bounding boxes and should not be confused with the centroid function, which operates on GeoJSON geometry objects.
This function is called Envelope.centre in JTS (I assume because JTS is built in British Columbia).
contains
| return type | Boolean |
|---|---|
| syntax | $.geo.contains( Object shape1 ( GeoJSON object ), Object shape2 ( GeoJSON object ) ) |
| usage | |
The contains method determines if the first basic GeoJSON geometry completely contains a second one. The basic shapes are Point, LineString and Polygon however Point and LineString geometries cannot contain other geometries so the only situation that has a possibility of returning true is when the first argument is a Polygon.
If either argument is not a basic GeoJSON geometry object, this function returns undefined.
This function is similar to Geometry.contains in JTS.
internals
We keep some plugin design decisions here.
jQuery UI widget factory
The geomap widget uses the same widget factory that all other jQuery UI and jQuery Mobile widgets use. Like jQuery Mobile, we include a copy of jquery.ui.widget.js in the project. While this adds 3k to the final compressed build it allows us to easilly follow the patterns designed by UI and better integrate into the jQuery plugin community.
$.widget( "geo.geomap", { } );Virtual state
The public properties bbox, bboxMax and center do not always match the internal state of the map widget. In fact internally, geomap only tracks center and pixelSize. The bbox and bboxMax properties are calculated based on the current or max center and pixelSize. In the code, you will see two properties each for each of these. One is public, the other is private. For center, the internal position (_center) is always in internal map units (web mercator meters by default) even if the developer sets the public bbox or center by longitude & latitude.
Initialization options
You may notice that we override jQuery UI's _createWidget function in order to capture the options passed in by the user. Let us know if there's a better way to do that. At the end of _create, we iterate over the passed options and set certain internal state values before creating services and refreshing the map. This insures that we handle supplied bbox or center properly. Since bbox and center can potentially conflict, only supply one. If both are supplied the behavior is technically undefined but currently center will override bbox.
bbox cache
When you append a shape to the map, the geomap widget will cache the shape's bounding box (in non-geodetic coordinates) for faster searches when you call find. When you remove a shape from the map, the cache will be cleared. When you use the $.geo.bbox method on a shape after it has been appended to the map, the cached bounding box will be returned.
// the bbox of an appended shape is cached while it is on the map
var calculatedBbox = $.geo.bbox(shape);
$("#map").geomap("append", shape);
var cachedBbox = $.geo.bbox(shape);
$("#map").geomap("remove", shape);
var calculatedAgain = $.geo.bbox(shape);jQuery Geo caches the bbox using jQuery's data function under the name geoBbox. Though I can't think of a reason to do so, you can remove this cache by calling removeData directly on the shape object:
$.removeData(shape, "geoBbox");jQuery Geo's caching will not alter your geometry object so you don't have to worry about unintentionally storing or sending extra data to a server.
External libraries
Apart from the jQuery UI widget factory, geomap includes a couple external libraries.
Mouse wheel extension 3.0.2
http://plugins.jquery.com/node/7146We've found this to be a very stable mousewheel special event plugin and are using it to handle mouse wheel interaction. This plugin's license comment and source are included intact in the minified releases of jQuery Geo.
Google excanvas
We include parts of Google's excanvas library to support graphic drawing in IE6-8. Only functions required to support jQuery Geo's feature list are included. This library's license comment and source are included intact in the non-minified releases of jQuery Geo. The license comment and partial source are included intact in the minified releases of jQuery Geo.
jsRender
https://github.com/BorisMoore/jsrenderjQuery Geo includes a snapshot of jsRender, the next-generation templating engine from the jQuery team. This is used for measure text templates and src string templates.
Service types
Developers can set the services array used by the geomap widget. When it comes time to draw map images, the geomap widget uses an internal _serviceTypes object. The object contains one property for each service type geomap supports, e.g., tiled and shingled. The type property on each service object determines which serviceType object geomap uses to refresh the service. The following code snippet is a simplification of the relationship.
options: {
services: [
{
"class": "osm",
type: "tiled"
/* ,... */
}
]
},
_serviceTypes: {
tiled: {
refresh: function (map, service) {
}
/* ,... */
}
}In the future the _serviceTypes property will be public and developers can extend the service types geomap supports.
4gr^=QԴ:>=<|CE ˝ڠTBᅷҟj}+
?k
cR?? v7 Э,y`jo Aaa4Or;adɓčx"7 U}XNg,ߝ9_4aalR Wm1o =i>>^P f8l v fj^D PJdgSSHsZ- \0`%' ddd& *6{pcom@Rq.9ODQg֯6A@0Ԡy]YQa ? ΕF98xE z4&ՌEo&ϖh!*s jmdbJ쏐;^3:zhl~8b f zu5"B.FfURQɾk
lk2=ZҢ $*JVMbʁ{f;+LRU.aݻvݪB'gZĔVw&^:iwqA Yod QHV _[Z \OQ ZM . YH vp l~|⎋21MlTG6Ǩt'E.whrWq\7](G8TSF
df[l O~ O|Xd_ݑ9&*)|ˍzk+|n xr(@Ph^ Bmh h ntb=1!Q"t˾t=GommpB\;Ȯ $܆QzJcT6lMX The bboxchange event triggers any time user interaction causes a change in the current bbox of the map widget. This includes pan, wheel zoom, double-click zoom, etc. The geomap does not trigger this event when you update the bbox programmatically. The geo argument is an object containing a bbox property which the new bbox. The zoom option gets or sets the current zoom of the map view. For tiled maps, the zoom option's range starts at zero and goes to either the current geomap tilingScheme's levels property minus one or the length of the tilingScheme's pixelSize array (depending on how the tilingScheme option is declared). For non-tiled maps, i.e., tilingScheme is null and you're using all shingled services, the zoom option is based on the ratio between sizes of the bbox and bboxMax properties. If they are equal, the zoom option is 0. Smaller bbox areas will have larger zoom values. If you attempt to initialize both zoom and bbox at the same time when creating a geomap widget, bbox will be applied and zoom will modify the final bbox. Apart from setting the zoom option directly, you can use the zoom method to change the zoom by relative amounts. The zoomMax option gets or sets the maximum value of the zoom option for the map. For tiled maps, this option overrides the tilingScheme option when it is smaller than what you've specified in the tilingScheme. For example, if the tilingScheme has a total of 18 levels but you set the zoomMax option to 7, the user will not be able to zoom in past level 7. For non-tiled maps, i.e., tilingScheme is null and you're using all shingled services, this option determines the maximum zoom (and therefore minimum pixelSize) a user can achieve. Without setting this option for non-tiled maps, users will be able to infinitely zoom in to fully dynamic maps which is likely not what you want. Non-tiled maps require the bboxMax option to determine what zoom level 0 means. This option represents the other side of the zoom range. This option also overrides programmatic changes. If zoomMax is 7 and you try to set the zoom option to 8 using JavaScript, it will be set to 7 instead. The find method allows you to search for shapes appended to the map and/or services. There are two distinct ways to call this method. The find method can take a single GeoJSON map point and return all shapes within a pixel radius of the given location that have been added with append. If there are no shapes at the location, this method returns an empty array. The pixelTolerance argument is always in pixels. This allows for pixel-based searches regardless of the map's current zoom. A high-zoom search is finer than a low-zoom one because at lower zoom levels, i.e., the map is zoomed out more, the Earth-size of a pixel is greater causing this search to reach out farther from the supplied position. Duplicate shape references are included in the return value. For example, if you have appended the same GeoJSON object to both the map and a specific service, and then call find at that location, the returned array will contain two, identical shape references. The find method can also take a single string. The string is in CSS selector syntax but currently only one selector is supported: *. Use the * selector to return an array of all shapes that have been appended to the map or service. If there are no shapes on the map or service, this method returns an empty array. Searching for all shapes at the map level will return all shapes that have been appended to the map or any service. Duplicate shape references are included in the return value. For example, if you have appended the same GeoJSON object to both the map and a specific service, and then call find( "*" ) at the map level, the returned array will contain two, identical shape references. The shape selector cannot include service ids or classes. To search for shapes within a specific service, see below. Similar to how you can append shapes to specific services, you can find shapes in specific services as well. You do this by targeting a service inside a map instead of the map itself for your call to geomap's find method. For example, the default map service has the CSS class: osm. We can find a shape from that service specifically by using jQuery to target the service: However, unlike the other three shape methods, shapes appended to a specific service will be returned by calling find on the map itself. In this way, calling find on the map is a deep search for shapes on all services. For example, after this sequence the shapes variable will contain the shape even though it was appended to a service specifically:
Another difference between the find method and the append, remove, and empty methods, is that the find method cannot currently be used on multiple targets simultaneously. For example, the return value of the following is undefined: To find shapes in two specific services without searching all services you should use two find calls: The selector-based version also follows this requirement. You cannot target more than one element with the initial selector and you cannot use the shape selector to search services. A multi-service selector-based search would be the same as above but with "*" instead of: point, 8. The zoom method can zoom the map in or out by a given number of zoom levels. Positive values zoom the map in, negative values zoom the map out. This method will not zoom out beyond zoom level 0. If you are using a tiling scheme, this method will not zoom in past the maximum number of zoom levels defined in the tilingScheme property. This method accepts values relative to the map's current zoom level. This is different than the zoom property, which is the map's current zoom level.
It might be useful to add an explicit plus sign when using this zoom method. This method does not trigger events, not even bboxchange. There is no default value. Passing null or undefined will not change the map's zoom. The drawStyle option retrieves or updates the style of incomplete lines and polygons as they are being drawn. This differs from the shapeStyle option which updates the style of shapes that you've appended to the map. This option affects both the draw modes (drawPoint, drawLineString, and drawPolygon) and the measure modes (measureLength, and measureArea). This option changes specific properties of the internal style object. If you init or set an incomplete style object, only the style properties you reference are updated. Please see the style section at the bottom of the geomap widget page for more information about the style object. The bbox property calculates or modifies the bounding box of the map view the user currently sees. The geomap widget creates the bounding box based on the current center point, map zoom and size of the map view. When you set a new bbox, the center and zoom properties are set as close as they can be based on the services you've added and the size of the map view. For example, if you have a cached service with specific zoom levels, the map widget will have to pick a zoom level even though it may result in a bbox that is quite different from the one passed. When your services are fully dynamic, i.e., they allow arbitrary zoom levels, the final bbox will not likely match the one passed either due to ratio differences between the requested bbox and the map view's size. The map will attempt to pick a bounding box that best fits the one you request. This property is a JavaScript array consisting of four values which can be thought of as: minx, miny, maxx and maxy of the current map view in map units and in that order. By default the values are in geodetic coordinates, e.g., bbox[0] is the longitude of the left of the current map view, bbox[1] is the latitude of the bottom, bbox[2] is the longitude of the right and bbox[3] is the latitude of the top. You can change the default when you initialize the widget by passing projected coordinates as the bbox option. Setting a new bbox will refresh the map services. If you attempt to initialize both center and bbox at the same time when creating a geomap widget, center will override bbox. If you attempt to initialize both zoom and bbox at the same time when creating a geomap widget, bbox will be applied and zoom will modify the final bbox. The bboxMax option defines a bounding box that surrounds all of the data you wish to show in non-tiled maps, i.e., you have set the tilingScheme option to null. Users can pan the map once they reach bboxMax but cannot zoom out further. This option is a JavaScript array consisting of four values which can be thought of as: minx, miny, maxx and maxy of the maximum map view you wish to allow in map units and in that order. A bboxMax option must be set properly for shingled (dynamic) services since the value of the map's zoom is based on a ratio between the current bbox and bboxMax. Setting a new bboxMax will refresh the map services and reset what zoom level 0 means. If you set tilingScheme to null, you must explicitly set bboxMax. The measureLabels option controls how the length or area text is formatted when displayed on the map during measuring. In the label strings, the {{: }} syntax is used as a placeholder for the current length or area. All other text is displayed verbatim. Note: Alpha releases used a {{= }} syntax but there is a breaking change in the beta version due to changes in jsRender. Please use the new {{: }} syntax. The developer may change each measureLabels option separately during both initialization of the widget or any time after.
This method tells the geomap widget to recalculate its frame and adjust its bbox to fit a new size. The map will maintain its center point and pixel size and expand or contract to fill the new surroundings.
The geomap widget watches the browser window for you. If your map widget's div position is related to the window in some way, geomap will automatically resize to fit when the window size changes. If the map widget's div is not related to the window and you manually change its size, you need to call resize so that the map can adjust.
This method refreshes the map. The pixel size is the number of map units a single pixel occupies in the current view. A more interesting way to think of it is the Earth-size of the pixel. Because the default internal projection is web mercator meters, the default return value for pixelSize is in meters even if you set other map values in geodetic coordinates, e.g., lon/lat. The unit type will always match the type you set on tilingScheme for tiled maps or bboxMax for shingled (dynamic) maps. For more information on how the plugin handles projections, please read the geo section of this documentation. The map's pixel size is read-only. To change it you will need to use one of the mutable properties such as bbox, center or zoom. pixelSize is calculated based on tilingScheme & zoom for tiled maps. It is based on the bbox/bboxMax ratio for shingled maps. This method refreshes one or more services and shapes in the map. Usually, changing geomap options or calling methods automatically refreshes the map appropriately. However, you can call this after you have added or removed shapes to geomap by passing false as the refresh argument to the append, remove, or empty methods. This method is also useful in the case of dynamic server data. Without a service selector, all services on the map will be refreshed. The force option will re-request images for tiles already in the map view. Keep in mind, though, that this does not guarantee you will get updated images. See the Dynamic Data section below for tips. There are three factors that can prevent jQuery Geo from getting a fresh image from a web server. A web browser will normally cache images that have already been loaded. On top of that, jQuery Geo will not, by default, request images for tiles that it has already placed. In the case of dynamic data, where you want to update what's on the map without requiring a pan or zoom or also update tiles that have already been placed, you have a couple options. The first option is to use a function for the src property of your service object. In that function, return a different URL every time even if all of the properties of the view object are the same as a previous call. If we were to use jQuery's implementation of the cache option in $.ajax as inspiration, our src function could look similar to: The _ input in the query string will be a different number on every request, regardless of the value of zoom, column, and row. Most services will ignore extraneous query string inputs and the web browser will not be able to cache the image. Another way to achieve the same result without modifying your image URLs is to use the HTTP header: Cache-Control. By returning this header with the no-cache value, you can tell the web browser to not cache the image. Then, when you call .geomap( "refresh", true ), the web browser will re-request images for tiles even if it has done so one already. This option is only possible if you have some control over the web server that supplies map images. How to add the header is specific to your web server and beyond the scope of these docs. It can usually be done in the web server's configuration file or in the web service itself where you generate the images. The zoomMin option gets or sets the smallest allowed value of the zoom option for the map. For tiled maps, this option overrides the tilingScheme option when it is larger than zero. For example, a tilingScheme always defines what zoom level 0 is, but if you set the zoomMin option to 7, the user will not be able to zoom out past level 7. For non-tiled maps, i.e., tilingScheme is null and you're using all shingled services, this option determines the minimum zoom (and therefore maximum pixelSize) a user can achieve. Non-tiled maps require the bboxMax option to determine what zoom level 0 means. This option overrides the map's ability to get to zoom level 0. It is not so useful for non-tiled maps, as you can just set a smaller bboxMax and continue using 0 as the minimum zoom. This option also overrides programmatic changes. If zoomMin is 2 and you try to set the zoom option to 0 using JavaScript, it will be set to 2 instead. The shift option determines how the shift key affects the map during drag operations in different modes. There are currently four values: default, zoom, dragBox, and off. However, default is currently the same as zoom. When shift is set to default or zoom and a user holds the shift key before holding the mouse button down, the map temporarilly switches to zoom mode. In this state the user can perform a marquee zoom by clicking and holding one point and dragging the mouse cursor. A box will form. When the user lets go of the mouse, the map will zoom to the closest approximation of the bbox of the drawn shape. When mode is dragBox, the shift key will still switch to zoom mode. Dragging will form a box either way but if the shift key was down when the user started, the map will zoom. When shift is set to dragBox and a user holds the shift key before holding the mouse button down, the map temporarilly switches to dragBox mode. In this state the user can click and hold one point and then drag the mouse cursor. A box will form. When the user lets go of the mouse, jQuery Geo will trigger a shape event passing a GeoJSON Polygon representation of the dragged bbox as the geo argument. The Polygon object also has the GeoJSON the bbox property. When shift is set to off, the shift key is ignored. For example, if mode is pan and the user holds the shift key and begins to drag, the map will pan as normal. When the map's mode option is set to static, the map ignores all user interaction so the shift key is also ignored. The loadstart event triggers when the geomap widget begins to load new images. It only triggers once regardless of the number of images about to be loaded. It will not be triggered again until after all pending images have been loaded (the image queue returns to zero) and a change in the map requires more images. The geo argument is currently undefined for this event. You can use this event to show an indicator that your website is busy downloading images. The pannable option determines whether or not a user can pan the map. When true, the default, users can drag the map image or tiles to change the bbox in any mode except for "static". For example, they can pan the map in the middle of drawing a polygon with the drawPolygon mode. When false, a user's dragging of the map image will not cause it to move regardless of what mode the widget is in. Developers can still make programatic changes to the bbox, such as setting options and calling methods. This method sets the value of the opacity property of service objects in the services array. It will also update the opacity of all images already requested by the service. If you call opacity directly on geomap's div element, it will apply to all services. You can target individual services using a CSS selector based on the map div id and the class supplied for the service in its service object or just the id of the service if supplied in its service object. This is much faster than changing a service object's opacity value yourself and updating geomap's services property. The tilingScheme property defines a grid that the geomap widget can use to build a map view as adjacent tiles instead of a single, full image each time. Only tiled services will get a non-null tile property as an argument to their src method or template. Shingled services, even when layered on top of a tiled map will only get bbox data. When a tilingScheme is set, the geomap widget will limit the user to specific zoom levels defined by the tiling scheme. If you set tilingScheme to null, you must explicitly set bboxMax. Also, if you are using only shingled services you must set tilingScheme to null, and therefore explicitly set bboxMax. You can set the map widget to be fully dynamic and allow any arbitrary zoom level by setting the tilingScheme to null. This is only useful if all of your services are backed by live spatial data and can produce map images at any scale. This is one of the few places where you must use non-geodetic (i.e., non-lon/lat) units even if you are using longitude & latitude for properties such as center or bbox. You must use projected units when defining a tiling scheme. The default map tiles use web mercator meters. All tilingScheme objects have the first three of the following properties. Apart from those, a tilingScheme object must have either just the pixelSizes property or both basePixelSize & levels. The shapeStyle option retrieves or updates the base style of shapes appended to the map. This differs from the drawStyle option which defines the style of incomplete lines and polygons as they are being drawn. Two extra color properties, stroke and fill, are not defined by default and use the value of the color property until they are defined individually. This option changes specific properties of the internal base style. If you send an incomplete style object, only the style properties you reference are updated. Similar to CSS, you can override this style on a per-shape basis by passing a different style to the append method. Changing this base style will update how geomap draws existing shapes that do not have their own style. For shapes that do have their own style, changing the base shapeStyle will update any style properties not referenced in the shape-specific style. For example, assume the following: The shape described in the above example will draw with a blue stroke color and a strokeWidth of 4px. You can also set a base style for a specific service. These are called service-level styles and apply only to service-level shapes. To do this, target a service inside a map instead of the map itself for your call to geomap's shapeStyle option. To expand upon the above example, consider the following additional steps: This second point will: This is the only option that can be applied to services. All other options require a reference to the original map element. When called with a second argument to set the shapeStyle, the jQuery UI widget factory returns the original jQuery collection to maintain call chaining. Please see the style section at the bottom of the geomap widget page for more information about the style object. The toMap method takes a single pixel position (which is an array of two values: the left and top of the pixel), an array of pixel positions, an array of arrays of pixel positions, or an array of arrays of arrays of pixel positions. In other words, it accepts the pixel representation of the coordinates of any geometry up to MultiPolygon. It returns the map coordinates for all of the pixel positions. The return coordinates are in projected map units if you have previously set the bbox or center options using projected coordinates. Otherwise, they are in geodetic (lon, lat) coordinates. The cursors property controls which cursors appear when users move the mouse over the geomap div in any given mode. The developer may change each geomap mode's cursor separately during both initialization of the widget or any time after. Sometimes the geomap widget will override the selected mode's cursor, e.g., when a user starts panning in other modes the cursor will switch to the pan mode cursor temporarily. The shape event triggers when the user measures a length, or area, or draws a point, line or polygon. He or she does this by tapping the map in specific ways while the geomap mode property is set to: measureLength, measureArea, drawPoint, drawLineString or drawPolygon. When mode is drawPoint, a single tap of the map triggers this event passing a GeoJSON Point object of the tapped location in map coordinates. When mode is measureLength or drawLineString, the first single tap begins a line. Subsequent single taps add points to the line. A double-tap on the map adds a final point and triggers this event passing a GeoJSON LineString object of the measured length or sketched line in map coordinates. When mode is measureArea or drawPolygon, the first single tap begins a polygon. Subsequent single taps add points to the polygon. A double-tap on the map adds a final point and triggers this event passing a GeoJSON Polygon object of the measured area or sketched polygon in map coordinates. While measuring or drawing a shape, the user can pan the map by dragging or zoom the map with the mouse wheel. This will not interrupt their current measuring or drawing. If you allow users to both measure and draw in your app, be sure to check the mode option in your event handler to determine if this event was triggered by measuring or by drawing. For example, you may want to append the shape to the map during drawPolygon but not during measureArea. The loadend event triggers after a loadstart event when the geomap widget has finished loading all pending images. It only triggers once regardless of the number of images loaded. It will not be triggered again until after another loadstart event. The geo argument is currently undefined for this event. You can use this event to hide an indicator that your website is busy downloading images. The services option is an array of service objects. The service objects are JavaScript objects that control how the geomap widget displays map images. A service object has six properties, two of which are required. The id and class properties are optional but at least one is recommended so you can target specific services with the toggle and opacity methods. Each service can have an id that distinguishes it from other service objects in the array. The id is a string and must be follow the HTML element id naming conditions. If present, the id must be unique across all services in all maps as well as unique from any other HTML element on the page. The default service object of a geomap widget does not have an id. Each service can have a class as well. The class is a string and must be follow the CSS class naming conditions. You can consider this as the class of images the service will supply and usually name it after the service, such as osm, mass-gis, etc. The default service object of a geomap widget has the class: osm. All services also get the class geo-service whether you supply a class to the service object or not. Therefore, the default service is both .osm (as part of its service object) and .geo-service (as added by the widget). Unfortunately, class is a reserved word in JavaScript. When you specify class in your service object, you must quote the word class. This is exactly how it's done in jQuery itself when applying attributes to an element based on an object. To quote the jQuery API: A service object has a type property which is either "tiled" or "shingled". Tiled servies will get one image request per tile needed to fill a given view when the map refreshes. The tile request's bbox will only be the size of the given tile. Shingled services will get only one image request each time the map refreshes and the bbox will be the extent of the whole map view. The src property of a service object can be one of the following three options: For tiled services, the image is placed at the tile location specified. For shingled services, the image will fill the whole map view. If the browser's request of the image results in a 404 status the map will not show that tile or image. When src is a function, the argument to that function has the following properties: You can use the properties of this argument to build and return a URL (or initiate an AJAX request and return a Promise). For more infomration about returning a jQuery Promise, please read the section on Deferred Objects in the jQuery API documentation. It might useful to know that, as of jQuery 1.5, the $.ajax method returns a Promise object. If your ajax call returns a URL to an image, your src function can look something like this: When src is a string, those same properties can be used in the template by surrounding each property with: {{:propertyName}}. The default value for src is a function because it is slightly faster than rendering a template and we have better control of the view.index property. However, as an example, we can rewrite the default src function as a template string: Note: Alpha releases used a {{= }} syntax but there is a breaking change in the beta version due to changes in jsRender. Please use the new {{: }} syntax. A couple advantages of using a string are that it is more concise and, unlike a function, can be stored as JSON. You do not have to have template parameters in the string, so if you want a static map image, you can set src to a static URL. The attr property is optional. It stands for attribution and is a way to give credit to the source of your map imagery. It defaults to an empty string if not specified in a service object. When present, the map widget displays the HTML provided on the bottom-left corner of the map when the service is visible. Users can click links but cannot interact with all other text or images. The style property is optional. It contains presentation options for the service. The visibility property defaults to "visible". It determines whether or not the map will show images from this service while refreshing. You can change the visibility of a service either by changing the visibility property of the service object to "visible" or "hidden" and then setting geomap's services option or by using the toggle method of the geomap widget. The latter is recommended because it is a lot faster and does not cause services to be recreated. The opacity defaults to 1.0. It determines how transparent a service is when it is visible. Valid values are floating point numbers between 0 and 1 inclusive. Services with an opacity of 0 will not show on the map even if visible is true. You can change the opacity of a service either by changing the opacity property of the service object and then setting geomap's services option or by using the opacity method of the geomap widget. The latter is recommended because it is a lot faster and does not cause services to be recreated. By default, the geomap widget starts with one service object in the services array. The default service object will display OpenStreetMap data via mapquest open tiles. Setting the services option will replace all existing services with a new set that you specify. You can set a specific part of of a specific service by getting the current array, modifying, adding, or deleting one of the service objects and then re-setting the services option with the modified array. Note: It is always better to set the services option once, during init, rather than adding or modifying services after the map has been created. Some of the following samples show that it is possible to modify the services option after map initialization through the services option even though it's not recommended. The following code is more efficient than the last sample: To change visibility or opacity of a service after you have created the map, you should use the toggle or opacity methods.
The dblclick event triggers when the user double-clicks or double-taps a point on the map. However, it only triggers if the user is not currently performing some other action which might be handled internally by the widget. The geo argument is a GeoJSON Point object of the clicked location in map coordinates. The default action for a double-click/tap is to zoom the map in one level. However, as a developer you can override this by calling e.preventDefault() in your callback. This method toggles or sets the visibility property of service objects in the services array. If you call toggle directly on geomap's div element, it will apply to all services. You can target individual services using a CSS selector based on the map div id and the class supplied for the service in its service object or just the id of the service if supplied in its service object. If the optional boolean value is not supplied, the visibility of the services will be toggled. The change will happen immediately and you do not need to call refresh. This is recommended over manually changing the visibility property of the service object as it does not cause other services to refresh.
Every good widget will clean up after itself. Call destroy to turn your interactive map back to a boring old div. Any content inside the div before you initialized geomap will remain intact. The axisLayout option determines direction of the coordinate system axes. It can be "map" or "image". Maps have a traditional mathematical coordinate system where the ordinate-axis (y-axis) points up. However, graphical images flip the y-axis so that moving down increases in value, which is appropriate in graphic contexts. This is important when you are connecting to a service supplying non-georeferenced (computer graphic) images and want your map control to match that coordinate system layout. You will rarely have to change this unless you are using an graphic image server such as LizardTech Image Server or you just want to use the geomap widget to draw pixel-oriented graphics. This option will affect pixel-to-map coordinate calculation for all service types, i.e., tiled & shingled services. The click event triggers when the user clicks or taps a point on the map and then lets go at the same point within a short time threashold. However, it only triggers if the user is not currently performing some other action which might be handled internally by the widget. The geo argument is a GeoJSON Point object of the clicked location in map coordinates. Once you have an HTML element to target, you can call the geographic map widget's function. The widget creates an interactive map. Users can pan and zoom on desktop and mobile browsers against many different cached tile sets or dynamic map servers. Developers can handle events triggered by user action. The options argument is a JavaScript object that configures the map widget during the first instantiation on a div. No options are required. By default the map will show the whole world using the mapquest open tile set. After initializing a map with your first geomap call, you can get or set most of these options using the following syntax: One exception is pixelSize, which is read-only. The map view refreshes when you change these options: bbox, center, services, tilingScheme, bboxMax, & zoom. bounds of the currently visible viewport bounds of maximum viewport for non-tiled maps center of the currently visible viewport zoom level of the currently visible viewport minimum zoom level for all services in the map maximum zoom level for all services in the map read-only Earth-size of a pixel in the current map viewport determines how the map, user, & developer interact allow or prohit map panning determines how the map reacts to a mouse wheel determines how holding the shift key affects the map cursors to display for each mode format to apply to label while measuring when drawing shapes, defines how they look during drawing defines how geomap draws shapes added via the append method determine the content of the map defines how tiles are placed in the viewport "map" or "image" The geomap widget will match how you use projection with map units. The map unit type (projected or geodetic) you used when you last set the bbox, bboxMax, or the center option will be used as output for options and as values for arguments. If you never set the bbox or center options, the geomap widget will return geodetic coordinates. For example, if you set the map's center option using geodetic coordinates (a longitude, latitude array), future requests for the value of the map's center or bbox options will be returned in geodetic coordinates. However, if you later set the bbox option using web mercator, future requests for the center or bbox options will be returned in that projection. Changing bbox or center will affect all options and arguments that use map units. The options and arguments involved are: To avoid confusion, it is recommended to stick to one map unit type for any single map widget. The geomap widget will use the $.geo.proj object when needed to convert between geodetic and projected coordinates. All event callbacks receive two arguments: the original browser event and an object specific to the map action. The map unit type (projected or geodetic) of the map event arguments depends on the way you initialize the map widget. If you have set the center or bbox option using geodetic coordinates, the event arguments will also be in geodetic coordinates. Like jQuery UI widgets, geomap triggers events directly on the original map div. Programatic changes to options do not trigger events. The dblclick event is special in that you can prevent the default action, zoom-in one level, by calling e.preventDefault() in your callback. This is currently the only geomap event that you can prevent the default action. Calling preventDefault in the callback of any other geomap event has undefined results. There are four geomap event types. The type of event determines what is sent to your event handler as the second argument, geo. With position events the geo argument to your callback is a GeoJSON Point object having two properties: type & coordinates. The coordinates property is a single GeoJSON position, i.e., an array containing the x/longitude and y/latitude value. The geo argument to your callback is a true GeoJSON object and you can pass this object directly to the append method. You can also send it directly to a database for storage knowing that there are no non-GeoJSON properties wasting space. With bbox events the geo argument to your callback is an object with single property, bbox, which is a GeoJSON bounding box. With shape events, the geo argument to your callback is a GeoJSON geometry object having two properties: type & coordinates. The object type will be either Point, LineString or Polygon depending on the current geomap mode: measureLength, measureArea, drawPoint, drawLineString, and drawPolygon. The geo argument to your callback is a true GeoJSON object and you can pass this object directly to the append method. You can also send it directly to a database for storage knowing that there are no non-GeoJSON properties wasting space. With load events, the geo argument is currently undefined. You can add the argument to your handler's argument list if you wish but attempting to access any property on it will cause a JavaScript error. The geomap widget provides some methods to help make interacting map data a little easier. Convert positions between pixel and map coordinates. These methods update the map widget as a whole. Methods that help update objects in the services array. These methods manage geometry or features drawn on the geomap widget itself or on individual servies within the map. The find method allows you to search for shapes appended to the map. Its syntax and service-level operation is slightly different than the other three shape methods so the link is visually broken out from the rest. A geomap style is an object whose properties follow a subset of SVG styling properties. The specific styles that geomap recognizes and to which geometry they apply are listed below. Use the drawStyle option of the geomap widget to define the style used on incomplete lines and polygons as they are being drawn when mode is drawLineString or drawPolygon. Use the shapeStyle option to define the style of shapes drawn after being appended to the map via the append method. Please note that in drawPoint mode, the shape event is triggered immediately and so no shape will appear until you append a point to the map at which time the shapeStyle will be used. All properties apply to Point shapes which means that you can adjust the stroke and fill of the box surrounding the point location. The remove method removes a shape (or array of shapes) that you have previously added with the append method. The existing shapes can be an object references used in a call to append which you have held on to or ones that you retrieved by using the find method. The jQuery UI widget factory returns the original jQuery collection to maintain call chaining. The optional refresh argument determines if geomap refreshes the map graphics after this call to remove. It defaults to true. If you pass false, geomap will remove the shape internally but not immediately redraw the graphics. The changes will display if the user moves the map or you call geomap's refresh method. If the shape is not found on the specified service, the map is not changed and will not be refreshed even if you pass true for the refresh argument. Similar to how you can append shapes to specific services, you can remove shapes from specific services as well. You do this by targeting a service inside a map instead of the map itself for your call to geomap's remove method. For example, the default map service has the CSS class: osm. We can remove a shape from that service specifically by using jQuery to target the service: Shapes appended to a specific service will not be removed by calling remove on the map itself. For example, the shape will remain after this sequence:
To remove all references to a shape from the map and all services, you can use the comma selector and the built-in geo-service CSS class: The scroll option determines what the map widget does when the user rotates a mouse wheel. There are currently three values: default, zoom, and off. However, default is currently the same as zoom. When scroll is default or zoom, users can use a mouse wheel to zoom the map in or out. When set to off, mouse wheel scrolling is ignored. This is useful when the document itself or a section that contains the map requires scrolling due to content. A desktop user will expect to be able to use the mouse wheel to scroll the document and you don't want the map to interfere. For example, if the user's mouse cursor is over a map that's part of a long document, there's a greater chance they will want the mouse wheel to scroll document instead of zooming the map. Set the scroll property to "off" to ensure the wheel will work as expected. The center property gets or sets the center point of the map. By default the value is in geodetic coordinates, e.g., longitude, latitude. You can change the default when you initialize the widget by passing projected coordinates as the center option. Setting a new center point will refresh the map services. If you attempt to initialize both center and bbox at the same time when creating a geomap widget, center will override bbox. The append method adds one shape or an array of shapes to the map. In this documentation, the word shape means a GeoJSON geometry object or a GeoJSON Feature. A FeatureCollection is treated as an array of shapes. When you append more than one shape by using an array or a FeatureCollection, each shape in the array or FeatureCollection's features property is added as a separate shape whereas the other collection geometry types, e.g., MultiPoint, are added as a single shape. This is an important distinction when considering the find method and labels. The find method can potentially return only one shape from an array or one feature of a FeatureCollection but will return all shapes in a MultiPoint (as a reference to the original MultiPoint object supplied to append) even if only one of the coordinates in the MultiPoint intersects the find position. For labeling, each shape in an array and each feature in a FeatureCollection get their own label, however all polygons in a MultiPolygon will share the same label. The geomap widget maintains a reference to your shape. You can use the same object in calls to remove in order to remove the shape from the map at any time. The jQuery UI widget factory returns the original jQuery collection to maintain call chaining. The optional style argument modifies how geomap draws the specific geometry or feature you are adding. Properties supplied in this style will override ones of the same name in geomap's base shapeStyle. Properties not referenced are inheritied from the base style and can change with future changes to the shapeStyle option. Please see the shapeStyle method documentation for information about what properties are valid for this object. The optional label argument will display a label near the shape. Labels are a powerful way to add text, pixel-based graphics, or other HTML and CSS effects to the map. The label string can be any text or HTML. For example, consider the following: In the above example, marker.png will be centered on every point added with a similar label. The regular shape style will not show because the point style has no size. For Point shapes, the top-left of the label is positioned at the Point's only coordinate. For LineString shapes, the label is usually positioned 50% along the shape but will be forced into view if its usual position is out of the map's current bbox. For Polygon shapes, the label is usually positioned at the centroid but will be forced into view if its usual position is out of the map's current bbox. All other non-basic shape types use the shape's centroid. The geomap widget uses a div to position the labels. The div exists inside a container for the service. The div has the CSS class: geo-label. You can use this design to apply regular CSS style to all labels or all labels within a service. The following snippets show examples of using this, assuming the main map div has the id "map" and the default map service (which has the CSS class "osm") has not been changed. One caveat is that, to keep performance high, jQuery Geo will not create the .geo-label container if you do not at least pass an empty string as the label. So, if you want to do something similar to the marker example above, but using the already provided .geo-label div, you will need to pass an empty string as the label. Each .geo-label div is absolutely positioned to the correct location in the map view. Please keep that in mind because changing the position, left or top CSS properties on the .geo-label class may affect your labels drastically. The optional refresh argument determines if geomap refreshes the map graphics after this call to append. It defaults to true. If you pass false, geomap will add the shape internally but not immediately redraw the graphics. The changes will display if the user moves the map or you call geomap's refresh method. The geomap widget allows you to append a shape to a specific service. You do this by targeting a service inside a map instead of the map itself for your call to geomap's append method. For example, the default map service has the CSS class: osm. We can append a shape to that service specifically by using jQuery to target the service: Some of the important advantages with this syntax are: You can add the same GeoJSON object to more than one service, which allows you to give the same object two different styles at the same time. To do this, call append twice with the same object. Once on one service (or the map itself) and a second time on a different service. You can also do this at the same time by using the comma selector in one call to append: If you attempt to add a shape to the map or a service where it already exists, the shape will remain but you will update (or remove) the shape's style or label. Changing the type of geometry, e.g., from Point to LineString, or coordinates of a shape you have appended is not recommended and geomap's behavior is currently undefined. If you wish to do either of these, you should first call remove on the original object and append on a new one. The mode option determines how the map responds to user interaction and which events jQuery Geo triggers for the developer. jQuery Geo puts these modes into four small groups: Basic modes are most common to what people expect to be able to do with a map: drag it around, zoom it in and out, or just have it sit there an look pretty. Drag modes disable panning and turn single swipes into shape events. Draw modes turn user clicks into shape events, panning is allowed. Measure modes display length and area based on clicks and drags. You are free to set mode to any other string, this is called custom modes in jQuery Geo and described at the end of this page. Each mode has a matching property on the cursors option. For example, to change the cursor for drawPoint mode to an I-beam, you can initialize the geomap widget like this: The drawStyle option determines how shapes look while being drawn in all of the draw, drag, and measure modes. The measureLabels option determines how the text is formatted while using the measure modes. You can remove a user's ability to pan the map by setting the panning option to false. Yes, you can disable panning even when mode is set to "pan".
You can shut off mouse wheel scroll in any mode by setting the scroll option to "off". However, when mode is static, setting panning to true or scroll to "zoom" will not enable panning or mouse wheel zoom. In static mode, the geomap widget ignores the panning and scroll options. The label containing the measure length or area text has the geo-measure-label CSS class. To change how the measure text looks, you can update properties in that rule: The default cursor is the default arrow pointer. The map widget displays tiles and map images as normal but the user cannot interact with them, e.g., the user can't pan or zoom in any way, even if the pannable option is set to true. As a developer, you can still call geomap methods and set options in order to change the static map's appearance. Events are not triggered when you change the map programmatically. All regular browser events bubble up to parent elements and eventually the document. No widget-specific events trigger. You are free to handle events on the map div as normal events, e.g., click, but you won't get the geo argument. You can ask the map widget for information such as map locations based on the pixel arguments in the event. See the Inset example for help with this. The default cursor is an open hand in browsers that support data URIs and a four point arrow otherwise. The user can drag the map to pan. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. In pan mode, the geomap widget triggers the following events on the original map div. The default cursor is a crosshair. In this mode the user can perform a marquee zoom by clicking and holding one point and dragging the mouse cursor. A box will form. When the user lets go of the mouse, the map will zoom to the closest approximation of the bbox of the drawn shape. Shingled (dynamic) services are only limited by the ratio between the size of the drawn shape and the map div's current size. Cached services are limited to those as well but also specific map zoom levels so the final bbox will not be as close. The user can also zoom in or out with the scroll wheel as well as double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). This is not a very useful mode for mobile applications but provides a more exact method of zooming into an area for desktop users who want it. In zoom mode the geomap widget triggers the following events on the original map div. The default cursor is a crosshair. Similar to zoom, in this mode the user can click and hold one point and then drag the mouse cursor. A box will form. When the user lets go of the mouse, jQuery Geo will trigger a shape event passing a GeoJSON Polygon representation of the dragged bbox as the geo argument. The Polygon object also has the GeoJSON the bbox property. The user can also click the map instead of dragging a box. In this case, jQuery Geo will still trigger a shape event, but this time it will pass a GeoJSON Point representing the clicked location. The Point object will also have the bbox property with the min and max values matching each other, i.e., bbox[0] (minx) = bbox[2] (maxx) and bbox[1] (miny) = bbox[3] (maxy). The user cannot pan the map while in dragBox mode. The user can zoom in or out with the scroll wheel as well as double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. In dragBox mode the geomap widget triggers the following events on the original map div. The default cursor is a crosshair. In this mode the user can click and hold one point and then drag the mouse cursor. A circle will form from the center outward. When the user lets go of the mouse, jQuery Geo will trigger a shape event passing a GeoJSON Polygon representation of the dragged circle as the geo argument. The Polygon object also has the GeoJSON the bbox property. The user can also click the map instead of dragging a circle. In this case, jQuery Geo will still trigger a shape event, but this time it will pass a GeoJSON Point representing the clicked location. The Point object will also have the bbox property with the min and max values matching each other, i.e., bbox[0] (minx) = bbox[2] (maxx) and bbox[1] (miny) = bbox[3] (maxy). The user cannot pan the map while in dragCircle mode. The user can zoom in or out with the scroll wheel as well as double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. In dragCircle mode the geomap widget triggers the following events on the original map div. The default cursor is a crosshair. In this mode the user can digitize a Point shape by single-clicking or tapping the map. Apart from the default cursor, this mode is similar to pan in that the user can drag the map to pan. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level. A visual point will appear temporarily until they either let go to draw the point or begin panning. Similar to pan mode, the user can drag the map to pan. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. They can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. In drawPoint mode, the geomap widget triggers the following events on the original map div. Note that the shape event replaces the click event. The default cursor is a crosshair. In this mode the user can digitize a LineString shape. The first single-click or tap on the map will begin the shape drawing. Once initialized, subsequent single-clicks will add points to the LineString. Finally, a double-click or tap will end the digitization and trigger the shape event. On a non-touch device a visual line will follow the mouse cursor from the last point to show the user the next segment of the line they will draw. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop drawing the shape alltogether. Similar to pan mode, the user can drag the map to pan, even while drawing a shape. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not drawing, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. In drawLineString mode, the geomap widget triggers the following events on the original map div. The default cursor is a crosshair. In this mode the user can digitize a Polygon shape. The first single-click or tap on the map will begin the shape drawing. Once initialized, subsequent single-clicks will add points to the Polygon. Finally, a double-click or tap will end the digitization and trigger the shape event. On a non-touch device two visual lines will follow the mouse cursor. One from the last point to show the user the next segment of the Polygon they will draw, the other from the first point to show the user an extra segment that will complete the Polygon. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop drawing the shape alltogether. Similar to pan mode, the user can drag the map to pan, even while drawing a shape. However, to allow a user more accuracy during digitization, the map will not continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not drawing, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. In drawPolygon mode, the geomap widget triggers the following events on the original map div. The default cursor is a crosshair. In this mode the user can visually measure the length of lines on the map. The first single-click or tap on the map will begin the measurement. Once initialized, subsequent single-clicks or taps will add points to a LineString being measured. Whenever the mouse moves, a label follows the cursor which displays the total length so far. Touch devices will only see an updated measurment when they add a new point. A double-click or tap will end the measurement and remove all graphics and labels. On a non-touch device a visual line will follow the mouse cursor from the last point to show the user the next segment of the line they are measuring and update the measurement. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop measuring alltogether. Similar to pan mode, the user can drag the map to pan, even while measuring. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not measuring, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. By default the unit of measurment is meters because the default projection is web mercator meters. If you change the tilingScheme (on tiled services) or switch to a shingled service, the unit of measurment will be based on your new service's units. In measureLength mode, the geomap widget triggers the following events on the original map div. The default cursor is a crosshair. In this mode the user can visually measure an area on the map. The first single-click or tap on the map will begin the measurement. Once initialized, subsequent single-clicks or taps will add points to a Polygon being measured. Whenever the mouse moves, a label follows the center of the polygon that displays the total area so far. Touch devices will only see an updated measurment when they add a new point. A double-click or tap will end the measurement and remove all graphics and labels. On a non-touch device two visual lines will follow the mouse cursor. One from the last point to show the user the next segment of the Polygon they will draw, the other from the first point to show the user an extra segment that will complete the Polygon we need to calculate area. On all devices, the next segment becomes visible when the user confirms the next point location by clicking or tapping. At any point, the user can hit the escape key to remove one point or, if there is only one point, stop measuring alltogether. Similar to pan mode, the user can drag the map to pan, even while measuring. The map will continue panning a little after the user lets go. They can zoom in or out with the scroll wheel. While not measuring, they can also double-click or double-tap to zoom in one level. On some multitouch devices, users can use two fingers to "pinch zoom" (currently not available on Android). The user can hold the shift key to temporarily switch to zoom mode. By default the unit of measurment is meters because the default projection is web mercator meters. If you change the tilingScheme (on tiled services) or switch to a shingled service, the unit of measurment will be based on your new service's units. In measureArea mode, the geomap widget triggers the following events on the original map div. As mentioned above, you can also set mode to any other string. It will behave exactly like pan mode. However, you can set a different cursor: The above example creates a new custom mode, click, and sets the geomap widget to that mode during initialization. When the widget is in this mode, it will behave exactly like pan, but have a crosshair. This means you will get all the same events as pan: move, click, dblclick & bboxchange. A mode like this is useful if you want to give users more accuracy when clicking the map. Custom modes will still allow panning. While panning, the cursor will temporarily switch to the pan cursor. You can disable panning for your mode by setting the widget's panning option to false whenever you change the mode option. In this last example, we create a new map with two modes, find and remove. They both trigger the click event so we can check our current mode and behave differently depending on which one is set, or do nothing if we're not in find or remove mode. The move event triggers when the user moves the mouse cursor while the cursor is over the map. However, it only triggers if the user is not currently performing some other action such as panning. The geo argument is a GeoJSON Point object of the location under the mouse cursor in map coordinates. The toPixel method takes a single GeoJSON position (Point.coordinates), an array of GeoJSON positions (MultiPoint.coordinates or LineString.coordinates), an array of arrays of positions (MultiLineString.coordinates or Polygon.coordinates) or an array of arrays of arrays of positions (MultiPolygon.coordinates). It returns the pixel coordinates for all of the map positions. You can pass geodetic (lon, lat) or projected coordinates regardless of how you last set the bbox or center options. The empty method removes all shapes previously added with the append method. The jQuery UI widget factory returns the original jQuery collection to maintain call chaining. The optional refresh argument determines if geomap refreshes the map graphics after this call to empty. It defaults to true. If you pass false, geomap will remove all shapes internally but not immediately redraw the graphics. The changes will display if the user moves the map or you call geomap's refresh method. Similar to how you can remove shapes from specific services, you can empty specific services of all shapes as well. You do this by targeting a service inside a map instead of the map itself for your call to geomap's empty method. For example, the default map service has the CSS class: osm. We can remove all shapes from that service specifically by using jQuery to target the service: Calling empty on the map widget will not remove shapes that have been appended to services. To remove all shapes from the map and all services, you can use the comma selector and the built-in geo-service CSS class: The jQuery Geo plugin has one widget, geomap, that you can instantiate on any div with a computable width and height. By default, this one line of code will create a fully functional map on your page showing the whole world and using OpenStreetMap data via the mapquest open tile set. The default units are longitude & latitude degrees which is the most common format for GPS and other online spatial data. You can set the center and zoom of the map at the same time you initialize it by passing a JavaScript object of options. Please note that longitude is the first value, x, even though it is commonly spoken second. This plugin does not distinguish between lon/lat and any other x/y coordinate system. The above example will show the City of Boston. The value passed to the center property is a GeoJSON position, which is an array with an x value followed by a y value. If you need help determining the center point values the events example can help. Pan and zoom the map to an area and click the location you want. Then copy the coordinates value displayed under the geo argument heading of the click event and paste it into you code. The geographics widget in $.geo handles all shape drawing. The geomap widget uses it internally and you can use it outside of geomap to draw GeoJSON geometry that has already been converted to pixel coordinates onto any element. The options argument is a JavaScript object that configures the graphics widget during the first instantiation on a div. No options are required. By default the graphics widget will draw all shapes with a dark red outline and mostly transparent red fill. The geographics widget provides methods to draw various GeoJSON geometries on the canvas. Remember that the geometries must have either already been converted to pixel coordinates or created initially with a pixel coordinate system in mind. Our geospatial plugin's only widget is a geographic map that you can create on any div with a computable width and height. If the div is not already in relative, absolute or fixed position, the widget will force relative positioning. The div size does not have to be so specific. As in the above example, you can have the map fill the window by setting position to either absolute or fixed and the top, right, bottom and left properties to all zero. The map will follow the size of the window and recenter when the size of the window changes. Fixed position is preferred because it will not create scroll bars when making the window smaller. However, keep in mind that fixed position is not supported by IE6 and can be odd on some mobile browsers. If you do use absolute position, you can set the overflow style property on the body element to hidden and avoid scroll bars. The map supports divs that have padding, borders and margins. The plugin will create the map where text would normally go in such a situation, i.e., the map content will be inset from the border by the padding amount. Any elements inside the map div can be absolutely positioned and will not interfere with map operation. Map images will appear beneath them. This is useful if you want to layout a scale bar for example. This rather large scale bar will not interfere with a user trying to pan the map. Ignore the scale bar value in this example, it's static text. The geomap widget works on modern mobile browsers without any additional JavaScript. However, some web design is necessary. For starters, as with any mobile development you should add a viewport meta tag into your head element. This should appear above most other tags so the mobile browser can get ready for a mobile page before doing any other work. For a fullscreen map, you can also add a maximum-scale attribute. If you have done any other mobile web developement, you're probably frowning at my decision to disable the default zoom capability of the device's web browser. If you haven't done much with mobile, I am disabling double-tap to zoom a page by setting the min and max scale to 1. In almost all other cases, I would agree that disabling browser zoom is a bad user experience, however for a full-screen mapping application, double-tap has a whole new meaning and users expect it to zoom the map itself, not the page. It is in this case only that I suggest you disable browser page zoom. If you are targeting modern mobile browsers such as iOS, Android, Windows Phone 7 or Opera Mobile, you can used fixed positioning and the HTML for the full screen mobile app would look like the first fullscreen example: Other mobile browsers are currently untested.
This example uses $.geo.WKT.stringify to turn your drawn GeoJSON objects into WKT. The Parse button uses $.geo.WKT.parse to read valid WKT from the text box and add shapes to the map.
This example uses the zoom method (as opposed to the zoom option) to change the zoom by relative amounts. Input a number of levels by which to change and click zoom. Negative values zoom out. This page is similar to the regular empty example but tests removing all shapes from a specific service instead of the map itself. This page tests various style properties using the drawStyle option to change the style displayed when a user is drawing shapes in drawLineString and drawPolygon modes. This example shows how you can set a service's src property to a jsRender template string. The src property of the service object for this map is set to: "http://tile.openstreetmap.org/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png"bboxchange
type
bboxchange
init
$( selector ).geomap( {
bboxchange: function( e, geo ) { }
} );
bind
$( selector ).bind( "geomapbboxchange", function( e, geo ) { } );
} );zoom
type
Number
default
0
init
$( selector ).geomap( { zoom: 0 } );
get
var zoom = $( selector ).geomap( "option", "zoom" );
set
$( selector ).geomap( "option", "zoom", 7 );zoomMax
type
Number
default
Number.POSITIVE_INFINITY
init
$( selector ).geomap( { zoomMax: 17 } );
get
var zoomMax = $( selector ).geomap( "option", "zoomMax" );
set
$( selector ).geomap( "option", "zoomMax", 7 );find
return type
Array<Object> ( GeoJSON objects )
syntax
.geomap( "find", Object point (GeoJSON Point), Number pixelTolerance )
.geomap( "find", shape selector )
usage
var existingShape = $( map or service selector ).geomap( "find", { type: "Point", coordinates: [ -71.098709, 42.330322 ] }, 8 )
var allShapes = $( map or service selector ).geomap( "find", "*" )geometry search
selector search
service-level shapes
var osmShapes = $( "#map .osm" ).geomap( "find", [ -71, 42 ], 8 );var point = {
type: "Point",
coordinates: [ -71, 42 ]
};
// add the shape to the osm service
$( "#map .osm" ).geomap( "append", point );
// use the original point to search for shapes on the map widget
var shapes = $( "#map" ).geomap( "find", point, 3 );// attempt to search the osm service and a second service at the same time
var shapes = $( "#map .osm,#map .massgis" ).geomap( "find", point, 8 );// find shapes on the default service and a second service
var osmShapes = $( "#map .osm" ).geomap( "find", point, 8 ),
massgisShapes = $( "#map .massgis" ).geomap( "find", point, 8 );// the following are invalid and their return value is undefined
var multiTarget = $( "#map .massgis,#map .osm" ).geomap( "find", "*" );
var shapeSubSelector = $( "#map" ).geomap( "find", ".massgis *" );
// proper way to get all shapes from multiple services
var osmShapes = $( "#map .osm" ).geomap( "find", "*" ),
massgisShapes = $( "#map .massgis" ).geomap( "find", "*" );zoom
return type
undefined
syntax
.geomap( "zoom", Number numberOfLevels )
usage
$("#map").geomap( "zoom", 1 )
$("#map").geomap( "zoom", -2 )// set the map to zoom level 2
$("#map").geomap( "option", "zoom", 2 );
// zoom the map in 2 levels from its current zoom
$("#map").geomap( "zoom", +2 );drawStyle
type
Object ( geomap style )
default
{
borderRadius: "8px",
color: "#7f0000",
fillOpacity: .2,
height: "8px",
opacity: 1,
strokeOpacity: 1,
strokeWidth: "2px",
visibility: "visible",
width: "8px"
}
init
$( map selector ).geomap( { drawStyle: { color: "green" } } );
get
var drawStyle = $( map selector ).geomap( "option", "drawStyle" );
set
$( map selector ).geomap( "option", "drawStyle", { strokeWidth: "4px" } );bbox
type
Array ( GeoJSON bounding box )
default
[ -180, -85, 180, 85 ]
init
$( selector ).geomap( { bbox: [ -71, 40, -69, 44 ] } );
get
var bbox = $( selector ).geomap( "option", "bbox" );
set
$( selector ).geomap( "option", "bbox", [ -122, 42, -118, 46 ] );
bboxMax
type
Array ( GeoJSON bounding box )
default
[ -180, -85, 180, 85 ]
init
$( selector ).geomap( { bboxMax: [ -71, 40, -69, 44 ] } );
get
var bboxMax = $( selector ).geomap( "option", "bboxMax" );
set
$( selector ).geomap( "option", "bboxMax", [ -75.696, 38.804, -73.696, 41.287 ] );
measureLabels
type
Object
default
{
length: "{{:length}} m",
area: "{{:area}} sq m"
}
init
$( selector ).geomap( { measureLabels: { length: "{{:length}} meters" } } );
get
var measureLabels = $( selector ).geomap( "option", "measureLabels" );
set
$( selector ).geomap( "option", "measureLabels", { area: "{{:area}} square meters" } );resize
return type
undefined
syntax
.geomap( "resize" )
usage
$("#map").geomap( "resize" )pixelSize
type
Number
default
156543.03392799936
init
cannot be initialized
get
var pixelSize = $( selector ).geomap( "option", "pixelSize" );
set
read only
refresh
return type
undefined
syntax
$( map or service selector ).geomap( "refresh" [ , Boolean force ] )
usage
$("#map").geomap( "refresh" )
$("#map").geomap( "refresh", true )
$("#map .my-dynamic-service").geomap( "refresh", true )Dynamic Data
use uncachable URLs
src: function( view ) {
return "my.dynamic.tile.service/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png?_=" + $.now( );
}use the Cache-Control HTTP header
zoomMin
type
Number
default
0
init
$( selector ).geomap( { zoomMin: 5 } );
get
var zoomMin = $( selector ).geomap( "option", "zoomMin" );
set
$( selector ).geomap( "option", "zoomMin", 7 );shift
type
String
default
"default"
init
$( map selector ).geomap( { shift: "default" } );
get
var shift = $( map selector ).geomap( "option", "shift" );
set
$( map selector ).geomap( "option", "shift", "off" );default and zoom
dragBox
off
static maps
loadstart
type
load
init
$( map selector ).geomap( {
loadstart: function( e, geo ) { }
} );
bind
$( map selector ).bind( "geomaploadstart", function( e, geo ) { } );
} );pannable
type
Boolean
default
true
init
$( map selector ).geomap( { pannable: true } );
get
var pannable = $( map selector ).geomap( "option", "pannable" );
set
$( map selector ).geomap( "option", "pannable", false );opacity
return type
undefined
syntax
$( map or service selector ).geomap( "opacity", Number opacity )
usage
$("#map").geomap( "opacity", .5 )
$("#map .osm").geomap( "opacity", .7 )// for example, given the following as the map div
<div id="map"></div>
// and initializing geomap with the following services
$("#map").geomap({
services: [
{
id: "water",
class: "mass-gis",
type: "shingled",
src: function ( view ) { return null; }
},
{
id: "towns",
class: "mass-gis",
type: "shingled",
src: function ( view ) { return null; }
},
{
id: "harbor-cruise",
type: "shingled",
src: function ( view ) { return null; }
}
]
});
// you can later change the opacity of all services
$("#map").geomap("opacity", .8);
// all mass-gis services
$("#map .mass-gis").geomap("opacity", .5);
// or a specific service
$("#harbor-cruise").geomap("opacity", 1.0);tilingScheme
type
Object
default
{
tileWidth: 256,
tileHeight: 256,
levels: 18,
basePixelSize: 156543.03392799936,
pixelSizes: null,
origin: [ -20037508.342787, 20037508.342787 ]
}
init
$( selector ).geomap( { tilingScheme: {
tileWidth: 256,
tileHeight: 256,
levels: 18,
basePixelSize: 156543.03392799936,
pixelSizes: null,
origin: [ -20037508.342787, 20037508.342787 ]
} } );
get
var tilingScheme = $( selector ).geomap( "option", "tilingScheme" );
set
$( selector ).geomap( "option", "tilingScheme", null );
tileWidth (Number) the width in pixels of a single tile tileHeight (Number) the height in pixels of a single tile origin (Array<Number>) a GeoJSON position for the top-left corner of the map tiles in map units, this is used to correctly position tiles into the map view pixelSizes (Array<Number>) an array of all pixel sizes (called resolutions on Esri's products) hosted by the map service, each one represents a zoom level therefore the total number of zoom levels equals the length of the pixelSizes array basePixelSize (Number) the pixelSize represented by the tiles on zoom level 0, used when each pixelSize is a power of two smaller than the previous one levels (Number) the total number of pixelSizes allowed, used in conjuction with basePixelSize to determine how far a user is allowed to zoom shapeStyle
type
Object ( geomap style )
default
{
borderRadius: "8px",
color: "#7f0000",
fillOpacity: .2,
height: "8px",
opacity: 1,
strokeOpacity: 1,
strokeWidth: "2px",
visibility: "visible",
width: "8px"
}
init
$( map or service selector ).geomap( { shapeStyle: { color: "green" } } );
get
var shapeStyle = $( map or service selector ).geomap( "option", "shapeStyle" );
set
$( map or service selector ).geomap( "option", "shapeStyle", { strokeWidth: "4px" } );
$( "#map" ).geomap( );$( "#map" ).geomap(
"append",
{ type: "Point", coordinates: [ -71, 42 ] },
{ strokeWidth: "4px" }
);$( "#map" ).geomap( "option", "shapeStyle", { stroke: "#00f" } );
$( "#map .osm" ).geomap( "option", "shapeStyle", { width: "16px" } )$( "#map .osm" ).geomap(
"append",
{ type: "Point", coordinates: [ -70.5, 42.5 ] }
);
toMap
return type
Array (GeoJSON positions)
syntax
.geomap( "toMap", Array pixelPositions )
usage
var mapPos = $("#map").geomap( "toMap", [ 120, 240 ] )
var mapPositions = $("#map").geomap( "toMap", [ [ 120, 240 ], [ 192, 48 ] ] )cursors
type
Object (map of geomap mode to CSS cursor)
default
{
static: "default",
pan: "move",
zoom: "crosshair",
drawPoint: "crosshair",
drawLineString: "crosshair",
drawPolygon: "crosshair",
measureLength: "crosshair",
measureArea: "crosshair"
}
init
$( selector ).geomap( { cursors: { pan: "move" } } );
get
var cursors = $( selector ).geomap( "option", "cursors" );
set
$( selector ).geomap( "option", "cursors", { pan: "pointer" } );shape
type
shape
init
$( selector ).geomap( {
shape: function( e, geo ) { }
} );
bind
$( selector ).bind( "geomapshape", function( e, geo ) { } );
} );loadend
type
load
init
$( map selector ).geomap( {
loadend: function( e, geo ) { }
} );
bind
$( map selector ).bind( "geomaploadend", function( e, geo ) { } );
} );services
type
Array
default
[ {
"class": "osm",
type: "tiled",
src: function( view ) {
return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'></p>"
} ] );
init
$( selector ).geomap( { services: [ {
"class": "osm",
type: "tiled",
src: function( view ) {
return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "© OpenStreetMap & contributors, CC-BY-SA",
style: {
visibility: "visible",
opacity: 1.0
}
} ] } );
get
var services = $( selector ).geomap( "option", "services" );
set
$( selector ).geomap( "option", "services", [ {
id: "openstreetmap",
type: "tiled",
src: function( view ) {
return "http://tile.openstreetmap.org/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "© OpenStreetMap & contributors, CC-BY-SA"
} ]service object
id
class
The name "class" must be quoted since it is a JavaScript reserved word, and "className" cannot be used since it is not the correct attribute name.
type
src
bbox (Array) A GeoJSON bounding box of the current tile or image in map units. The map unit type (projected or geodetic) depends on how you last set the bbox or center options on the geomap widget.
width (Number) The width of the tile or image in pixels.
height (Number) The height of the tile or image in pixels.
zoom (Number) The current zoom level of the map during this request.
tile (Object) If the service is tiled, this object has column and row properties specifying the location of the tile of this request in the current zoom, otherwise it is null.
index (Number) A whole number which is usually incremented between requests that you can use to cycle image URLs to different index, e.g., if there are four servers hosting the same tile images named tile0, tile1, tile2 and tile3 you can target them in your src function with the string: "tile" + (view.index % 4).
src: function ( view ) { return $.ajax( { ... } ); }src: "http://otile1.mqcdn.com/tiles/1.0.0/osm/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png"attr
style
modifying services
// create a map
var map = $( "#map" ).geomap( );
// get the current services array
var services = map.geomap( "option", "services" );
// add a service
services.push( {
id: "Ortho_MapQuest",
type: "tiled",
src: function (view) {
return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest<a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'><p>"
} );
// hide the first service in the services array
services[ 0 ].style.visibility = "hidden";
// re-set the services option
map.geomap( "option", "services", services );// build an array of service objects ahead of time
var services = [ {
id: "OSM",
type: "tiled",
src: "http://tile.openstreetmap.org/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png",
attr: "© OpenStreetMap & contributors, CC-BY-SA"
style: { visibility: "hidden" } // default to hidden
}, {
id: "Ortho_MapQuest",
type: "tiled",
src: function (view) {
return "http://oatile" + ((view.index % 4) + 1) + ".mqcdn.com/naip/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
},
attr: "<p>Tiles Courtesy of <a href='http://www.mapquest.com/' target='_blank'>MapQuest<a> <img src='http://developer.mapquest.com/content/osm/mq_logo.png'><p>"
} ];
// create a map with all services in place
var map = $( "#map" ).geomap( { services: services } );dblclick
type
position
init
$( selector ).geomap( {
dblclick: function( e, geo ) { }
} );
bind
$( selector ).bind( "geomapdblclick", function( e, geo ) { } );
} );$( "#map" ).geomap( {
dblclick: function( e, geo ) { e.preventDefault(); }
} );toggle
return type
undefined
syntax
$( map or service selector ).geomap( "toggle" [ , Boolean show_or_hide ] )
usage
$("#map").geomap( "toggle" )
$("#map .osm").geomap( "toggle", false )// for example, given the following as the map div
<div id="map"></div>
// and initializing geomap with the following services
$("#map").geomap({
services: [
{
id: "water",
class: "mass-gis",
type: "shingled",
src: function ( view ) { return null; }
},
{
id: "towns",
class: "mass-gis",
type: "shingled",
src: function ( view ) { return null; }
},
{
id: "harbor-cruise",
type: "shingled",
src: function ( view ) { return null; }
}
]
});
// you can later hide all services
$("#map").geomap("toggle", false);
// all mass-gis services
$("#map .mass-gis").geomap("toggle", false);
// or a specific service
$("#harbor-cruise").geomap("toggle", false);destroy
return type
undefined
syntax
.geomap( "destroy" )
usage
$("#map").geomap( "destroy" )axisLayout
type
String
default
"map"
init
$( selector ).geomap( { axisLayout: "map" } );
get
var axisLayout = $( selector ).geomap( "option", "axisLayout" );
set
$( selector ).geomap( "option", "axisLayout", "image" );click
type
position
init
$( selector ).geomap( {
click: function( e, geo ) { }
} );
bind
$( selector ).bind( "geomapclick", function( e, geo ) { } );
} );geomap widget
.geomap( options )overview
options
// get the current value of a single option
var optionValue = $( map selector ).geomap( "option", optionName );
// set a new value for a single option
$( map selector ).geomap( "option", optionName, newValue );
// set new values for multiple options at the same time
$( map selector ).geomap( "option", {
optionName: newValue,
optionName: newValue
} );
bbox
bboxMax
center
zoom
zoomMin
zoomMax
pixelSize
mode
pannable
scroll
shift
cursors
measureLabels
drawStyle
shapeStyle
services
tilingScheme
axisLayout
projection
events
position events
bbox events
shape events
load events
methods
unit conversion
map methods
service modification
shapes
style
geomap style properties
property
default
description
borderRadius
"8px"
The radii of a quarter ellipse that defines the shape of the corner of the outer border of a box drawn around Point shapes, which means it turns your boxes into curved rectangles. If the width, height and borderRadius properties of a style are the same (the default), the point is drawn as a circle.
color
#7f0000
An indirect, fallback value for the fill and stroke properties if they are not set.
fill
undefined
Color to use when drawing the interior of a shape. The area to be drawn consists of any areas inside the outline of the shape. By default, fill will use the value of the color property.
fillOpacity
.2
Specifies the opacity of the drawing operation used to draw the interior of a shape. The final fill opacity also depends on the value of the opacity property.
height
"8px"
The height of a box drawn around Point shapes. Currently only pixel values are allowed. If either width or height are zero, no shape is drawn for the Point.
opacity
1
The object opacity of the entire shape. This is a multiplicative operation when determining the final fillOpacity and strokeOpacity where any fill or stroke operation is made even more translucent if this value is below 1.0.
stroke
undefined
Color to use when drawing along the outline of a shape. By default, stroke will use the value of the color property.
strokeOpacity
1
Specifies the opacity of the drawing operation used to draw the outline of a shape. The final stroke opacity also depends on the value of the opacity property.
strokeWidth
"2px"
The width of the stroke of a shape. A zero value causes no stroke to be drawn. Currently only pixel values are allowed.
visibility
"visible"
Determines if the shape is drawn ("visible") or not drawn ("hidden") on the map. Shapes that are hidden can still be returned by the find method.
width
"8px"
The width of a rounded rectangle drawn around Point shapes. Currently only pixel values are allowed. If either width or height are zero, no shape is drawn for the Point.
remove
return type
jQuery collection
syntax
.geomap( "remove", Object shape ( GeoJSON object ) | Array<Object> shapes [ , Boolean refresh ] )
usage
$( map or service selector ).geomap( "remove", existingShape )
$( map or service selector ).geomap( "remove", existingShape, false )
$( map or service selector ).geomap( "remove", [ existingShape1, existingShape2 ] )delaying refresh
service-level shapes
$( "#map .osm" ).geomap( "remove", shape );$( "#map .osm" ).geomap( "append", shape );
$( "#map" ).geomap( "remove", shape );// remove the shape from both the map widget and any services
$( "#map,#map .geo-service" ).geomap( "remove", shape );scroll
type
String
default
"default"
init
$( map selector ).geomap( { scroll: "default" } );
get
var scroll = $( map selector ).geomap( "option", "scroll" );
set
$( map selector ).geomap( "option", "scroll", "off" );center
type
Array (GeoJSON position)
default
[ 0, 0 ]
init
$( selector ).geomap( { center: [ 0, 0 ] } );
get
var center = $( selector ).geomap( "option", "center" );
set
$( selector ).geomap( "option", "center", [ -71.037598, 42.363281 ] );
append
return type
jQuery collection
syntax
.geomap( "append", Object shape ( GeoJSON object ) | Array<Object> shapes [ , Object style ( geomap style ) ] [ , String label ] [ , Boolean refresh ] )
usage
// a single point, no style, no label, refresh immediately
$(map or service selector).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] } )
// a single line, don't refresh yet
$(map or service selector).geomap( "append", {
type: "LineString",
coordinates: [ [ -71, 40 ], [ -71.5, 41 ] ]
}, false )
// a polygon with a style
$(map or service selector).geomap( "append", {
type: "Polygon",
coordinates: [ [
[-75, 39.7],
[-74.8, 39.3],
[-75.2, 39.3],
[-75, 39.7]
] ]
}, { stroke: "#11117f", strokeWidth: "3px" } )
// an array of geometry objects with a style, don't refresh yet
$(map or service selector).geomap( "append", [
{ type: "Point", coordinates: [ -71, 40 ] },
{ type: "Point", coordinates: [ -70, 39.5 ] },
], { color: "green", strokeWidth: "3px" }, false )
// a point feature with a label
$(map or service selector).geomap( "append", {
type: "Feature",
geometry: {
type: "Point",
coordinates: [ -71, 40 ]
}
}, "My Point" )
// a point with a label, don't refresh yet
$(map or service selector).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, "My Point (don't refresh yet)", false )
// a point with a style & label
$(map or service selector).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, { color: "#00f" }, "Blue Point" )
// a collection of features with a style, each point will get a separate label, don't refresh yet
$(map or service selector).geomap( "append", {
type: "FeatureCollection"
features: [ {
type: "Feature",
geometry: {
type: "Point",
coordinates: [ -71, 40 ]
}
}, {
type: "Feature",
geometry: {
type: "Point",
coordinates: [ -71.2, 40.3 ]
}
} ]
},
{ color: "#00f" },
'<span style="color: #44f;">Blue Point</span>',
false
)styling
labeling
{ width: "0px", height: "0px" }'<div class="marker"></div>'.marker
{
width: 8px;
height: 8px;
background: url(../img/marker.png);
position: relative;
left: -4px;
top: -4px;
}JavaScript
/* add a point to the map itself */
$( "#map" ).geomap( "append", { type: "Point", coordinates: [ -71, 40 ] }, "map point" );
/* add a point to the default map service */
$( "#map .osm" ).geomap( "append", { type: "Point", coordinates: [ -70, 40 ] }, "service point" );
CSS
/* turn the color of all labels blue */
#map .geo-label { color: blue; }
/* make labels on the default basemap service bold */
#map .osm .geo-label { font-weight: bold; }delaying refresh
service-level shapes
$( "#map .osm" ).geomap( "append", shape );
duplicate shapes
// set the basemap service's shapeStyle option to a white halo effect
$( "#map .osm" ).geomap( "option", "shapeStyle", { strokeWidth: "8px", color: "#dedede" } );
// append the shape to both the map widget and basemap service
$( "#map,#map .osm" ).geomap( "append", shape );updating
// add the shape with a green color
$( "#map" ).append( shape, { color: "green" } );
// change the color to blue (shape is the same object as before in this case)
$( "#map" ).append( shape, { color: "blue" } );mode
type
String
default
"pan"
init
$( selector ).geomap( { mode: "pan" } );
get
var mode = $( selector ).geomap( "option", "mode" );
set
$( selector ).geomap( "option", "mode", "drawPoint" );modes
basic
drag
draw
measure
related options
$( selector ).geomap( { cursors: { drawPoint: "text" } } )style
.geo-measure-label { font-size: 1.5em; }static
user experience
events
pan
user experience
events
zoom
user experience
events
dragBox
user experience
events
dragCircle
user experience
events
drawPoint
user experience
events
drawLineString
user experience
events
drawPolygon
user experience
events
measureLength
user experience
events
measureArea
user experience
events
custom modes
var map = $( "#map" ).geomap( {
mode: "click",
cursors: { click: "crosshair" }
} );function setMode( mode ) {
map.geomap( "option", {
mode: mode,
panning: mode !== "click"
} );
}var map = $( "#map" ).geomap( {
mode: "drawPoint",
cursors: {
find: "crosshair",
remove: "crosshair"
},
shape: function( e, geo ) {
// only the draw modes trigger this event
map.geomap( "append", geo );
},
click: function( e, geo ) {
switch( map.geomap( "option", "mode" ) ) {
case "find":
// search for shapes but just alert the user
var shapes = map.geomap( "find", geo, 3 );
if ( shapes.length > 0 ) {
alert( "Found " + shapes.length + " shape(s) !" );
}
break;
case "remove":
// search for shapes and remove one of them
var shapes = map.geomap( "find", geo, 3 );
if ( shapes.length > 0 ) {
map.geomap( "remove", shapes[ 0 ] );
}
break;
default:
// ignore the click event for all other modes: pan, zoom, etc.
break;
}
}
} );move
type
position
init
$( selector ).geomap( {
move: function( e, geo ) { }
} );
bind
$( selector ).bind( "geomapmove", function( e, geo ) { } );
} );toPixel
return type
Array (GeoJSON positions)
syntax
.geomap( "toPixel", Array mapPositions )
usage
var pixelPos = $("#map").geomap( "toPixel", [ -71.098709, 42.330322 ] )
var pixelPositions = $("#map").geomap( "toPixel", [ [ -71.098709, 42.330322 ], [ -71.072617, 42.351608 ] ] )empty
return type
jQuery collection
syntax
.geomap( "empty" [ , Boolean refresh ] )
usage
$( map or service selector ).geomap( "empty" )
$( map or service selector ).geomap( "empty", false )delaying refresh
service-level shapes
$( "#map .osm" ).geomap( "empty" );// empty the map widget and any services
$( "#map,#map .geo-service" ).geomap( "empty" );quickstart
html
<div id="map" style="width: 640px; height: 480px;"></div>
<script src="//code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="//code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>javascript
$("#map").geomap();$("#map").geomap({
center: [ -71.037598, 42.363281 ],
zoom: 10
});geographics widget
.geographics( options )options
methods
html
<div style="width: 640px; height: 480px;"></div>fullscreen
<div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"></div><body style="overflow: hidden;">
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
</body>box model
<style>
#map {
width: 90%;
max-width: 640px;
height: 480px;
padding: 8px;
border: solid 3px #444;
margin: .5em;
background: #ddf;
}
</style>
<div id="map">O HAI</div>inner elements
<style>
#bar {
position: absolute;
top: 10px;
right: 10px;
padding: 16px;
background: red;
opacity: .8;
border-radius: 8px;
text-align: center;
font-size: 10px;
}
#bar div {
width: 96px;
height: 2px;
margin-bottom: 8px;
background: #444;
color: #444;
}
</style>
<div id="map"><div id="bar"><div></div><span>1134 meters</span></div></div>mobile
<meta name="viewport" content="width=device-width, minimum-scale=1"><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><div style="position: fixed; top: 0; right: 0; bottom: 0; left: 0;"></div>
WKT parse & stringify
'
},
// define a second service as a layer on top of the basemap
// we use this service as the target when "target" is set to service in this demo
{
id: "broadband-speedtest",
type: "tiled",
src: "http://www.broadbandmap.gov/StamenTiles/speedtest/speedtest/download/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png",
attr: "Speed Test data maintained by the NTIA, in collaboration with the FCC"
}
];
// create a map with a tilingScheme & with the two tiled services
var map = $( "#map" ).geomap( {
// add a cursor for our custom mode: remove
cursors: { remove: "crosshair" },
// use the services array defined above
services: services,
// these tiled services are in jQuery Geo's default tilingScheme, web mercator
// we don't need to change it but will write it here in comments, for this demo
/*
tilingScheme: {
tileWidth: 256,
tileHeight: 256,
levels: 18,
basePixelSize: 156543.03392799936,
pixelSizes: null,
origin: [ -20037508.342787, 20037508.342787 ]
},
*/
// center & zoom values that default to showing the contenental United States of America
center: [ -89.34, 38.84 ],
zoom: 5,
// the speedtest service only supports zooming out to level 3, lock the map to that min zoom
zoomMin: 3,
// the speedtest service only zooming in to level 10, lock the map to that max zoom
zoomMax: 10,
loadstart: function( ) {
// we can show an indicator when the map widget is loading images via the loadstart event
$("#indicator").show( );
},
loadend: function( ) {
// we can hide the indicator when the map widget is done loading images via the loadend event
$("#indicator").hide( );
},
bboxchange: function( e, geo ) {
// when the bbox changes, update the info section with new option values
updateInfo( );
},
shape: function( e, geo ) {
// both the measure and draw/drag modes trigger the shape event
// but we only want to append for the draw & drag
if ( map.geomap( "option", "mode" ).substr( 0, 3 ) == "dra" ) {
// when the user draws or drags a shape, show it on the map
// the shape event triggers when the user finishes drawing a shape
// the geo argument is a GeoJSON object representing the shape
// for this example, we'll append it to the map forcing an
// individual style that matches the current drawStyle
// make a copy of the current drawStyle
var drawStyle = $.extend( { }, map.geomap( "option", "drawStyle" ) );
// grab the label (if any) from the input
var label = $( "#shapeLabels input" ).val( );
// append the shape using that style
// however, depending on which target is checked, we will append the shape to either the map widget itself or a specific map service
if ( $( "#clickTargetWidget" ).is( ":checked" ) ) {
// if the map is our target, just append the shape to the map
// if there's a label entered, used it
map.geomap( "append", geo, drawStyle, label );
} else {
// otherwise, grab a reference to a service
// ( by id in this case ) and append the shape to that
// the value of the remaining radio buttons matches the id of a service
// if there's a label entered, used it
var serviceToAppend = $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
$( serviceToAppend ).geomap( "append", geo, drawStyle, label );
// also note, that the label is controlled seperately from the shape, by CSS, rather than by jQuery Geo shapeStyle objects
// if you look at the CSS, you will notice:
//
// #broadband-speedtest { color: purple; font-weight: bold; }
//
// which makes all labels on the speedtest service blue text
}
}
},
click: function( e, geo ) {
if ( map.geomap( "option", "mode" ) == "remove" ) {
// when the user clicks the map while in our custom mode, remove,
// we will search for shapes on either the map widget itself
// (and, by design, all map services) or a single, specific map service
// we'll use a nice, fat 5px radius for the searches here, that's what the (, 5) is below
// however, in this demo, we remove any shapes found from either the map or service
// if the map is our target, grab the map reference
// otherwise, grab a reference to a service, in this case, by id
var target = $( "#clickTargetWidget" ).is( ":checked" ) ? map : $( "#" + $( "input[name='clickTarget']:checked" ).val( ) );
// by design, calling find on the map itself returns all shapes at that location
// even if they have been appended to a service
// when target is the service, find is limited to shapes that have been appended there
var shapes = target.geomap( "find", geo, 3 );
// even though we potentially found service-level shapes with the find method,
// calling remove on the map does not remove from all services
// however, here we're calling remove on the same target where we found the shapes
// (note: remove can take an array of shapes, which the find method returns)
target.geomap( "remove", shapes );
}
}
} );
// jQuery UI for pretty button
// (except iOS 5, for some reason)
// (also, don't use user agent sniffing like this, will have to figure out the issue)
if (!navigator.userAgent.match(/OS [4-5](_\d)+ like Mac OS X/i)) {
$( "button, #togglePannable" ).button( );
}
$( ".modes, .scrollOptions, .clickTargets, .toggleTargets" ).buttonset( );
$( "#toggle-info" ).click( function( ) {
// show or hide some map info such as bbox, center and zoom
$( "#mapInfo" ).toggle( );
} );
$( "#togglePannable" ).click( function( ) {
// change the pannable option to allow users to pan or not pan your map
map.geomap( "option", "pannable", $( this ).is( ":checked" ) );
} );
$( ".scrollOptions input" ).click( function( ) {
// set the map's scroll option based on value of the input clicked
// currently, default and scroll are the same; the only other option is off
var scrollValue = $( this ).val( );
map.geomap( "option", "scroll", scrollValue );
} );
$( "#change-mode").click( function( ) {
// show or hide the mode options
$( "#modeOptions" ).toggle( );
} );
$( ".modes input" ).click( function () {
// set the map's mode option based on value of the input clicked
var modeValue = $( this ).val( );
map.geomap( "option", "mode", modeValue );
// if mode is one of the draw/drag modes (or remove), show the target section, otherwise hide it
$( "#clickTarget" ).toggle( modeValue.substr( 0, 3 ) === "dra" || modeValue === "remove" );
// if mode is one of the draw/drag modes,
// show the label inputs & shape style as well
$( "#shapeLabels, #drawStyle" ).toggle( modeValue.substr( 0, 3 ) === "dra" );
// also display the current mode on the button
$( "#change-mode .ui-button-text" ).text( modeValue );
// hide the mode options
$( "#modeOptions" ).hide( );
} );
$( "#drawStyle input" ).change( function( ) {
// when an input of the drawStyle area changes,
// immediately set the property of geomap's drawStyle option
// keep in mind that the three point-only styles (width, height & borderRadius)
// cannot be seen because with drawPoint, the shape event triggers immediately
// without drawing a shape
// this example, however, does use them when appending the shape after a click
// first, we can grab a jQuery reference to the input that changed
var $this = $( this );
// next, we can create an object that represents this change
// this example doesn't, but you can set more than one property
// on geomap's drawStyle option at a time
var styleOption = { };
styleOption[ $this.attr( "name" ) ] = $this.val();
map.geomap( "option", "drawStyle", styleOption );
} );
$( ".toggleTargets input" ).click( function( ) {
// when a service is toggled, we tell the geomap widget to toggle it
// the value of each checkbox input equals the id of a service
var checkboxClicked = $( this );
var serviceToToggle = $( "#" + checkboxClicked.val( ) );
// toggle the service, shapes on the service will also be toggled
serviceToToggle.geomap( "toggle" );
} );
$( "#zoomOut" ).button( "option", {
// just icons for the zoom buttons
icons: { primary: "ui-icon-minus" },
text: false
} ).click( function( ) {
// use the zoom method to zoom out
map.geomap( "zoom", -1 );
} );
$( "#zoomIn" ).button( "option", {
// just icons for the zoom buttons
icons: { primary: "ui-icon-plus" },
text: false
} ).click( function( ) {
// also use the zoom method to zoom in
map.geomap( "zoom", +1 );
} );
// update the info section with initial option values
updateInfo( );
function updateInfo( ) {
// update the info section with option values
$( "#mapInfo td" ).each( function( ) {
// a reference to the current option td element
var optionCell = $( this );
// since each td has a data-option attribute,
// jQuery can extract the option value via the data function
var optionValue = map.geomap( "option", optionCell.data( "option" ) );
if ( $.isArray( optionValue ) ) {
// display array values a little nicer
$.each( optionValue, function( i ) {
optionValue[ i ] = this.toFixed( 2 );
} );
optionCell.text( "[ " + optionValue.join( ", " ) + " ]" );
} else {
optionCell.text( optionValue );
}
} );
}
});
AppGeo-geo-f763e47/docs/examples/js/iecors.js 0000664 0001750 0001750 00000003223 12005347446 017757 0 ustar david david $.ajaxTransport( function( options, originalOptions, jqXHR ) {
var xdr;
return {
send: function( _, completeCallback ) {
xdr = new XDomainRequest();
xdr.onload = function() {
var responses = {
text: xdr.responseText
};
// force status code to 200, XDomainRequest rejects all other successful status codes
if (xdr.contentType.match(/\/xml/)){
// there is no responseXML in XDomainRequest, so we have to create it manually
var dom = new ActiveXObject('Microsoft.XMLDOM');
dom.async = false;
dom.loadXML(xdr.responseText);
responses.xml = dom;
if($(dom).children('error').length != 0) {
var $error = $(dom).find('error');
completeCallback(parseInt($error.attr('response_code')), $error.attr('message_key'), responses);
} else {
completeCallback(200, 'success', responses);
}
} else if (xdr.contentType.match(/\/json/)) {
options.dataTypes.push("json");
completeCallback(200, 'success', responses);
} else {
completeCallback(200, 'success', responses);
// see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334804
}
};
xdr.onprogress = function() { };
xdr.onerror = xdr.ontimeout = function() {
var responses = {
text: xdr.responseText
};
completeCallback(400, 'failed', responses);
};
xdr.open(options.type, options.url);
xdr.send(options.data);
},
abort: function() {
if(xdr) {
xdr.abort();
}
}
};
});
AppGeo-geo-f763e47/docs/examples/zoom.html 0000664 0001750 0001750 00000004035 12005347446 017375 0 ustar david david
zoom
geomap empty service test
geomap find test
Click the geometry!
drawStyle
geomap find service test
Click the geometry!
string service src
jsFiddle >