Icons API
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
});