MapQuest.js

L.mapquest.geocodingLayer()

A layer that shows geocoded points on a map with markers. These points can be from the forward, reverse, and batch geocoding APIs.

The geocoding layer also has the option to color code the markers to our Geocode Quality Codes.

Syntax

L.mapquest.key = 'KEY';

let map = L.mapquest.map('basic-geocodingLayer-map', {
  center: [34.0522, -118.2437],
  layers: L.mapquest.tileLayer('map'),
  zoom: 15
});

L.mapquest.geocoding().geocode(
  [
    '1555 Blake St, Denver, CO 80202',
    '1621 Glenarm Place, Denver, CO 80202',
  ],
  createBasicGeocodingLayer
);

function createBasicGeocodingLayer(err, response) {
  map.addLayer(L.mapquest.geocodingLayer({
    geocodingResponse: response
  }));
}

Parameters

• geocodingResponse Object required

  A response object from one of the L.mapquest.geocoding calls. This is data that is used by the layer to render the results.

• marker Object optional

  An object containing any of the following key value options: icon, iconOptions, popupEnabled, and textEnabled.

  icon: A string that specifies the type of icon to be rendered. Default is 'marker'.

  iconOptions: An object containing any of the following key value options: primaryColor, secondaryColor, size.

  • primaryColor: The string hex code primary color of the marker. Default is '#333333'.

  • secondaryColor: The string hex code secondary color of the marker. Default is '#333333'.

  • size: The size of the marker as a string: 'sm', 'md', or 'lg'. Default is 'sm'.

  popupEnabled: A boolean that specifies if a popup is enabled when hovering over markers in the geocoding layer. Default is true.

  textEnabled: A boolean that specifies if address text is rendered to the right of markers on the geocoding layer. Default is true.

• paddingTopLeft Point optional, defaults to [20, 20]

  Sets the amount of padding in the top left corner of a map container that shouldn't be accounted for when setting the view to fit bounds. Useful if you have some control overlays on the map like a sidebar and you don't want them to obscure objects you're zooming to.

• paddingBottomRight Point optional, defaults to [20, 20]

  Sets the amount of padding in the bottom right corner of a map container that shouldn't be accounted for when setting the view to fit bounds. Useful if you have some control overlays on the map like a sidebar and you don't want them to obscure objects you're zooming to.

• qualityCodeColors Object optional

  An object containing any of the following key value options: exact, good, and approximate. These colors are used when useQualityCodeMarkers is set to true.

  exact: The string hex code color of the marker if the quality code is 'exact'. Default is '#1ca747'.

  good: The string hex code color of the marker if the quality code is 'good'. Default is '#feeb41'.

  approximate: The string hex code color of the marker if the quality code is 'approximate'. Default is '#df0021'.

• useQualityCodeMarkers Boolean optional, defaults to false

  A boolean that specifies if markers are color coded to Geocode Quality Codes on the geocoding layer.

Functions

geocodingLayer.getGeocodingResponse()

Returns the geocoding response object that is assigned to the layer.

geocodingLayer.setGeocodingResponse(response)

Sets the geocoding response object of the layer. This will cause the layer to redraw with the new geocoding results.

Events

• geocoding_results_changed Event

  A geocoding_results_changed event is fired when geocoding results are updated on the layer through the setGeocodingResponse function. The response object is returned.

  Example

  geocodingLayer.on('geocoding_results_changed', function(eventResponse) {
    console.log(eventResponse);
  });

• geocoding_marker_clicked Event

  A geocoding_marker_clicked event is fired when a geocoding marker is clicked. The geocoded location is returned in the event object.

  Example

  geocodingLayer.on('geocoding_marker_clicked', function(eventResponse) {
    console.log(eventResponse);
  });

Visual Example

Quality Code Visual Example