Icons API

MapQuest Icon Service Banner

Icon Types

We have a variety of icon types including markers, circles, vias, and flags that can be used in both our Static Map API or our MapQuest Plugins for Leaflet.

https://assets.mapquestapi.com/icon/v2/marker@2x.png

https://assets.mapquestapi.com/icon/v2/circle@2x.png

https://assets.mapquestapi.com/icon/v2/via@2x.png

https://assets.mapquestapi.com/icon/v2/flag@2x.png

https://assets.mapquestapi.com/icon/v2/incident@2x.png

https://assets.mapquestapi.com/icon/v2/construction@2x.png

Icon Sizes

Icon scale can be controlled. The icon service returns both standard and retina versions of icons. If the request contains "@2x" then the Icons API returns twice as many pixels for the given icon.

Standard Resolution URL

https://assets.mapquestapi.com/icon/v2/marker.png

Retina Resolution URL

https://assets.mapquestapi.com/icon/v2/marker@2x.png

With retina resolution icons, you need to define the height and width of the icons to downscale them to the correct dimensions on retina screens. Below are tables with the various icon dimensions.

Marker Sizes

marker, marker-sm marker-md marker-lg
Dimensions (in pixels) height: 35px; width: 28px; height: 44px; width: 35px; height: 53px; width: 42px;

Circle Sizes

circle, circle-sm circle-md circle-lg
Dimensions (in pixels) height: 28px; width: 28px; height: 35px; width: 35px; height: 42px; width: 42px;

Via Sizes

via, via-sm via-md via-lg
Dimensions (in pixels) height: 10px; width: 10px; height: 14px; width: 14px; height: 18px; width: 18px;

Flag Sizes

flag, flag-sm flag-md flag-lg
Dimensions (in pixels) height: 30px; width: 60px; height: 35px; width: 70px; height: 40px; width: 80px;

Incident and Construction Sizes

incident, incident-sm, construction, construction-sm incident-md, construction-md incident-lg, construction-lg
Dimensions (in pixels) height: 25px; width: 28px; height: 31px; width: 35px; height: 33px; width: 42px;

Icon Customization

Icons can be customized to include text, different colors, and have different sizes. Below is a table with the various icon types and customization you can do.

Key Value Example
Markers
marker

Default

marker-white

Default

marker-start

Default

marker-end

Default

marker-{size}

"sm" "md" "lg"

Example: "marker-md"

marker-{symbol}

Any letter (letters will be capitalized) or integer from 0-999

Example: "marker-A" or "marker-100"

marker-{color}

Any hex value

Example: "marker-7B0099"

marker-{color1}-{color2}

Any two hex values

Example: "marker-F8E71C-417505"

marker-{size}-{color1}-{color2}-{symbol}

marker-{size}-{color}-{symbol}

Any combination of various custom attributes.

Either one or two hex values, a size (sm, md, lg), a letter or integer between 0-999

Example: "marker-md-F8E71C-417505-A"

Example: "marker-lg-7B0099-42

Circles
circle

Default

circle-white

Default

circle-start

Default

circle-end

Default

circle-{size}

"sm" "md" "lg"

Example: "circle-md"

circle-{symbol}

Any letter (letters will be uppercase) or integer from 0-999

Example: "circle-A" or "circle-100"

circle-{color}

Any hex value

Example: "circle-7B0099"

circle-{color1}-{color2}

Any two hex values

Example: "circle-F8E71C-417505"

circle-{size}-{color1}-{color2}-{symbol}

circle-{size}-{color}-{symbol}

Any combination of various custom attributes.

Either one or two hex values, a size (sm, md, lg), a letter or integer between 0-999

Example: "circle-md-F8E71C-417505-A"

Example: "circle-lg-7B0099-42

Vias
via

Default

via-{size}

"sm" "md" "lg"

Example: "via-md"

via-{color}

Any hex value

Example: "via-7B0099"

via-{color1}-{color2}

Any two hex values

Example: "via-3B5998-22407F"

Flags
flag

Default

flag-start

Default

flag-end

Default

flag-{size}

"sm" "md" "lg"

Example: "flag-hello-sm"

Example: "flag-hello-md"

Example: "flag-lg-hello"

flag-{color}

Any hex value

Example: "flag-7B0099"

flag-{color1}-{color2}

Any two hex values

Example: "flag-3B5998-22407F"

flag-{symbols}

Up to five letters, numbers, and characters except for "-" and "." (Characters will need to be URL escaped) (Letters will be capitalized)

Example: "flag-1"

Example: "flag-$99"

Example: "flag-75%25"

Example: "flag-Hello"

flag-{size}-{color1}-{color2}-{symbol}

flag-{size}-{color}-{symbol}

Any combination of various custom attributes.

Either one or two hex values, a size (sm, md, lg), a letter or integer between 0-999

Example: "flag-md-3B5998-22407F-food"

Example: "flag-lg-7B0099-drink

Incident
incident-{size}

"sm" "md" "lg"

Example: "incident-sm"

Example: "incident-md"

Example: "incident-lg"

incident-{severity}

"low" "medium" "high"

Example: "incident-low"

Example: "incident-medium"

Example: "incident-high"

incident-{severity}-{size}

Any combination of various custom attributes.

Example: "incident-low-md"

Example: "incident-medium-lg"

Example: "incident-high-sm"

Construction
construction-{size}

"sm" "md" "lg"

Example: "construction-sm"

Example: "construction-md"

Example: "construction-lg"

construction-{severity}

"low" "medium" "high"

Example: "construction-low"

Example: "construction-medium"

Example: "construction-high"

construction-{severity}-{size}

Any combination of various custom attributes.

Example: "construction-low-md"

Example: "construction-medium-lg"

Example: "construction-high-sm"

External Icons

In addition to our own icon set, you can reference your custom icons in png, jpg, and gif format. This is specifically for use in our Static Map v5 API, but it is also caches your image for improved responsiveness. In the example below, we will self reference but only because it makes examples easy.

https://assets.mapquestapi.com/icon/v2/external/https://assets.mapquestapi.com/icon/v2/marker@2x.png

If you want to flush a cached icon, attach ?flush=true as a query parameter.

Use Icons with Leaflet

Below is sample code on how to use our basic marker with our MapQuest Plugins for Leaflet.


  var markerSize = {'sm': [28, 35], 'md': [35, 44], 'lg': [42, 53]};
  var markerAnchor = {'sm': [14, 35], 'md': [17, 44], 'lg': [21, 53]};
  var markerPopupAnchor = {'sm': [1, -35], 'md': [1, -44], 'lg': [2, -53]};

  var smallMarker = L.icon({
    iconUrl: 'https://assets.mapquestapi.com/icon/v2/marker-sm.png'),
    iconRetinaUrl: 'https://assets.mapquestapi.com/icon/v2/marker-sm@2x.png'),
    iconSize: markerSize.sm,
    iconAnchor: markerAnchor.sm,
    popupAnchor: markerPopupAnchor.sm
  });

  var mediumMarker = L.icon({
    iconUrl: 'https://assets.mapquestapi.com/icon/v2/marker-md.png'),
    iconRetinaUrl: 'https://assets.mapquestapi.com/icon/v2/marker-md@2x.png'),
    iconSize: markerSize.md,
    iconAnchor: markerAnchor.md,
    popupAnchor: markerPopupAnchor.md
  });

  var largeMarker = L.icon({
    iconUrl: 'https://assets.mapquestapi.com/icon/v2/marker-lg.png'),
    iconRetinaUrl: 'https://assets.mapquestapi.com/icon/v2/marker-lg@2x.png'),
    iconSize: markerSize.lg,
    iconAnchor: markerAnchor.lg,
    popupAnchor: markerPopupAnchor.lg
  });