client map

Emiel Mols edited this page Aug 12, 2015 · 1 revision

Functions (Map.function)

Examples assume that Map = require 'map' is used at the top.

distance(latlong1, latlong2)

Returns the distance in meters between the two locations.

inBounds(latlong, corner1, corner2)

Check if a location (latlong) is inside an area (rectangle between corner1 and corner2).

render(options, content)

Renders a map at the current location. With options you can change certain aspects of the map, content is a function which renders the content of the map. The content function is called with a map object as first argument. The render function return the same object as the content function uses.

Available settings for options:

Option Value (default) Description
minZoom natural number (0) Minimum zoom level of the map
maxZoom natural number (18) Maximum zoom level of the map
zoom natural number (minZoom) Initial zoom level of the map (between minZoom and maxZoom)
latlong function Initial position of the map (string with lattitude and longitude like 52.5,6.7)
attribution boolean (true) Show attribution links or not (normally should be shown, when using multiple maps it could be hidden on all but one)
onTap function Function to be called when the map is pressed, first argument will be the latlong of the tapped location
onLongTap function Function to be called when the map is long-pressed, first argument will be the latlong of the tapped location
clustering boolean (false) Enable automatic marker clustering, effect as shown on this example page, disabled by default
clusterRadius number (80) Maximum radius in pixels for which markers should be clustered when clustering is enabled. If markers are still clustered at the maximum zoom level the user can click the cluster to expand it (see above example).
clusterSpreadMultiplier number (1.0) The multiplier of the spreading distance of the markers when clicking a cluster while on the maximum zoom level.
clusterShowCoverage boolean (true) When hovering a cluster it will show its coverage (area that markers in the cluster are located)
removeMarkersOutsideView boolean (clustering) (temporarity) remove markers from the map when they are outside of the viewport. Should increase performance when a lot of markers are used, might not work correctly when markers have complex content (e.g. a map).

Map object functions

The content function given to the Map.render() function will be called with a map object, below you can find the available functions to manipulate the map. The Map.render() function also returns this object to be able to change or get data from the map later.

getLatlong()

Get the current center location of the map view (reactive).

setLatlong(latlong)

Set the location the map should center on.

getZoom()

Get the current zoom level (reactive).

setZoom()

Set the current zoom level.

getMaxZoom()

Get the maximum zoom level (reactive).

setMaxZoom()

Set the maximum zoom level.

getMinZoom()

Get the minimum zoom level (reactive).

setMinZoom()

Set the minimum zoom level.

getLatlongSW()

Get the location of the south-west corner of the map view (reactive).

getLatlongNW()

Get the location of the north-west corner of the map view (reactive).

getLatlongSE()

Get the location of the south-east corner of the map view (reactive).

getLatlongNE()

Get the location of the north-east corner of the map view (reactive).

moveInView([latlongs], padding)

Sets the map center and zoom in such a way that all provided latlongs are in the map view. Providing a padding will extend the bounds of the latlongs by padding times the viewport width to the left and right, and padding times the viewport height to the top and bottom. Then the new bounds will be kept in the viewport.

marker(latlong, content, options)

Render a marker on the map at the given latlong with the content provided by the content function (the usual Dom functions can be used). In options there is one setting draggeble, which allows users to drag the marker around. If a marker is draggeble this function returns an observable that holds the location of the marker.

Example:

Map.render {}
, (map) !->
	map.marker "52.1,7.1"
		Dom.style
			margin: '-9px 0 0 -25px' # Change anchor for zooming
			backgroundColor: '#FFF'
		Dom.div !->
			Dom.text "Marker"
			Dom.onTap
				cb: !->
					log "Short tap"
					Modal.show "short tap"
					map.setLatlong "53,6.8"
				longTap: !->
					log "Long tap"
					Modal.show "Long tap"
					map.setLatlong "53,6.8"

circle(latlong, radius, options)

Render a circle on the map (scales when zooming the map) at the given latlong and with the given radius in meters. For options all the properties listed here can be used. Extra options available are onTap (function to be called when the map is pressed, first argument will be the latlong of the tapped location) and onLongTap (function to be called when the map is long-pressed, first argument will be the latlong of the tapped location).

Example:

Map.render {}
, (map) !->
	map.circle "52.1,7.1", 500,
		color: '#0077cf'
		opacity: 0.5
		fillColor: '#0077cf'
		fillOpacity: 0.4

rectangle(corner1, corner2, options)

Render a rectangle on the map (scales when zooming the map) with the given corner locations. For options all the properties listed here can be used. Extra options available are onTap (function to be called when the map is pressed, first argument will be the latlong of the tapped location) and onLongTap (function to be called when the map is long-pressed, first argument will be the latlong of the tapped location).

Example:

Map.render {}
, (map) !->
	map.rectangle "53,6.9", "54,7.9",
		color: '#0077cf'
		opacity: 0.5
		fillColor: '#0077cf'
		fillOpacity: 0.4

polygon([latlongs], options)

Render a polygon on the map (scales when zooming the map) with the given locations. For options all the properties listed here can be used. Extra options available are onTap (function to be called when the map is pressed, first argument will be the latlong of the tapped location) and onLongTap (function to be called when the map is long-pressed, first argument will be the latlong of the tapped location).

Example:

Map.render {}
, (map) !->
	map.polygon ["54,6.5","54,6.0","53,6.2"],
		color: '#0077cf'
		opacity: 0.5
		fillColor: '#0077cf'
		fillOpacity: 0.4

polyline([latlongs], options)

Render a polyline on the map (scales when zooming the map) with the given locations. For options all the properties listed here can be used. Extra options available are onTap (function to be called when the map is pressed, first argument will be the latlong of the tapped location) and onLongTap (function to be called when the map is long-pressed, first argument will be the latlong of the tapped location).

Example:

Map.render {}
, (map) !->
	map.polyline ["54,6.5","54,6.0","53,6.2"],
		color: '#0077cf'
		opacity: 0.5

imageLayer(url, corner1, corner2)

Adds an image to the map, fixed to the two provided locations (use corner1 for the topleft corner, corner2 for the bottomright corner).

Example:

Map.render {}, (map) !->
    map.imageLayer Plugin.resourceUri('image.png'), "53,6.9", "54,7.9"

Assumes you have an image called 'image.png' in the root folder of your plugin.

Basic topics

API reference

  • API Reference
    • Client
      • [client plugin](client plugin)
      • [client dom](client dom)
      • [client obs](client obs)
      • [client db](client db)
      • [client server](client server)
      • [client page](client page)
      • [client ui](client ui)
      • [client form](client form)
      • [client icon](client icon)
      • [client modal](client modal)
      • [client photo](client photo)
      • [client photoview](client photoview)
      • [client time](client time)
      • [client share](client share)
      • [client map](client map)
      • [client geoloc](client geoloc)
    • Server
      • [server event](server event)
      • [server plugin](server plugin)
      • [server http](server http)
      • [server db](server db)
      • [server photo](server photo)
      • [server time](server time)
  • Example UI elements

Advanced topics

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.