API Docs for: 7.2
Show:

MQA.TileMap Class

Module: MQA

The main TileMap class. This is the starting point for getting a map on the page.

Constructor

MQA.TileMap

(
  • options
)

Parameters:

  • options Object

    an object containing key/value properties to define the initial map state

    • elt HTMLElement

      the parent DOM Element to initialize the map in

    • [zoom] Number default = 2

      the initial zoom level (2-18, inclusive) Default: MINZOOM

    • [latLng] MQA.LatLng optional

      the initial map center as a MQA.LatLng Default: {lat: 38.134557, lng: -98.4375}

    • [mtype] String default = 'map'

      the initial map type to display ('map', 'sat', or 'hyb')

    • [bestFitMargin] Number default = 0

      the margin offset from the map viewport to do a bestfit on shapes

    • [useRightClick] Boolean default = false

      use the basic right click functionality

    • [zoomOnDoubleClick] Boolean default = true

      controls the default double-click behavior

    • [collection] MQA.ShapeCollection optional

      a pre-populated MQA.ShapeCollection that will be added to the map and bestfit on load

Methods

_bestFit

(
  • map
  • rect
  • keepCenter
  • minZoom
  • maxZoom
)
private

Finds the nearest zoom level where the given rectangle fits within the map viewport.

Parameters:

_createControlAnchor

(
  • corner
  • parent
)
private

Create a parent anchor element to perform corner based CSS relative positioning. See comments on initialization of the controlAnchors array in the constructor.

Parameters:

  • corner Number

    MQA.CORNER_TOPLEFT, MQA.CORNER_TOPRIGHT, MQA.CORNER.BOTTOMLEFT, MQA.CORNER_BOTTOMRIGHT

  • parent Element

    If defined, then the element is appended to this parent

Returns

the created anchor div

_doSlide

(
  • endX
  • endY
  • incX
  • incY
  • steps
  • easing
  • easingTime
  • easingDuration
)
private

do slide

Parameters:

_eachControl

(
  • callback
)
private

Iterator method for looping through controls on map

Parameters:

_findTileLayer

(
  • tileLayer
)
Number private

Finds and returns the index of the given tileLayer in the TileLayers collection. Returns -1 if not found.

Parameters:

  • tileLayer TileLayer

    the instance to find in the tile layers collection

Returns <Number>

the index of the tile layer in the tile layers collection

_getAllVisibleShapes

(
  • map
)
private

Returns all visible shapes on the map in all collections.

Parameters:

  • map Object
    • map object to search for visible objects

_handleMouseWheelScroll

() private

Translates mousewheel events into a map zoom / map recenter action.

_initLogos

() private

Init logos on the map. Includes dynamic scale bars.

_onDOMEvent

(
  • domEvt
)
private

Global DOM event handler for events targeted at the map display.

The event system for maps is based off the mousedown event. We essentially trap the DOM MouseEvents and build a higher level abstraction layer on top of it so that we can talk in terms of drag, click, and zoom.

Typically any mouse interaction will result in the creation of a drag delegate, which is handed off to the map Display instance to manage the lifecycle of the interaction.

For more information see:

mqa.tilemap.panzoom.js => TileMapDragDelegate mqa.kernel.js => startDrag

Parameters:

  • domEvt Event

    the triggered DOM event

_resetMouseWheelZoom

() private

Method called to indicate a mousewheel action is finished.

If a new zoom level (and possible latlng) exist, the map will be adjusted appropriately.

Persistent data is then reset for next mousewheel action.

_updateLogoPositions

() private

Go through all logos and adjust positioning. Must be called whenever the width and height changes.

addControl

(
  • control
  • position
)
String

Adds a control to the map. If the control does not have a self assigned ID, a unique ID will be generated for it.
Requires control module to be loaded, see withModule

Parameters:

Returns <String>

The control ID.

addInstance

(
  • t
)

