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