Appearance

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 ​

js
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

js
{
  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 ​

icons marker map

L.mapquest.icons.circle(properties) ​

Syntax ​

js
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

js
{
  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 ​

circle icons map

L.mapquest.icons.via(properties) ​

Syntax ​

js
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

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

Return Value ​

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

Visual Example ​

via icon

L.mapquest.icons.flag(properties) ​

Syntax ​

js
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

js
{
  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 ​

flag icon map

L.mapquest.icons.construction(properties) ​

Syntax ​

js
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

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

Return Value ​

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

Visual Example ​

construction icon map

L.mapquest.icons.incident(properties) ​

Syntax ​

js
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

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

Return Value ​

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

Visual Example ​

incidents icon map