Upgrading to Leaflet 1.0 Beta 2

This post is just a migration log. I’m very excited to be learning about Leaflet Hotline, but it requires Leaflet 1.0 Beta 2. The problem is that several of the other plugins that I use on http://exploringspatial.com are not compatibleLeaflet 1.0. Here is the run down of what I ran into.

Why are there problems?

I will try to keep this post up-to-date with issues as I find them:

  • Multpolygon class is gone – The Mulitpolygon class is being replaced by enhancements to the Polygon class (see thread). If your plugin used Multipolygon, then you’ll need a new version of the plugin for Leaflet 1.0.
  • GeoJSONLayer.resetStyle(layer) is gone. I switched to layer.setStyle().
  • L.FeatureGroup.EVENTS no longer exists.
  • “Event.layer” is now called “Event.target” in mouse events.

Bing, Google and  Yandex Plugins

Pavel Shramov and Bruno Bergot provide Leaflet plugins for Bing, Google, and Yandex maps. When you switch to Leaflet 1.0 the Google Tiles layer will break (I’ve just dumped Bing for the time being since it has not been addressed). When you add a Google layer it to your Leaflet 1.0 map you will see an error in Leaflet-src.js  at line 2382 because callback is undefined.

    whenReady: function (callback, context) {
        if (this._loaded) {
            callback.call(context || this, {target: this});
        } else {
            this.on('load', callback, context);
        return this;

Fortunately, Bruno Bergot is already on top of this and you can pull his patch down for the time being: https://github.com/shramov/leaflet-plugins/pull/175.

Leaflet Point-in-Polygon

Leaflet-pip depends on the Mutlipolygon class, so it broke http://exploringspatial.com/#demo/8 at line 15: “Uncaught TypeError: Expecting a function in instanceof check, but got undefined.” Specifically, it breaks at this line of code: “if ((l instanceof L.MultiPolygon…”

var leafletPip = {
    bassackwards: false,
    pointInLayer: function(p, layer, first) {
        'use strict';
        if (p instanceof L.LatLng) p = [p.lng, p.lat];
        else if (leafletPip.bassackwards) p = p.concat().reverse();

        var results = [];

        layer.eachLayer(function(l) {
            if (first && results.length) return;
            if ((l instanceof L.MultiPolygon ||
                 l instanceof L.Polygon) &&
                    type: 'Point',
                    coordinates: p
                }, l.toGeoJSON().geometry)) {
        return results;

There is not a patch yet, but I found the solution contained in this thread: https://github.com/mapbox/leaflet-pip/issues/8.  There is a post from user “nikolauskrismer” that replaces the entire code block starting at line 6: “var leafletPip = …” That got me past the error above.

Leaflet MarkerCluster

In http://exploringspatial.com/#demo/5 I used Leaflet.MarkerCluster, but in http://exploringspatial.com/#demo/6 I switched to Leaflet.PruneCluster for performance reasons. Upgrading to Leaflet 1.0 Beta 2 broke Demo 5. Leaflet.MarkerCluster caused the error “Uncaught TypeError: Cannot read property ‘trim’ of undefined” in leaflet-src.js at line 137. The cause was line 51 from leaflet.markercluster-src.js, “this._featureGroup.on( L.FeatureGroup.EVENTS, this._propagateEvent, this).” The problem is that L.FeatureGroup.EVENTS no longer exists in Leaflet 1.0. Since I was already using PruneCluster successfully with Leaflet 1.0 beta 2, and I didn’t see any patches, I dumped Leaflet.MarkerCluster and switched to Demo 5 to Leaflet.PruneCluster.

Mouse Events

Another issue that I ran into on http://exploringspatial.com/#demo/7 was that my mouseover and mouseout events were expecting “event.layer“, but with Leaflet 1.0 that has changed to “event.target” That was easy for me to switch. I was just calling event.target.style to highlight polygons on mouseover.

Reset Style

The final issue I hit was on http://exploringspatial.com/#demo/8. In my states map view I called GeoJSONLayer.resetStyle(layer) on all the state polygons each time a new race distance was selected. That no longer worked in Leaflet 1.0. I had to switch to layer.setStyle() to get around that.

That is all that I’ve found so far. All my changes are now live at http://exploringspatial.com. Let me know if you spot any problems that I missed.



One thought on “Upgrading to Leaflet 1.0 Beta 2

  1. Hi Steve,
    thanks for this exploration! I’m just using Leaflet.MarkeClusterGroup with Mapbox 3.0, so is Leaflet 0.7 used as well and it works. As soon as Mapbox will switch to leaflet 1.0 I have to change the cluster plugin I assume.
    Just a question on your class diagrams: I started to model the basic leaflet classes in an UML modeler as well – which modeling software did u use? Can you provide me the UML models u’ve made so far?
    Thanks and kind regards
    Nils, Berlin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s