geo:map

Description

The geoMap directive provides an abstraction layer to other map directives.

Google Maps

API Key
To add the API for Google Maps you need to include a constant on your index page like so with your API Key. <helper:constant name="googleMapApi" value="YOUR_API_KEY_HERE"></helper:constant> Doing this means you do not have to add the Google Map scripts to your index page

Esri Maps

For ESRI you will need to include the CSS and JavaScript from ESRI on your index page.
<script type="text/javascript" src="//js.arcgis.com/3.17/"></script>
<link rel="stylesheet" href="//js.arcgis.com/3.17/esri/css/esri.css">

Usage

as element:
<geo:map
       provider="{string}"
       [response="{string}"]
       [address-field="{string}"]
       [latitude-field="{string}"]
       [longitude-field="{string}"]
       [api-key="{string}"]
       [zoom-level="{string}"]
       [height="{string}"]
       [width="{string}"]
       [scroll-to-zoom="{boolean}"]
       [target="{string}"]
       [url-field="{string}"]
       [url-prefix="{string}"]
       [label-field="{string}"]
       [loading-overlay="{boolean}"]
       [icon="{string}"]
       [icon-field="{string}"]
       [weight-field="{string}"]
       [geocode-server-url="{string}"]
       [javascript-api-url="{string}"]
       [basemap="{string}"]
       [webmap-id="{string}"]
       [options="{object}"]
       [events="{string}"]>
</geo:map>

Directive info

  • This directive creates new scope.

Parameters

Param Type Details
provider string

Map provider to use (Supported values: google, esri)

response
(optional)
string

Name of the response

address-field
(optional)
string

The field containing a full address to geocode to obtain latitude and longitude values. Use this or latitudeField/longitudeField, not both.

latitude-field
(optional)
string

The field containing the latitude.

longitude-field
(optional)
string

The field containing the longitude.

apiKey
(optional)
string

An API key to use with the map platform (if applicable)

zoom-level
(optional)
string

The default zoom level to use for the map. Default is 13 for single results, with a group of results the map will scale automatically to fit the pins into the bounds, zoom level will be applied if the pins still fit within the new bounds..

height
(optional)
string

The height of the map container. Default is 400px.

width
(optional)
string

The width of the map container. Default is 100%.

scroll-to-zoom
(optional)
boolean

Whether the scroll wheel should control the map zoom. Disabled by default.

target
(optional)
string

Specify the link target to use for the map pins. Can be one of '_blank', '_parent', '_self', '_top' or the name of a window. Default value is '_blank'."

url-field
(optional)
string

The field containing the URL to make clickable from the map marker.

url-prefix
(optional)
string

Use this if the URL retrieved from the urlField needs to be prefixed with a value.

label-field
(optional)
string

The field containing the label to use as tooltip for the marker.

loading-overlay
(optional)
boolean

Whether to show an overlay when the map is loading new points.

icon
(optional)
string

The location of the marker image to use for this set of coordinates.

icon-field
(optional)
string

The field from the response to get the icon from.

weight-field
(optional)
string

The field containing information about the weight of the result. (Google Only)

geocode-server-url
(optional)
string

The URL of the geocode server to turn addresses into coodinates (Esri only)

javascript-api-url
(optional)
string

The URL with the location of the JavaScript API (Esri only must be 3.15 or greater)

basemap
(optional)
string

The map to use to display the points on (Esri and Google only)
Google defaults to: ROADMAP Google Options - HYBRID, ROADMAP, SATELLITE, TERRAIN.
Esri defaults to: topo - Esri options

webmap-id
(optional)
string

The id of the web map to add to the esri map. (Only for esri, you must include the esri webmap tag within the geo:map directive).

options
(optional)
object

Extend the current options for the Map (Google Only) (Options Here)

events
(optional)
string

Adds support for filtering results based on the current map position (apply), on zoom (zoom), on drag (drag) and also when drawing a rectangle (draw). (You must define latitude and longitude fields for this to work).


Valid values:-
  • draw

    Allows the user to draw a box on the map which will then return results within the box.

  • apply

    Allows the user to search the currently visible area. (Google only)

  • zoom

    When the user zooms in or out of an area the event "zoom_changed_gmaps" will fire with an object containing the coordinates of the box. (Google only)

  • drag

    When the user drags the map and the selected area changes the event "dragend_gmaps" will fire with an object containing the coordinates of the box. (Google only)

Example

Source