How To
Documentation
    Learn More

      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

      ParamTypeDetails
      providerstring

      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 coordinates (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

      
      
      
      
      
      

      Demo