Adds an instance of the Traffic object to the container

Parameters:

addMapType

(
  • type
)

Adds a MapType instance to the list of map types.

Parameters:

addOptimizedRoute

(
  • options
)

Added by the MQA.RoutePlatformService module for ease of adding routing locations to a map.

Parameters:

  • options Object
    • request Object
    • display Object
      • [color] String optional the color of the ribbon
      • [colorAlpha] String optional the color of the alpha of the ribbon
      • [borderWidth] Number optional the width of the route ribbon
      • [draggable] Boolean optional if the route is draggable
      • [draggablepoi] Boolean optional if the route's pois (waypoints) are draggable
      • [dragComplete] Function optional the function to call if the route drag completes, returns the new RouteResult
    • success Function

      the response to call if the route is a success

    • error Function

      the response to call if the route is a failure

addRoute

(
  • options
)

Added by the MQA.RoutePlatformService module for ease of adding routing locations to a map.

Parameters:

  • options Object
    • request Object
    • display Object
      • [color] String optional the color of the ribbon
      • [colorAlpha] String optional the color of the alpha of the ribbon
      • [borderWidth] Number optional the width of the route ribbon
      • [draggable] Boolean optional if the route is draggable
      • [draggablepoi] Boolean optional if the route's pois (waypoints) are draggable
      • [dragComplete] Function optional the function to call if the route drag completes, returns the new RouteResult
    • success Function

      the response to call if the route is a success

    • error Function

      the response to call if the route is a failure

addShape

(
  • shape
)
Object

Adds a shape to the default shape collection.

Parameters:

Returns <Object>

shape added to collection

addShapeCollection

(
  • shapeCollection
)

Adds shapes collection to the default shape collection.

Parameters:

addShapes

(
  • collection
)

addes a collection of shapes to the default collection.

Parameters:

addTileLayer

(
  • tileLayer
)
private

Adds a TileLayer instance to the map. Since tile layers can be layered to compose a single map type, we have explicit add/remove methods for them so that we don't excessively add and remove them from the map.

Parameters:

  • tileLayer TileLayer

    the tile layer to add

attachStubEvents

(
  • target
  • names
)
private

Attach all camel-cased event names to the target object.

Parameters:

bestFit

(
  • keepCenter
  • minZoomLevel
  • maxZoomLevel
)

Changes the map viewport and zoom level to fit all the shapes currently on the map.

Parameters:

  • keepCenter Boolean

    Specify if the map should maintain its current center point.

  • minZoomLevel Number

    Minimum zoom level to use even if the rect needs a farther out zoom level to fit.

  • maxZoomLevel Number

    Maximum zoom level to use even if the rect needs a closer in zoom level to fit.

connectSuppressEvents

(
  • targetElt
)

If putting an element over the map and not explicitly capturing mousedown or click, these will typically bubble up to the map where they will typically cause a drag/pan operation. Call this function with the element you are overlaying on the map to suppress these actions. Call disconnectSuppressEvents when done.

Parameters:

  • targetElt Element

createStubEvent

(
  • camelCasedName
)
private

Creates a stub event function suitable to be placed in the TileMap prototype.

Parameters:

createToggleBase

(
  • control
)
Node

Creates the toggle control div and appends it to the corner anchor.

The toggles get their own special div inside the anchor, since they are designed as inline-block spans. This is so they can be localized with variable length text, still look correct, and not overlap each other.

Parameters:

Returns <Node>

the toggle base div

disableMouseWheelZoom

()

Disables mousewheel zooming functionality.
Requires 'mousewheel' module to be loaded, see withModule

disconnectSuppressEvents

(
  • targetElt
)

Disconnects the event suppression logic from the target element.

Parameters:

dispose

()

Destroy the tile map. TODO: This should detach events and delete the map.

easing

(
  • time
  • duration
)
Array

An easing function for smooth animation when sliding the map

