img {
max-width: none !important;
}
#map-with-flyto {
height: 330px;
margin-right: 2px;
}
#buttons {
display: -webkit-flex; /* Safari */
display: flex;
}
button {
background-color: #1c95d0;
border: 1px solid white;
border-radius: 5px;
color: white;
font-family: courier, monospace;
font-size: 14px;
height: 28px;
margin: 7px 7px 0 0;
min-width: 35px;
padding: 0 5px;
text-align: center;
}
button#top {
border: none;
background: transparent;
color: darkblue;
font-weight: bolder;
margin: 7px 0 0 0;
padding-left: 0;
}

Fly to:
LHR
SFO
GIG
PVG
CPT
MEL

var attr = 'Map data © Google';
var tileLayerOptions = { attribution: attr, subdomains: [0, 1, 2, 3], detectRetina: true };
var tileLayer = L.tileLayer('http://mt{s}.googleapis.com/vt?x={x}&y={y}&z={z}', tileLayerOptions);

function flyTo(lat, lon, name) {
flyMap.flyTo([lat, lon], 11);
L.marker([lat, lon]).addTo(flyMap).bindPopup(name + "International Airport[" + lat + ", " + lon + "]")
}
var start = [-37.673,144.843];
var flyMap = L.map('map-with-flyto', {}).setView(start, 3);
tileLayer.addTo(flyMap);
L.marker(start).addTo(flyMap);

Since its earliest releases (2011) Leaflet JS has been a huge hit in map land. For many happy mappers across the world it is the preferred light-weight mobile-friendly API. No matter what map tiles you want to bring to life, Esri, Mapbox, OSM, even Google, Leaflet makes them shine.

Although it’s been around for years, Leaflet JS is yet to make its official debut: version 1.0.0 is to be released soon.

Version 1.0.0-beta is out now.

Thousands will ask: what does Leaflet JS 1.0.0 have to offer over 0.7.5? And: can I use 1.0.0-beta in Drupal today?

To start with the improvements, most of the new offering is under the hood. Better performance, bug fixes, improvements in UX, animation, projections. Check the Changelog for details -- there are many.

Visually, a striking new feature is the flyTo() function, which you can see in action by pressing the 3-letter airport codes above. [Note: for now this works best on non-mobile devices]. For a full screen version with more destinations and different map styles, head over to our friends at RegionBound, who have a similar demo.

With Leaflet JS 1.0.0 come some API improvements.

And herein lies the rub. Some of the API changes may break some of the hundreds of free Leaflet JS add-ons strewn across the Internet and on drupal.org. Including the base Leaflet module. Yesterday we checked in a patch to deal with multi-polygons, multi-linestrings and circles. With that and some other changes Leaflet-the-D7-module is now in pretty good shape, supporting both Leaflet 0.7.5 and Leaflet 1.0.0 And so do some of our other favourites: Leaflet More Maps, Leaflet Hash, Leaflet Label, IP Geolocation Views & Maps.... These were already ok, or required minor fixes.

To cut to the chase... in D7, can you upgrade to Leaflet JS1.0.0-beta now ?

Yes!

In three easy steps:

1. You need to use Leaflet-the-Drupal module version 7.x-1.3 (or latest 7.x-1.x-dev), which has the patches described above. It will continue to work with Leaflet JS 0.7.5 too, if you need to fall back.
2. Then Replace your current Leaflet JS in sites/all/libraries/leaflet with the latest Leaflet JS 1.0 downloaded from here.
3. Check which of the Leaflet add-ons you are currently using. Some will work fine unchanged, some may require patches or simply updated versions of their associated libraries, most notably Leaflet Markercluster -- see its project page.

Should you find an issue after switching to Leaflet JS 1.0.0, please let the drupal.org community know via the respective Leaflet extension modules issue queues,

What about D8 ?
There is no Leaflet D8 version yet. Some have suggested re-architecting the Leaflet module. If these plans go ahead, it would make sense to target compatibility with Leaflet JS 1.0.0.

Whether it’s D7 or D8, let’s all chip in to make sure that Leaflet continues to fly in Drupal!

* * *File under:: Planet Drupal