[NEW] Perspective Map component gets script callable methods and more component events

Ignition Early Access
1

Exciting news!

As of this morning, the 8.0.4-Nightly build introduces 16 script callable methods and 7 additional component events to the Perspective Map component. We hope you enjoy exploring these new script methods and events as much as we did.

We tried to keep these features consistent with the Leaflet API, however you may notice some slight deviations. See below for more details.

There are no scripting ‘intellihints’ at the moment, but that is something we hope to add very soon.

Questions, comments, suggestions, requests? Feel free to post them below.

Script Callable Component Methods

  • getZoom(): Returns the current zoom level of the map view as a number.

  • getCenter(): Returns the geographical center of the map view as { lat: number, lng: number }.

  • getBounds(): Returns the geographical bounds visible in the current map view as { north: number, northEast: { 'lat': number, 'lng': number }, east: number, southEast: { 'lat': number, 'lng': number }, south: number, southWest: { 'lat': number, 'lng': number }, west: number, northWest: { 'lat': number, 'lng': number }}.

  • getBoundsAsBBoxString(): Returns a string with bounding box coordinates in a ‘southwest_lng,southwest_lat,northeast_lng,northeast_lat’ format. Useful for sending requests to web services that return geo data.

  • zoomIn(delta = number, options = { }): Increases the zoom of the map by delta (zoomDelta by default).

  • zoomOut(delta = number, options = { }): Decreases the zoom of the map by delta (zoomDelta by default).

  • setZoom(zoom = number, options = { }): Sets the zoom of the map. Required: zoom.

  • setZoomAround([point = { 'x': number, 'y': number } | latLng = { 'lat': number, 'lng': number }], zoom = number, options = { }): Zooms the map while keeping a specified geographical point on the map stationary (e.g. used internally for scroll zoom and double-click zoom). Required point | latLng and zoom.

  • fitBounds(latLngBounds = {'corner1': { 'lat': number, 'lng': number }, 'corner2': { 'lat': number, 'lng': number }}, options = { }): Sets a map view that contains the given geographical bounds with the maximum zoom level possible. Required: latLngBounds.

  • fitWorld(options = { }): Sets a map view that mostly contains the whole world with the maximum zoom level possible.

  • panTo(latLng = { 'lat': number, 'lng': number }, options = { }): Pans the map to a given center. Required: latLng.

  • panBy(point = { 'x': number, 'y': number }, options = { }): Pans the map by a given number of pixels (animated). Required: point.

  • flyTo(latLng = { 'lat': number, 'lng': number }, zoom = number, options = { }): Sets the view of the map (geographical center and zoom) performing a smooth pan-zoom animation. Required: latLng.

  • flyToBounds(latLngBounds = {'corner1': { 'lat': number, 'lng': number }, 'corner2': { 'lat': number, 'lng': number }}, options = { }): Sets the view of the map with a smooth animation like flyTo, but takes a bounds parameter like fitBounds. Required: latLngBounds.

  • panInsideBounds(latLngBounds = {'corner1': { 'lat': number, 'lng': number }, 'corner2': { 'lat': number, 'lng': number }}, options = { }): Pans the map to the closest view that would lie inside the given bounds (if it’s not already), controlling the animation using the options specific, if any. Required: latLngBounds.

  • panInside(latLng = { 'lat': number, 'lng': number }, options = { }): Pans the map the minimum amount to make the latlng visible. Use padding, paddingTopLeft and paddingTopRight options to fit the display to more restricted bounds, like fitBounds. If latlng is already within the (optionally padded) display bounds, the map will not be panned. Required: latLng.

