Interface mapsjsWidget

Index

Methods

Methods

public addFixedContentElement(element: HTMLElement, mapUnitsX: number, mapUnitsY: number, addAction?: (ele: HTMLElement) => void, dragOptions?: { dragEnabled: boolean; useElementInsteadOfNewGestureOverlay: boolean; downAction?: (downPoint: 'mapsjs'.point) => any; moveAction?: (movePoint: 'mapsjs'.point) => void; upAction?: (upPoint: 'mapsjs'.point) => void; wheelAction?: (delta: number) => void; })

Add a fixed element to the content area which resides at a z-level above tiled map content. These elements do not scale with the map scale. This is used to place markers or callouts on the map

Parameters

  • element: HTMLElement

    Any html that can be added to the DOM.

  • mapUnitsX: number

    The x coordinate of the insertion point in map units.

  • mapUnitsY: number

    The y coordinate of the insertion point in map units.

  • addAction?: (ele: HTMLElement) => void optional
  • dragOptions?: { dragEnabled: boolean; useElementInsteadOfNewGestureOverlay: boolean; downAction?: (downPoint: 'mapsjs'.point) => any; moveAction?: (movePoint: 'mapsjs'.point) => void; upAction?: (upPoint: 'mapsjs'.point) => void; wheelAction?: (delta: number) => void; } optional

    JavaScript object of the form {dragEnabled, useElementInsteadOfNewGestureOverlay, downAction, moveAction, upAction, wheelAction } where dragEnabled flags whether dragging should be enabled on the element, and downAction, moveAction, upAction, and wheelAction are callback functions invoked on mousedown, mousemove, mouseup, and scroll events respectively.

public addPathGeometry(styledGeom: styledGeometry, key: string, addAction?: (svg: SVGElement) => void, removeAction?: (svg: SVGElement) => void): SVGElement

Add a styled path geometry to the content area which resides at a z-level above tiled map content. The geometry is converted to SVG and added to the content area DOM. If an attempt to add a geometry is made with the same key, the geometry is swapped out. You must remove using removePathGeometry for resource cleanup.

Parameters

  • styledGeom: styledGeometry

    The styledGeometry to render.

  • key: string

    String used to tie a geometry to its SVG

  • addAction?: (svg: SVGElement) => void optional

    optional function that is called when mapsjs adds an svg element to the DOM representing this styledGeometry.

  • removeAction?: (svg: SVGElement) => void optional

    optional function that is called when mapsjs adds an svg element to the DOM representing this styledGeometry. rendering in the DOM.

Returns

SVGElement

The SVG element which was added to the DOM.

public beginDigitize(options: beginDigitizeOptions)

Initiates digitization on the map control. This creates a new geometry and adds verticies to the geometry accord to mouse click locations.

Parameters

  • options: beginDigitizeOptions

    JavaScript object of the form { key, shapeType, geometryStyle, styledGeometry, nodeTapAndHoldAction, nodeMoveAction, shapeChangeAction, envelopeEndAction, circleEndAction, supressNodeAdd, leavePath } where key is a a string associated with this geometry, shapeType is the type of shape this geometry is, one of 'polygon', 'polyline', 'multipoint', 'envelope' or 'circle', geometryStyle is a geometryStyle which should be applied to the digitized geometry, styledGeometry is an optional styledGeometry for existing paths to edit, set this to enter edit mode, nodeTapAndHoldAction is a callback invoked when any point in the geometry is clicked and held and has the signature nodeTapAndHoldAction(setIdx, idx), nodeMoveAction is a callback invoked after any node is dragged to a new location and has signature nodeMoveAction(x, y, actionType), shapeChangeAction is a callback that is invoked after the geometry shape changes and, has signature shapeChangeAction(shape), envelopeEndAction is a callback invoked after an envelope is created and has signature envelopeEndAction(envelope), circleEndAction is similar to envelopeEndAction but takes a geometry.polygon representing the circle, and leavePath is a flag that indicates whether the digitized shape should be left on the map after digitization is complete.

public computeMapPointFromPixelLocation(x: number, y: number): point

Gets a point in map units from supplied coordinates pixel units with respect to the currently displayed extents.

Parameters

  • x: number

    The x coordinate in pixels.

  • y: number

    The y coordinate in pixels.

Returns

point

The generated point in map units.

public deleteNodeOnDigitizePath(setIdx: number, nodeIdx: number)

Programmatically delete a node from the currently digitizing path.

Parameters

  • setIdx: number

    The index of the set from which to remove the node.

  • nodeIdx: number

    The index of the node to remove.

public endDigitize()

public flyTo(center: point, zl: number, durationMs?: number, completeAction?: () => void)

Animates parabolically from the current map center and zoom level to the given map center and zoom level.

Parameters

  • center: point

    Desired map center as a point.

  • zl: number

    Desired zoom level.

  • durationMs?: number optional
  • completeAction?: () => void optional

public getActualMapScale(): number

Gets the current actual map scale. This is the ratio of units on the screen to actual units on the earth's surface at the latitude of the current map center.

Returns

number

The ratio of screen units to actual meters.

public getBestFitZoomLevelByExtents(extentsNew: envelope): number

Gets the best fit zoom level based on the supplied map extents for the current display extents in pixels.

Parameters

  • extentsNew: envelope

    New map extents to fit.

Returns

number

The zoom level which best fits the extents.

public getDigitizeSnapshot(): geometry

Gets a snapshot copy of the currently digitizing path.

Returns

geometry

The currently digitizing path.

public getMapCenter(): point

Gets the center of the map in spherical mercator. Use sphericalMercator.deprojectToLatLon static function to convert to a lat/lon.

Returns

point

A point map center

public getMapExtents(): envelope

Gets the current map extents in spherical mercator units.

Returns

envelope

envelope The current map extents.

public getMapUnitsPerPixel(): number

Gets the current map units per pixel.

Returns

number

Map units (meters) per pixel.

public getProjectedMapScale(): number

Gets the current projected map scale. This is the ratio of units on the screen to map units depicted.

Returns

number

Ratio of screen units to map units.

public getTileLayer(key: string): layer

Gets a tile layer from the display stack by its key.

Parameters

  • key: string

    The desired tile layer's key.

Returns

layer

The tile layer associated with the key, or null if no tile layer is associated with the key.

public getTileLayerCount(): number

Gets the current number of tile layers in the display stack.

Returns

number

The number of tile layers in the display stack.

public getViewExtentsInPix(): { w: number; h: number; }

Gets the map extents' width and height in pixels.

Returns

{ w: number; h: number; }

JavaScript object of the form {w, h} where w is the current extents' width in pixels and h is the current extents' height in pixels.

public getZoomLevel(): number

Gets the current zoom level.

Returns

number

The current zoom level.

public isDigitizingEnabled(): boolean

Determines whether a shape is currently being digitized.

Returns

boolean

Whether or not a shape is being digitized.

public moveFixedContentElement(element: HTMLElement, mapUnitsX: number, mapUnitsY: number)

Move an existing fixed content element.

Parameters

  • element: HTMLElement

    The existing DOM element to move.

  • mapUnitsX: number

    The new x coordinate in map units.

  • mapUnitsY: number

    The new y coordinate in map units.

public offsetMapCenterByPixelDelta(dx: number, dy: number)

Offsets the current map center by the specified deltas in pixels.

Parameters

  • dx: number
  • dy: number

public offsetMapCenterByPixelDeltaAnimate(dx: number, dy: number, durationMs?: number)

Offsets the current map center by the specified deltas in pixels - animated version.

Parameters

  • dx: number
  • dy: number
  • durationMs?: number optional

public popSetFromDigitizePath(): Array<number>

Removes the last set from the currently digitizing path.

Returns

Array<number>

The last set from the currently digitizing path in the form [xn,yn].

public popTileLayer(): layer

Removes a tile layer off the top of the display stack

Returns

layer

The removed tile layer.

public pushSetOnDigitizePath()

Forces additional digitized points to be pushed to a new set of the currently digitizing geometry.

public pushTileLayer(tl: layer)

Pushes a supplied tile layer onto the top of the display stack.

Parameters

  • tl: layer

    The desired tile layer.

public redraw()

Forces the map to redraw the currently loaded tile and geometry content. You should not have to call this as redraws are automatically handled during programatic state changes. This would be for edge cases where the developer is affecting internal state in an undocumented way.

public removeAllTileLayers()

Removes all tile layers off the display stack

public removeFixedContentElement(element: HTMLElement)

Removes a fixed content element.

Parameters

  • element: HTMLElement

    The DOM element to remove. Note: This must be the same element added by addFixedContentElement.

public removePathGeometry(key?: string): SVGElement

Removes a styledGeometry from display.

Parameters

  • key?: string optional

    The key of the geometry to remove.

Returns

SVGElement

The SVG element which was removed from the DOM.

public removeTileLayer(tl: layer)

Removes a tile layer off the display stack by reference

Parameters

  • tl: layer

    A tile layer to remove.

public resize()

Updates the map to the size of its container. This updates internal parameters for computing map extents and handling the amount of tile content to download. This is handled automatically if the browser window is resized. But if you are sizing the map programatically (e.g. resizable panel or slider) then call this after the parent container has resized.

public setBackground(b: string)

Sets the background color of the map using a css color string

Parameters

  • b: string

public setContentExtentsMarginInPixels(cem: number)

Sets the margin around the map in pixels for extra content fetched so that tile rebuilding of the display is minimized. This is an advanced property and does not generally need to be adjusted. The default is 128 pixels, or half the width of a tile. This should be increased for maps which are very large in pixels or where panning is constant. This should be decreased for very small maps, such as on mobile devices, or where panning is minimal.

Parameters

  • cem: number

    The content extent margin in pixels.

public setContentRepositionAction(action: (vals: 'mapsjs'.repositionStatsObj) => void)

Set the function called when map content (map tiles and fixed elements) are re-positioned in the DOM. This is done automatically as the map is panned beyond existing content and zoomed to a new level requiring content.

Parameters

  • action: (vals: 'mapsjs'.repositionStatsObj) => void

    The function to call when the map content completes repositioning with signature action(object) where object is of the form { centerX, centerY, zoomLevel, mapUnitsPerPixel }.

public setDrawnContentZorderToTop(flag: boolean)

Sets the z-order of drawn content in relation to the gesture capture panel. The default behavior (false) is to have fixed content and geometry underneath the gesture panel in the DOM. If false, all pointer events are handled by the gesture capture panel and optionally parents of the map control. If true, drawn content will receive pointer events first and will block gestures to the map. If true, digitizing will not function and polygons will block map navigation. In some scenarios you may want to set this to true if you are placing fixed content (such as point features) on the map and need to handle gestures on the placed content. You can call this function at any time to change the order.

Parameters

  • flag: boolean

    Whether or not the fixed content layer should reside above the gesture layer.

public setExtentChangeCompleteAction(action: (vals: 'mapsjs'.extentChangeStatsObj) => void)

Set the function called when the map extents have stopped changing (e.g. after an animated pan or zoom).

Parameters

  • action: (vals: 'mapsjs'.extentChangeStatsObj) => void

    The function to call when the extents finish changing with signature action(object) where object is of the form { centerX, centerY, centerLat, centerLon, zoomLevel, mapScale, mapScaleProjected, mapUnitsPerPixel, extents }.

public setMapCenter(center: point)

Sets the center of the map in spherical mercator. Use sphericalMercator.projectFromLatLon static function to convert from a lat/lon.

Parameters

  • center: point

    The map center as a point

public setMapCenterAnimate(center: point, durationMs?: number, completeAction?: () => void)

Same as setMapCenter except will animate from current map center to the specified location

Parameters

  • center: point

    The map center as a point.

  • durationMs?: number optional
  • completeAction?: () => void optional

public setMapCenterToGeolocationAnimate(durationMs?: number, completeAction?: () => void)

Sets the map center to the current geolocation if supported. The map is animated to the new location.

Parameters

  • durationMs?: number optional
  • completeAction?: () => void optional

public setMaxZoomLevel(zl: number)

Sets the maximum zoom level for the map.

Parameters

  • zl: number

public setMinZoomLevel(zl: number)

Sets the minimum zoom level for the map.

Parameters

  • zl: number

    Desired minimum zoom level.

public setPointerClickAction(action: (pt: 'mapsjs'.point) => void)

Sets function called when map is clicked or tapped.

Parameters

  • action: (pt: 'mapsjs'.point) => void

    The function to call on mouse click or tap with signature action(point).

public setPointerHoverAction(action: (pt: 'mapsjs'.point) => void)

Sets function called when the map pointer hovers over the map.

Parameters

  • action: (pt: 'mapsjs'.point) => void

    The function to call on mouse hover with signature action(point).

public setSuspendMapExtentChangesByGestures(flag: boolean)

Flags whether or not map extent changes can occur through gestures like mouse or touch drag, mouse wheel, or pinch zoom.

Parameters

  • flag: boolean

    Whether or not gestures should affect map extent changes.

public setZoomLevel(zl: number)

Sets the current zoom level.

Parameters

  • zl: number

public setZoomLevelAnimate(zl: number, durationMs?: number, completeAction?: () => void)

Animates the map from the current zoom level to the given zoom level.

Parameters

  • zl: number

    The desired zoom level.

  • durationMs?: number optional
  • completeAction?: () => void optional

public updatePathGeometryStyle(styleNew: geometryStyle, key: string)

Updates an existing path geometry to reflect a style change.

Parameters

  • styleNew: geometryStyle

    The new geometryStyle.

  • key: string

    The key of the geometry to receive the new style.

public zoomDelta(delta: number)

Changes the current zoom level.

Parameters

  • delta: number

    Change to be added to the current zoom level.

public zoomDeltaAnimate(delta: number, durationMs?: number)

Animates a change to the current zoom level.

Parameters

  • delta: number

    Change to be added to the current zoom level.

  • durationMs?: number optional