Parameters:

  • time Number

    Number of milliseconds into the animation

  • duration Number

    Number of milliseconds total for the animation

Returns <Array>

[x,y] pair of resulting step values

effect

(
  • start
  • delta
  • time
)
Number

The easing effect: Slow > Fast > Slow

Parameters:

  • start Number

    The starting value of the number to be animated

  • delta Number

    The total increase/decrease to be applied to the number

  • time Number

    Number of milliseconds into the animation

Returns <Number>

The resulting numerical position given the time

enableMouseWheelZoom

(
  • [options]
)

Enables mouse scroll wheel zooming behavior to the map.
Requires 'mousewheel' module to be loaded, see withModule

NOTE: Options are set every time, so if you want custom behavior you must give the options every time you enable mousewheel zoom.

Parameters:

  • [options] Object optional
    • [centerOnZoomIn] Boolean default = true
    • [centerOnZoomOut] Boolean default = false
    • [zoomInterval] Number default = 200

      milliseconds

geocodeAndAddLocations

(
  • location
  • [callback]
)

Added by the MQA.Geocoder module to easily add geocoded locations to the map.
Requires 'geocoder' module to be loaded, see withModule

Parameters:

  • location Array | Object | String

    The location(s) to geocode.

  • [callback] Function optional

    The name of the callback function where a single parameter of the raw response will be passed.

Example:

map.geocodeAndAddLocations([ 'Littleton CO', { city: 'Steamboat Springs', state: 'CO' }], myCallbackFunction);

getBounds

(
  • dx
  • dy
)
MQA.RectLL

Gets the current bounds of the map with optional insets.

Parameters:

  • dx Object

    the number of pixels to add(substract) from left(right)

  • dy Object

    the number of pixels to add(substract) from left(right)

Returns <MQA.RectLL>

the current bounding box that represents the map viewport

getByKey

(
  • key
)

Gets a shape by key from the default shape collection.

Parameters:

getCenter

() MQA.LatLng

Gets the current center point of the map.

Returns <MQA.LatLng>

the latlng of the map center

getCenterOffset

(
  • point
  • targetZoom
)
Object

Calculates the needed center lat/lng at the given zoom level to keep the given pixel coordinates at the same location.

Parameters:

Returns <Object>

centerLL

getControl

(
  • control
)

Gets a control based on ID.

Parameters:

  • control String

    The control ID.

getCurrentMapType

() Object

Get the actual MapType instance of the currently selected map type. This is differentiated from getMapType which returns the id of the current map type and is retained for historic compatibility.

Returns <Object>

the current active MapType instance

getDragOffset

() MQA.Point

Returns the upper left XY coordinate of the map's display, represents the the location of the map viewport in projected display space.

Returns <MQA.Point>

the XY display coordinate

getMapType

() String

Gets the current map type id

Returns <String>

mapType

getMapTypes

() Array

Gets the array of MapType instances for this map.

Returns <Array>

array of MapType instances

getNewCenterZoom

(
  • rect
)
Array

Return the new center LatLng and zoom level that will fit the map viewport to the given MQA.RectLL.

Parameters:

  • rect MQA.RectLL

    the bounding box to fix the map viewport to

Returns <Array>

getResolution

() Number

Returns the current resolution in meters / pixel

Returns <Number>

the current map resolution

getScale

() Number

Returns the current scale of the map. This is a unitless value which assumes a 72 DPI.

Returns <Number>

the current map scale

getShapeCollection

(
  • collectionName
)
MQA.ShapeCollection

Retrieves shape collection by name from the maps shape collections.

Parameters:

Returns <MQA.ShapeCollection>

collection

getShapeCollectionNames

() Array

Retrieves all the shape collection names for the map.

Returns <Array>

collectionNames

getShapeCollections

() Array

Retrieves all shape collections from the map.

Returns <Array>

collections - array of all shape collections

getShapes

(
  • onlyPOIS
)
MQA.ShapeCollection

Gets shapes from the shape collection.

Parameters:

Returns <MQA.ShapeCollection>

collection

getSize

() MQA.Size

Gets the size of the map in pixels.

Returns <MQA.Size>

size

getZoomLevel

() Number

Gets the current zoom level

Returns <Number>

currentZoomLevel

handleClickEvent

(
  • x
  • y
)
private

End point for all mousedown/mouseup interactions on the map that don't invoke a drag interaction. No core behavior.

To inject custom click handling use MQA.EventManager.addListener and listen for 'click'.

Parameters:

  • x Number

    the local x coord of the click

  • y Number

    the local y coord of the click

handleDblClickEvent

(
  • x
  • y
)
private

End point for a double click mouse event. The core behavior is to zoom in one level and center the map on the latlng coord of the event.

To inject custom click handling use MQA.EventManager.addListener and listen for 'doubleclick'.

Parameters:

  • x Number

    the local x coord of the click

  • y Number

    the local y coord of the click

handleRightClickEvent

(
  • the
)
private

End point for a right click mouse event. No core behavior.

To inject custom click handling use MQA.EventManager.addListener and listen for 'rightclick'.

Parameters:

  • the DOMEvent

    right click DOM MouseEvent

init

() private

Creates the persistent data for mousewheel zooming.

isDraggable

()

is map draggable

Returns

true if the map is draggable, false if it isn't

layerTilesLoaded

(
  • e
)
private

Method to trigger the 'tilesloaded' and 'alltilesloaded' events. 'tilesloaded' is triggered for each tilelayer whose tiles have finished loading 'alltilesloaded' is triggered when all tilelayers' tiles have finished loading

Parameters:

  • e Event

llToDisplay

(
  • ll
)
MQA.Point

Converts a global latlng coordinate to a display coordinate.

Parameters:

Returns <MQA.Point>

the XY display coordinate

llToPix

(
  • latlng
)
MQA.Point

Converts a global latlng coordinate to a DOM XY coordinate

Parameters:

Returns <MQA.Point>

onMapTypeChanged$After

(
  • evt
)
private

map type change processor for controls

Parameters:

  • evt Event

onSizeChanged$After

(
  • evt
)
private

map size change processor for controls

Parameters:

  • evt Event

onZoomEnd$After

(
  • evt
)

Parameters:

  • evt Event

onZoomEnd$After

(
  • evt
)
private

zoomEnd change processor for controls

Parameters:

  • evt Event

panEast

()

pans the map east

panNorth

()

pans the map north

panNorthEast

()

pans the map north east

panNorthWest

()

pans the map north west

panSouth

()

pans the map south

panSouthEast

()

pans the map south east

panSouthWest

()

pans the map south west

panWest

()

pans the map west

pixToDisplay

(
  • point
)
MQA.Point

Coverts a DOM XY coordinate to a display coordinate.

Parameters:

  • point MQA.Point

    the local DOM XY coordinate

Returns <MQA.Point>

the equivalent display coordinate

pixToLL

(
  • point
)
MQA.LatLng

Converts a DOM XY coordinate to a global lat/lng coordinate.

Parameters:

Returns <MQA.LatLng>

latlng the global lat/lng coordinate

placeControl

(
  • control
)

Positions the control on the map.

Parameters:

placeControlAnchors

() private

Places the control anchor divs at the proper positions given current map sizes

removeAllShapes

(
  • [options]
)

Remove all shapes from the map.

Parameters:

  • [options] Object optional
    • [removeTraffic] default = false

      By default, traffic-related shapes are not removed. Set to true to remove traffic display shapes.

    • [removeDrawings] default = false

      By default, user-drawn shapes are not removed. Set to true to remove user-drawn shapes.

removeControl

(
  • control
)

Removes a control from the map.

Parameters:

removeMapType

(
  • type
)

Removes a map type. If the map type to remove is the active map type, it is deactivated first.

Parameters:

  • type Object

    instance to remove

removeRoute

()

Added by the MQA.RoutePlatformService module for ease of removing route.

removeShape

(
  • shape
)

Removes the shape passed in from the default shape collection.

Parameters:

removeShapeCollection

(
  • collectionName
)

Removes named shape collection from map shape collections. Also see MQA.TileMap._clearCollectionContentsOnRemoval for default behavior of removing a shapecollections contents when removing it from the map.

Parameters:

removeTileLayer

(
  • tileLayer
)
private

Removes a tile layer. A tile layer will only be physically removed from the DOM when its reference count reaches zero. This allows creative use of tile layers with overlapping map types. When switching between map types that share the same physical tile layers, as long as the new map type is activated on the map first and then the old is deactivated, any shared tile layers will be preserved in the DOM.

Parameters:

  • tileLayer TileLayer

    instance previously passed to addTileLayer

replaceShapeCollection

(
  • sourceCollection
  • targetCollectionName
)

Replaces shapeCollection. UNIMPLEMENTED

Parameters:

replaceShapes

(
  • collection
)

replaces default collection shapes from a collection of shapes passed in.

Parameters:

restoreState

()

Restores the saved map position, zoom level, and map type.

reverseGeocodeAndAddLocation

(
  • location
  • [callback]
)

Added by the MQA.Geocoder module to easily reverse geocode a lat/lng and add the locations to the map.
Requires 'geocoder' module to be loaded, see withModule

Parameters:

  • location MQA.LatLng

    The lat/lng of the location.

  • [callback] Function optional

    The name of the callback function where a single parameter of the raw response will be passed.

Example:

var latlng = new MQA.LatLng(39.743943, -105.020089);

map.reverseGeocodeAndAddLocation(latlng);

saveState

()

Stores the current map position, zoom level, and map type.

setCenter

(
  • latLng
  • zoom
)

Sets the current center

Parameters:

  • latLng Object

    Object containing a lat and lng property

  • zoom Number

setCenterAnimate

(
  • latLng
  • level
  • [options]
)

Animate setting the center and a resolution change simultaneously.

Parameters:

setDraggable

(
  • toggle
)

set the map draggable to true/false

Parameters:

  • toggle Boolean

    true or false if the map is draggable

setLogoPlacement

(
  • mapLogo
  • mapCornerPlacement
)

Sets the position of the specified logo at the specified corner placement

Parameters:

setMapType

(
  • mapType
)

Sets the base tile layer to use. (map, sat, hyb)

Parameters:

  • mapType String

    the type of tile layer to use

setSize

(
  • [size]
)

Resizes the map.

Parameters:

  • [size] MQA.Size optional

    MQA.Size instance containing the new width and height of the map. If no size is passed, the map will resize to fit its container div.

setZoomLevel

(
  • level
)

Sets the zoom level

Parameters:

  • level Number

    the zoom level to change to

setZoomLevelAnimate

(
  • level
  • [options]
)

Animates a zoom level transition to a given target level. If specified, the number of steps indicates the maximum number of interpolations to do and the timeMs specifies how long to do them in.

Parameters:

shapeCollectionCount

() Integer

Get the count of shape collections for the map.

Returns <Integer>

count

slideMapToPoint

(
  • x
  • y
)

Slide the map to the desired point.

Parameters:

zoomToRect

(
  • rect
  • keepCenter
  • minZoom
  • maxZoom
)

Zoom the map to the closest zoom level that fits the specified rectangle.

Parameters:

  • rect MQA.RectLL

    The rectangle to use as a boundary

  • keepCenter Boolean

    Specify if the map should maintain its current center point.

  • minZoom Number

    Minimum zoom level to use even if the rect needs a farther out zoom level to fit.

  • maxZoom Number

    Maximum zoom level to use even if the rect needs a closer in zoom level to fit.