GeometryControls is a supervisor class used by geometry digiziting controls, like those in Google's MyMaps.
Work is delegated from instances of actual controls (@see MarkerControl, etc) to convenient methods that all control's require,
like constructing InfoWindows, applying styles, saving data, and managing states between the controls. This class can also be used to
create instances of editable geometries from KML (via EGeoXml) or JSON.
Usage: I attempted to make these controls very flexible, given the wide range of possible uses. To that end, the html content
is stored in an html template file (@see #parseMicroTemplate) and contains dynamic elements that can be populated at runtime. In addition,
I also used a very small AOP framework to show how existing functions can be customized, without the need to change the base code, or even
delve into traditional inheritance (@see #aop).
Constructor | Description |
---|---|
GeometryControls(opt_opts, opt_opts.controlPositionFloat, opt_opts.controlPosition, opt_opts.buttonWidth, opt_opts.buttonHeight, opt_opts.buttonBorder, opt_opts.infoWindowHtmlURL, opt_opts.stylesheets, opt_opts.autoSave, opt_opts.cssId, opt_opts.debug) |
Creates the parent class for Geometry Controls |
Methods | Return Value | Description |
---|---|---|
addAutoSaveAspect() |
None |
Add aspects that listen for "Ok" button clicks, triggering an upload to the db TODO - need explicit extra variable (autoSaveListener) for passing references? |
addControl(control) |
None |
Adds a geometry control to this.controls, which are then added to the map Note: Would like to use the constructor name of control, so that name is not hard-coded but inheriting from GControl overrides the original constructor name :( |
bindInfoWindow(geomInfo, geomInfo.index, geomInfo.storage, geomInfo.geometryStyleFunc, geomInfo.undoStyling, geomInfo.commitStyling) |
None |
Binds elements shared between all geometry tools Assumes common id naming between different geometry infowindows Rich text editor might need to be some kind of pre-packaged javascript library |
convertFromMetric(distance1, opt_distance2) |
None |
Returns the distance of one of the sum of two distances in feet/miles with appropriate units |
createButton(required_opts, required_opts.controlName, required_opts.button_opts, button_opts.img_up_url, button_opts.img_down_url, button_opts.tooltip, required_opts.startDigitizing, required_opts.stopDigitizing) |
None |
Creates a button, and attaches listeners |
debug(msg) |
None |
Wrapper function for GLog.write, allows debugging to be turned on/off globally Note: debugging mode is set at instantiation, so that production mode does not incur processing |
getAbsolutePosition(el) |
None |
Utility function for getting the absolute position of an element |
getDefaultPosition(opt_opts, opt_opts.controlPositionFloat, opt_opts.controlPosition) |
GControlPosition |
Required by GMaps API for controls. |
initialize(map) |
DOM Object |
Is called by GMap2's addOverlay method. Creates the button and appends to the map div. Since this is called after being added to map, we can access #addControl to add geometry controls and make them available here. |
loadData(opts, type, url) |
None |
Data Services |
parseMicroTemplate(str, data, node) |
None |
Loads html fragments from a .html template file, and inserts dynamically added values. Note: Public function, called from child controls. Simple JavaScript Templating John Resig - http://ejohn.org/ - MIT Licensed |
parseMicroTmpl(J, I, H) |
None |
|
saveAllData() |
None |
Loops through all stored geometries by accessing variable for storage In all of the the controls that have been added. |
saveData(opts, geomInfo) |
None |
Post data for storage to a db. Options to send all information or just one object? |
serialize(obj) |
None |
Serialize JSON to parameters |
setLocalTimeout(milliseconds, func) |
None |
Utility function for executing functions not in global scope |
showColorPicker(opts, opts.target, opts.) |
None |
Create, then store and show/hide an event-bound color picker |
toggleButtons(button_name) |
None |
Turns on selected digitizer button, turns off the other buttons At the moment, name reference is passed rather than object, is this necessary? |
tooltipFactory(tooltip_opts) |
Object |
Returns a custom tooltip function. Takes care of one time setup variables and functions and stores then in closure. |
zoomToBounds(record) |
None |
Set map center and zoom to a GBounds |
Geometry A bean for storing geometry data in arrays. Titles/descriptions are stored as [][0,1] with 0,1 entries representing current(0)/previous(1) values TODO change title/desc storage to use hash, rather than array
Style A bean for storing style data in arrays
Constructor | Description |
---|---|
MarkerControl(opt_opts, button_opts, opt_opts.img_up_url, opt_opts.img_down_url, opt_opts.name, opt_opts.tooltip, opt_opts.position, position.controlPosition, opt_opts.tooltip, tooltip.anchor, tooltip.cursor_on, tooltip.cursor_off, tooltip.titles, newGeometryOptions, newGeometryOptions.icon, newGeometryOptions.dragCrossMove, newGeometryOptions.title, newGeometryOptions.clickable, newGeometryOptions.draggable, newGeometryOptions.bouncy, newGeometryOptions.bounceGravity, newGeometryOptions.autoPan, multiEdit, htmlTemplateParams, cssId, optionalGeometryListeners, autoSave) |
Markercontrol |
Methods | Return Value | Description |
---|---|---|
addGeometryListeners(marker, html) |
None |
Add's listeners to a geometry. Separated from geometry creation function for easier extension and overriding |
assembleInfoWindowHtml(dataObject) |
None |
Assembles html fragments from geometry html template file at initialization |
bindInfoWindow(marker) |
None |
BindInfoWindow - implement any specific behaviors, then invoke super bindIndoWindow for behaviors in infoWindow |
bindStyleInfoWindow(index) |
None |
Binds Info Window for Marker Styling (change icons, etc) |
changeStyling(index, icon) |
None |
Function that changes style of marker |
checkIconStatus(x, y) |
GIcon |
Check if named icon from html(data) download exists. If not create a new icon, else change its image TODO support for used created icons |
createIcon(opts, name, iconSize, shadow, shadowSize, anchor, wAnchor, images, imageRef) |
None |
CreateIcon - an Icon factory method for creating new icons, which are automatically stored in #MarkerControl.icons object |
createMarker(latlng, html, opt_currentIndex, opt_currentIcon) |
None |
Creates (and recreates) markers |
getDefaultPosition() |
None |
Expected by GControl |
initialize(map) |
DOM Object |
Extend for marker specific implementation |
loadMarkers(-) |
None |
LoadMarkers - loads markers from kml or json, tries to resolve style to existing icon |
markerTooltip(index) |
None |
TODO, a mouseover/out implementation for better tooltips (popup instantly) |
runInitFunctions() |
None |
Remember, all init functions get executed from #initialize because zuper isn't defined until the control is added to zuper, with GeometryControls#addControl, and that's when initialize is called automatically by GControl |
startDigitizing() |
None |
Starts digitizing process, turns on tooltip, calls function for geometry creation |
stopDigitizing(toggleButtons) |
None |
Ends digitizing of a geometry, removes editing listeners, turns off tooltip, and removes geometry overlay TODO candidate for moving entirely to zuper |
tooltip() |
None |
Creates instance of tooltips for MarkerControl, which replaces the function below |
Constructor | Description |
---|---|
PolygonControl(opt_opts, button_opts, opt_opts.img_up_url, opt_opts.img_down_url, opt_opts.name, opt_opts.tooltip, opt_opts.position, position.controlPosition, opt_opts.tooltip, tooltip.anchor, tooltip.cursor_on, tooltip.cursor_off, titles, titles.img_up_url, titles.img_down_url, titles.tooltip, tooltip.callback, newGeometryOptions, newGeometryOptions.strokeColor, newGeometryOptions.strokeWieght, newGeometryOptions.strokeOpacity, newGeometryOptions.fillColor, newGeometryOptions.fillOpacity, opts, opts.clickable, geometryListenerOpts, geometryListenerOpts.mouseoverEditingEnabled, geometryListenerOpts.infoWindowHtmlEnabled, geometryListenerOpts.mouseoverHighlightingEnabled, geometryListenerOpts.infoWindowTabsEnabled, geometryListenerOpts.assembleInfoWindowTabs, multiEdit, htmlTemplateParams, cssId, optionalGeometryListeners, autoSave) |
PolygonControl |
Methods | Return Value | Description |
---|---|---|
addGeometryListeners(polygon, html) |
None |
Add's listeners to a geometry. Separated from geometry creation function for easier extension and overriding |
assembleInfoWindowHtml(dataObject) |
None |
Assembles html fragments for infowWindow from html template file at initialization |
bindInfoWindow(polygon) |
None |
BindInfoWindow - implement any specific behaviors, then invoke super bindIndoWindow for behaviors in infoWindow |
bindStyleInfoWindow(index) |
None |
Binds Info Window for Polygon Styling (change colors, widths, opacity, etc) |
changeStyling(index, styles) |
None |
Function that changes styles of the poly that are not set immediately (like colors). |
createPolygon(coords, html, opt_currentIndex, opt_currentIcon) |
None |
Creates (and recreates) polygons |
extendGPolygon() |
None |
Convenience add getter/setters for objects that need translation between stored and displayed value And do basic input validation (and revert to stored values if values are invalid) Note: if these methods are eventually added to the api, then these methods will need to be updated to use call() to access super method. |
getDefaultPosition() |
None |
Expected by GControl, sets control position |
hoverTooltip(index) |
None |
TODO, a mouseover/out implementation for better tooltips (on the polygons) |
initialize(map) |
DOM Object |
Extend for polygon specific implementation |
loadPolygons(record) |
None |
Loads polygons from json |
newGPolygon(coords, opts) |
None |
Convenience method to be able to pass in options as an object |
runInitFunctions() |
None |
Remember, all init functions get executed from #initialize because zuper isn't defined until the control is added to zuper, with GeometryControls#addControl, and that's when initialize is called automatically by GControl |
startDigitizing() |
None |
Starts digitizing process, turns on tooltip, calls function for geometry creation TODO - break up some of the functions? |
stopDigitizing(toggleButtons) |
None |
Ends digitizing of a poly, removes editing listeners, turns off tooltip, and removes poly overlay |
tooltip() |
None |
Creates instance of tooltips for PolygonControl, which replaces the function below |
Constructor | Description |
---|---|
PolylineControl(opt_opts, button_opts, opt_opts.img_up_url, opt_opts.img_down_url, opt_opts.name, opt_opts.tooltip, opt_opts.position, position.controlPosition, opt_opts.tooltip, tooltip.anchor, tooltip.cursor_on, tooltip.cursor_off, titles, titles.img_up_url, titles.img_down_url, titles.tooltip, tooltip.callback, newGeometryOptions, newGeometryOptions.strokeColor, newGeometryOptions.strokeWieght, newGeometryOptions.strokeOpacity, opts, opts.clickable, opts.geodesic, multiEdit, htmlTemplateParams, cssId, optionalGeometryListeners, autoSave, executeClassExtensions) |
PolylineControl |
Methods | Return Value | Description |
---|---|---|
addGeometryListeners(polyline, html) |
None |
Add's listeners to a geometry. Separated from geometry creation function for easier extension and overriding |
assembleInfoWindowHtml(dataObject) |
None |
Assembles html fragments for infowWindow from html template file at initialization |
bindInfoWindow(polyline) |
None |
BindInfoWindow - implement any specific behaviors, then invoke super bindIndoWindow for behaviors in infoWindow |
bindStyleInfoWindow(index) |
None |
Binds Info Window for Polygon Styling (change colors, widths, opacity, etc) |
changeStyling(index, styles) |
None |
Function that changes styles of the poly that are not set immediately (like colors). |
createPolyline(coords, html, opt_currentIndex, opt_currentIcon) |
None |
Creates (and recreates) polylines |
extendBaseClass() |
None |
AOP Extensions to the PolylineControl Class Put All Custom Behaviors here, so that you can swap in new versions of the file And still have your customizations intact (perhaps they will need tweaking) |
extendGPolyline() |
None |
Convenience add getter/setters for objects that need translation between stored and displayed value And do basic input validation (and revert to stored values if values are invalid) Note: if these methods are eventually added to the api, then these methods will need to be updated to use call() to access super method. |
getDefaultPosition() |
None |
Expected by GControl, sets control position |
hoverTooltip(index) |
None |
TODO, a mouseover/out implementation for better tooltips (on the polylines) |
initialize(map) |
DOM Object |
Extend for polygon specific implementation |
loadPolylines(record) |
None |
Loads polylines from json |
newGPolyline(coords, opts) |
None |
Convenience method to be able to pass in options as an object |
runInitFunctions() |
None |
Remember, all init functions get executed from #initialize because zuper isn't defined until the control is added to zuper, with GeometryControls#addControl, and that's when initialize is called automatically by GControl |
startDigitizing() |
None |
Starts digitizing process, turns on tooltip, calls function for geometry creation |
stopDigitizing(toggleButtons) |
None |
Ends digitizing of a poly, removes editing listeners, turns off tooltip, and removes poly overlay TODO candidate for moving entirely to zuper |
tooltip() |
None |
Creates instance of tooltips for PolylineControl, which replaces the function below |