MapQuest - Lost in migration
On the 5th June 2018 MapQuest are retiring their JavaScript Maps API which is currently being used by a major client of ours to handle all of their logistics. Lucky for me the task fell on my list however, unlucky for me their documentation to help you migrate was none to great. MapQuest provided the basics as to what to do to migrate the main features i.e. overlays, markers, etc over to their new ‘MapQuest.js’ but we had some functions that required a little more work, to find out how to alter them. These I have shared below, to assist in your migration to the new MapQuest API.
New Icons
var icon1 = L.icon({iconSize: [26, 27],iconUrl: 'http://assets.mapquestapi.com/icon/v2/marker-F0B61B-1.png',popupAnchor: [0, -10]});var dropmarker0001 = L.marker([52.28373, -1.58119], {icon: icon1})
The new icons are outlined as above, you define the icon object itself and then you assign that icon object to that of a marker you want to place.
- The icon size - defines the size of the icon.
- The icon URL – defines the URL of the icon image (here I’ve used the icon API provided by mapquest whereby you specify what you want, what colour you’d like and what number to be displayed on it).
- The popup Anchor – defines where you’d want to offset the popup too, if your icon was to have a popup.
Popups
In the previous example we had spoken about popup anchors to allow the positioning of popups to be designated, I’m now going to give an example of how we actually create popups.
var dropmarker0001 = L.marker([52.28373, -1.58119], {icon: icon1}).bindPopup(‘Here is an example popup’);dropmarker0001.on('mouseover', function(e) {this.openPopup();});dropmarker0001.on('mouseout', function(e) {this.closePopup();});
As you can see here we have binded a popup to the marker object and in order to open it we have to create a JavaScript function that we allow for the popup to open when the mouse is over the top of the marker, as opposed to having it open all the time.
Centering a Map
Previously all you would need to do to centre a map would be to call map.bestFit(); mapquest have removed this simple function and instead made it a little more work to centre your map, especially when you have multiple items on the page such as icons, overlays, etc.
var map = L.mapquest.map('map', {center: [51.0,-0.106890],layers: L.mapquest.tileLayer('map'),zoom: 10,});var coordinates =[[50.88708, -0.10864], [50.88086, -0.08541], [50.86544, -0.07673], [50.86283, -0.07708], [50.82022, -0.13639], [50.81979, -0.13734], [50.81960, -0.13845],[ 50.81967, -0.13952], [50.81998, -0.14179], [50.82079, -0.14689]]map.fitBounds(coordinates);
As you can see you now have to build up an array of the coordinates present on the map and then pass that into the fitBounds method which then adjusts the map accordingly.
Drawing Lines
Drawing lines have been made easier! Whereby you pass a set of coordinates into a function it is the same with drawing lines. This is one of the best things I have found with the migration the simplicity of drawing lines.
var coordinates = [[51.28373, -1.58119],[51.28373, -1.59119],[51.28373, -1.57119],];var polyline = L.polyline(coordinates, {color: 'black'}).addTo(map);
Spidering
The final migration item I am going to talk about is the situation where you can have multiple markers at the same location. In the old API this was simple, you had to set the marker to .setDeclutterMode(true); this would allow for it to work out by itself if there were multiple markers at that location and spider out accordingly. They haven’t written this functionality in the new API so I had to use a plugin (https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet) to give me the ability to this.
var oms = new OverlappingMarkerSpiderfier(map);oms.addMarker(dropmarker0001);
As you can see you create a new overlapping marker spiderfier object and pass in the map that you are currently working with. You then add the markers to the object and it works out for itself which ones overlap. I had to tweak the library slightly because it hadn’t been worked on since 2013 and I wanted the functionality to keep the spiderfied markers showing. So I removed the functionality to close the spiderfy and wrote a piece of JavaScript that would click all the icons open on load.
In Summary
So as you can see the migration was not as straightforward as I had hoped and more annoyingly the migration ‘guide’ (http://marketing.mapquest.com/rs/099-SNC-768/images/MQ_B2B_Migration-Guide.pdf) provided was not as complete as it needed to be! Hopefully some of the examples I have provided here will help you migrate your MapQuest solutions.Happy Migrating!Andy