Component Methods

  • onMarkerClick: Interaction event. Fired when a marker is clicked. Returns the unique name of the marker { name: string }.

  • onMapClick: Interaction event. Fired when the map is clicked. Returns the lat and lng of the mouse click as it translates on the map { lat: number, lng: number }.

  • onMapMouseMove: Interaction event. Fires as the mouse moves over the map. Returns lat and lng of mouse as it translates on the map { lat: number, lng: number }.

  • onZoomStart: Map state event. Fired when the map zoom is about to change (e.g. before zoom animation). Returns the zoom level { zoom: number }.

  • onZoom: Map state event. Fired repeatedly during any change in zoom level, included zoom and fly animations. Returns the zoom level { zoom: number }.

  • onZoomEnd: Map state event. Fired when the map has change, after any animations. Returns the zoom level { zoom: number }.

  • onMoveStart: Map state event. Fired when the view of the map starts changing (e.g. user starts dragging the map). Returns the map center as lat and lng { lat: number, lng: number }.

  • onMove: Map state event. Fires repeatedly during any movement on the map, include pan and fly animations. Returns the map center as lat and lng { lat: number, lng: number }.

  • onMoveEnd: Map state event. Fired when the center of the map stops changing (e.g. user stopped dragging the map). Returns the new map center as lat and lng { lat: number, lng: number }.

Example Scripts

def doMapStuff(self):
	map = self.getSibling("Map")
	coordinateBounds = {'corner1': {'lat': 39.086798, 'lng': -120.069014}, 'corner2': { 'lat': 38.815319, 'lng': -119.787519 }}
	latLngTahoe = {'lat': 39.086798, 'lng': -120.069014 }
	latLngInductive = {'lat': 38.652511, 'lng': -121.189438 }
	zoomPanOptions = { 'animate': True, 'duration': 3, 'easeLinearity': 0.25, 'noMoveStart': False }
	fitBoundsOptions = { 'padding': { 'x': 100, 'y': 100 }, 'animate': True, 'duration': 3 }
	panPixels = { 'x': 200, 'y': 200 }
​
	# Returns the current zoom level of the map view
	print map.getZoom()
	# Returns the geographical center of the map view as latLng
	print map.getCenter()
	# Returns the geographical bounds visible in the current map view as latLngBounds
	print map.getBounds()
	# Increases the zoom of the map by delta (zoomDelta by default).
	map.zoomIn(delta = 5, options = zoomPanOptions)
	# Decreases the zoom of the map by delta (zoomDelta by default).
	map.zoomOut(delta = 2, options = zoomPanOptions)
   	# Sets the zoom of the map.
	map.setZoom(zoom = 0, options = zoomPanOptions)
	# Zooms the map while keeping a specified pixel on the map (relative to the top-left corner) stationary.
	map.setZoomAround(point = { 'x': 100, 'y': 100}, zoom = 5, options = zoomPanOptions)
	# Zooms the map while keeping a specified geographical point on the map stationary (e.g. used internally for scroll zoom and double-click zoom).
	map.setZoomAround(latLng = latLngTahoe, zoom = 5, options = zoomPanOptions)
	# Sets a map view that contains the given geographical bounds with the maximum zoom level possible.
	map.fitBounds(latLngBounds = coordinateBounds, options = fitBoundsOptions)
	# Sets a map view that mostly contains the whole world with the maximum zoom level possible.
	map.fitWorld(options = fitBoundsOptions)
	# Pans the map to a given center.
	map.panTo(latLng = latLngInductive, options = zoomPanOptions)
	# Pans the map by a given number of pixels (animated).
	map.panBy(point = panPixels, options = zoomPanOptions)
	# Sets the view of the map (geographical center and zoom) performing a smooth pan-zoom animation.
	map.flyTo(latLng = latLngTahoe, options = zoomPanOptions)
	# Sets the view of the map with a smooth animation like flyTo, but takes a bounds parameter like fitBounds.
	map.flyToBounds(latLngBounds = coordinateBounds, options = fitBoundsOptions)
	# Pans the map to the closest view that would lie inside the given bounds (if it's not already), controlling the animation using the options specific, if any.
	map.panInsideBounds(latLngBounds = coordinateBounds, options = fitBoundsOptions)
	# Pans the map the minimum amount to make the latlng visible. Use padding, paddingTopLeft and paddingTopRight options to fit the display to more restricted bounds, like fitBounds. If latlng is already within the (optionally padded) display bounds, the map will not be panned.
	map.panInside(latLng = latLngInductive, options = zoomPanOptions)

For more information, feel free to check out the Leaflet documentation.

8 Likes