We’re happy to announce the release of a new version of our icon service! This new version (V2) introduces crisp, flat and fast loading icons that look great on our Leaflet and static maps. Full documentation can be found at: http://developer.mapquest.com/documentation/icons-api/v2/
When I first started working for MapQuest last year, we had a team prototype hack day to see what types of icons we could generate for usage in our internal maps and for the greater developer community to enjoy. We found that starting off with vector images and type, we could generate icons on the fly at any size and color that were clean and had crisp edges. This had the added benefit of working seamlessly with retina maps. This hack evolved into a platform API, and I’m happy to introduce it!
For maps, the most popular icon is the marker, and the simplest way to retrieve one is to hit:
https://assets.mapquestapi.com/icon/v2/marker.png
Wanna change the size? It’s easy, just use one of our pre-baked sizes: sm, md, lg. Want to supersize it for retina? Just throw @2x at the end of the size and get an icon at twice the resolution:
https://assets.mapquestapi.com/icon/v2/marker-lg@2x.png
Black markers not your thing? You can customize to colors of the marker with hex values to dial in that color that your brand needs (go Broncos!):
https://assets.mapquestapi.com/icon/v2/marker-002244-FB4F14-lg.png
That’s great, but what if you want Peyton Manning’s number on there? Just add it to the dash (“-“) delimited values in the url:
https://assets.mapquestapi.com/icon/v2/marker-002244-FB4F14-18-lg.png
Markers are nice, but why should we limit ourselves to just one shape? We threw in circles, flags, vias, construction, incident and external icons into the mix to cover all of the use cases:
Circles behave a lot like markers:
https://assets.mapquestapi.com/icon/v2/circle-002244-FB4F14-18-lg.png
A via is like a circle, but much smaller. Because this little icon is so….little, we don’t put text in the middle:
https://assets.mapquestapi.com/icon/v2/via-002244-FB4F14-lg.png
While vias don’t say much, flags can fit up to 5 characters:
https://assets.mapquestapi.com/icon/v2/flag-002244-FB4F14-Go%20B!-lg.png
When you want to show incidents and construction on your map, we have plenty of options:
You can also pull in external icons through the service. We cache this image so you get speedy results on subsequent calls. Let’s first look at the external icon api:
We make it extremely easy. Insert your URL (doesn’t have to be encoded) at the end of the base endpoint to get the feature:
http://assets.mapquestapi.com/icon/v2/external/{EXTERNAL_URL_HERE}
Now that you know about our icons, you can really grok the service by replacing the .png extension with .json:
https://assets.mapquestapi.com/icon/v2/flag-red-help!-lg.json
This returns information about the icon in JSON:
{
“iconUrl”: “https://assets.mapquestapi.com/icon/v2/flag-red-help!-lg.png”,
“iconRetinaUrl”: “https://assets.mapquestapi.com/icon/v2/flag-red-help!-lg@2x.png”,
“iconSize”: [80, 40],
“iconAnchor”: [0, 40],
“popupAnchor”: [0, -40],
}
This information becomes powerful when you combine it with MapQuest’s Leaflet plugin to place the icon on a Leaflet map:
var map = L.map(‘map-custom-icon’, {layers: MQ.mapLayer()}).setView([51.505, -0.09], 13);
var icon = ‘https://assets.mapquestapi.com/icon/v2/flag-red-help!-lg.json’;
$.getJSON(icon, function(json){
var LeafIcon = L.icon(json);
L.marker([51.509, -0.08], {icon: LeafIcon}).bindPopup(“I’m a custom icon using ” + icon).addTo(map);
});
That’s how I felt when I went pub crawling in London and got lost. I hope you’re not lost or confused when working with this API. If you do get lost, check out our online documentation at https://developer.mapquest.com/documentation/icons-api/v2/ or jump on our forums at https://developer.mapquest.com/forum and ask a question.
In our next icon service blog post, I’ll discuss how to simplify the creation of icons with the Online Icon Builder. Until then:
