MapQuest.js

L.mapquest.icons

A helper class to generate custom icons for use with L.markers. Uses the same icon set as provided in the Icons API.

L.mapquest.icons.marker(properties)

Syntax

L.marker([0, 0], {
  icon: L.mapquest.icons.marker({
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    shadow: true,
    size: 'md',
    symbol: 'A'
  })
});

Parameters

• options object

  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.

  secondaryColor: The string hex code secondary color of the marker.

  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 'sm'.

  symbol: The string symbol to be rendered inside the marker. Can be a single letter or up to three numbers between 0 and 999.

  Example

  {
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    shadow: true,
    size: 'md',
    symbol: 'A'
  }

Return Value

An L.icon class with an image of a MapQuest marker icon.

Visual Example

L.mapquest.icons.circle(properties)

Syntax

L.marker([0, 0], {
  icon: L.mapquest.icons.circle({
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    shadow: true,
    size: 'md',
    symbol: 'A'
  })
});

Parameters

• options object

  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 circle.

  secondaryColor: The string hex code secondary color of the circle.

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

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

  symbol: The string symbol to be rendered inside the circle. Can be a letter or number between 0 and 999.

  Example

  {
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    shadow: true,
    size: 'md',
    symbol: 'A'
  }

Return Value

An L.icon class with an image of a MapQuest circle icon.

Visual Example

L.mapquest.icons.via(properties)

Syntax

L.marker([0, 0], {
  icon: L.mapquest.icons.via({
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    size: 'md'
  })
});

Parameters

• options object

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

  primaryColor: The string hex code primary color of the via.

  secondaryColor: The string hex code secondary color of the via.

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

  Example

  {
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    size: 'md'
  }

Return Value

An L.icon class with an image of a MapQuest via icon.

Visual Example

L.mapquest.icons.flag(properties)

Syntax

L.marker([0, 0], {
  icon: L.mapquest.icons.flag({
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    shadow: true,
    size: 'md',
    symbol: 'Hello'
  })
});

Parameters

• options object

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

  primaryColor: The string hex code primary color of the flag.

  secondaryColor: The string hex code secondary color of the flag.

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

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

  symbol: The string symbol to be rendered inside the flag. Can be up to 5 letters or numbers.

  Example

  {
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    shadow: true,
    size: 'md',
    symbol: 'Hello'
  }

Return Value

An L.icon class with an image of a MapQuest flag icon.

Visual Example

L.mapquest.icons.construction(properties)

Syntax

L.marker([0, 0], {
  icon: L.mapquest.icons.construction({
    shadow: true,
    size: 'md'
  })
});

Parameters

• options object

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

  severity: The severity level of the icon, as a string, determines the color of the icon: 'low', 'medium', or 'high'. Default is 'low'.

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

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

  Example

  {
    severity: 'low'
    shadow: true,
    size: 'md'
  }

Return Value

An L.icon class with an image of a MapQuest construction icon.

Visual Example

L.mapquest.icons.incident(properties)

Syntax

L.marker([0, 0], {
  icon: L.mapquest.icons.incident({
    shadow: true,
    size: 'md'
  })
});

Parameters

• options object

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

  severity: The severity level of the icon as a string, determines the color of the icon: 'low', 'medium', or 'high'. Default is 'low'.

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

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

  Example

  {
    severity: 'low'
    shadow: true,
    size: 'md'
  }

Return Value

An L.icon class with an image of a MapQuest incident icon.

Visual Example