Appearance

Icons API ​

mapquest developer icons 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.

IconURL
markerhttps://assets.mapquestapi.com/icon/v2/marker@2x.png
circlehttps://assets.mapquestapi.com/icon/v2/circle@2x.png
viahttps://assets.mapquestapi.com/icon/v2/via@2x.png
hellohttps://assets.mapquestapi.com/icon/v2/flag@2x.png
incidenthttps://assets.mapquestapi.com/icon/v2/incident@2x.png
constructionhttps://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-smmarker-mdmarker-lg
Dimensions (in pixels)height: 35, width: 28height: 44, width: 35height: 53, width: 42

Circle Sizes ​

circle, circle-smcircle-mdcircle-lg
Dimensions (in pixels)height: 28, width: 28height: 35, width: 35height: 42, width: 42

Via Sizes ​

via, via-smvia-mdvia-lg
Dimensions (in pixels)height: 10, width: 10height: 14, width: 14height: 18, width: 18

Flag Sizes ​

flag, flag-smflag-mdflag-lg
Dimensions (in pixels)height: 30, width: 60height: 35, width: 70height: 40, width: 80

Incident and Construction Sizes ​

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

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.

Markers ​

KeyValueExample
markerDefaultmarker
marker-whiteDefaultmarker-white
marker-startDefaultmarker-start
marker-endDefaultmarker-end
marker-{size}"sm" "md" "lg"

Example: "marker-md"		marker-sm marker-md marker-lg
marker-{symbol}Any letter (letters will be capitalized) or integer from 0-999

Ex: "marker-A"		marker-symbol marker-number
marker-{color}Any hex value

Ex: "marker-7B0099"		marker-color
marker-{color1}-{color2}Any two hex values

Ex: "marker-F8E71C-417505"		marker-multiple-color
marker-{size}-{color1}-{color2}-{symbol}

marker-{size}-{color}-{symbol}		Any combination of various custom attributes.

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

Ex. "marker-lg-7B0099-42		marker-multiple-attributes marker-multi-letter

Circles ​

KeyValueExample
circleDefaultcircle
circle-whiteDefaultcircle-white
circle-startDefaultcircle-start
circle-endDefaultcircle-end
circle-{size}"sm" "md" "lg"

Example: "circle-md"		circle-sm circle-md circle-lg
circle-{symbol}Any letter (letters will be uppercase) or integer from 0-999

Ex: "circle-A" or "circle-100"		circle-A circle-number
circle-{color}Any hex value

Ex: "circle-7B0099"		circle-color
circle-{color1}-{color2}Any two hex values

Ex: "circle-F8E71C-417505"		circle-multi-color
circle-{size}-{color1}-{color2}-{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

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

Ex. Example: "circle-lg-7B0099-42"		circle-multi-attributes circle-multi-number

Vias ​

KeyValueExample
viaDefaultvia
via-{size}"sm" "md" "lg"

Example: "via-md"		via-small via-medium via-large
via-{color}Any hex value

Ex: "via-7B0099"		via-color
via-{color1}-{color2}Any two hex values

Ex: "via-3B5998-22407F"		via-color

Flags ​

KeyValueExample
flagDefaultflag
flag-startDefaultflag-start
flag-endDefaultflag-end
flag-{size}"sm" "md" "lg"

Ex: "flag-hello-sm"

Ex: "flag-hello-md"

Ex: "flag-lg-hello"		flag-small flag-medium flag-large
flag-{color}Any hex value

Ex: "flag-7B0099"		flag-color
flag-{color1}-{color2}Any two hex values

Ex: "flag-3B5998-22407F"		flag-multi-color
flag-{symbols}Up to five letters, numbers, and characters except for "-" and "." (Characters will need to be URL escaped) (Letters will be capitalized)

Ex: "flag-1""

Ex: "flag-$99"

Ex: "flag-75%25"

Ex: "flag-Hello"		flag-1 flag-dollars flag-percent 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

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

Ex. "flag-lg-7B0099-drink"		flag-multi-attribute flag-multi-drink

Incident ​

KeyValueExample
incident-{size}"sm" "md" "lg"

Ex: "incidient-sm"

Ex: "incident-md"

Ex: "incident-lg"		incident-small incident-md incident-md
incident-{severity}"low" "medium" "high"

Ex: "incident-low"

Ex: "incident-medium"

Ex: "incident-high"		incident-md
incident-{severity}-{size}Any combination of severity and size

Ex: "incident-low-md"

Ex: "incident-medium-lg"

Ex: "incident-high-sm"		incident incident-multiple-attribute incident-high-sm

Construction ​

KeyValueExample
construction-{size}"sm" "md" "lg"

Ex: "construction-sm"

Ex: "construction-md"

Ex: "construction-lg"		construction-sm construction-md construction-lg
construction-{severity}"low" "medium" "high"

Ex: "construction-low"

Ex: "construction-medium"

Ex: "construction-high"		construction-low construction-medium construction-high
construction-{severity}-{size}Any combination of various custom attributes.

Ex: "construction-low-md"

Ex: "construction-low-md"

Ex: "construction-low-md"		construction-lg construction-medium-lg 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

marker

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.

js
  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
  });