MapQuest.js

L.mapquest.textMarker

L.mapquest.textMarker is used to display clickable/draggable icons with text and subtext on the map.

Syntax

L.mapquest.textMarker([45, -120], {
  text: 'Coffee Shop',
  subtext: 'Iconic coffeehouse chain',
  position: 'right',
  type: 'marker',
  icon: {
    primaryColor: '#333333',
    secondaryColor: '#333333',
    size: 'sm'
  }
}).addTo(map);

Parameters

• text String optional

  Text that appears next to the marker (no text by default).

• subtext String optional

  Text that appears next to the marker below and with smaller font than the text (no subtext by default).

• position String optional, defaults to 'right'

  The position of the text and subtext relative to the marker. The available options are 'right', 'left', 'top', and 'bottom'.

• type String optional, defaults to 'via'

  A string that specifies the type of icon to be rendered. The available options are 'marker', 'via', and 'circle'.

• icon Object optional

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

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

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

  • shadow: A boolean that determines if a shadow is rendered with the icon. Default is true.

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

  • symbol: The string symbol to be rendered inside the marker. Can be a single letter or up to three numbers between 0 and 999. Not available with 'via' markers.

• title String optional, defaults to ''

  Text for the browser tooltip that appear on marker hover (no tooltip by default).

• alt String optional, defaults to ''

  Text for the alt attribute of the icon image (useful for accessibility).

• draggable Boolean optional, defaults to 'false'

  Determines whether the marker is draggable with mouse/touch.

Functions

textMarker.getLatLng()

Returns the current geographical position of the marker in a LatLng object.

textMarker.setLatLng(LatLng latlng)

Changes the marker position to the given point. Returns this.

textMarker.setText({ text: 'string', subtext: 'string'})

Changes the marker text and subtext. Returns this.

textMarker.setIcon({ type: 'marker-type', icon: { IconOptions } })

Changes the marker icon. Returns this.

Visual Example

Visual Example

Visual Example