mapbox / mapbox-gl-leaflet Goto Github PK

With http://cdn.rawgit.com/mapbox/mapbox-gl-leaflet/leaflet-master/examples/basic.html, zoom out enough and the tiles suddenly shift down and the marker is displayed in wrong position. Tested with Chrome 52 and Firefox 48 on Mac OS X.

I'm using this in angular to add leaflet-draw to mapbox-gl ( I need the circle control)
Are there any Typescript typings for this so I can use it in Angular?

Note sure if this is a MapboxGL issue, or Leaflet issue, or mapbox-gl-leaflet issue.

How to reproduce:

1. Visit https://jsfiddle.net/c436nmmx/
2. Move the map up a little bit
3. In the top right corner of the map, click "click me" div
4. After the map changes location/bounds, you'll see that the map leaves grey areas:

As soon as you try to move it, it snaps back into proper place.
I'm on Chrome 65 / macOS 10.13.3

Hi there,

while playing with this amazing library I found out that MapBoxGL bearing and pitch parameters are not well supported (also setting zoom causes the same troubles but that does not really make sense since we set the zoom level in the map constructor).

Looking at the plugin class constructor, it appears that all parameters are passed to the underlying MapBoxGL map instance (mapboxgl.Map). Sadly it seems that bearing and pitch parameters are not taken into account in the update function.

To make clearer what I mean, I prepared this fiddle: try to pan and/or zoom the map and the marker position gets screwed up. 😞 This fiddle uses the leaflet-master branch version but the same happens with the master version and/or using clusters.

That's a pity because one of the most amazing features in MapBox, which was missing in Leaflet (I saw some FR in the past) was the ability to rotate the map, for instance with the device orientation change event.

I would suggest to find a way to support bearing and pitch parameters in the map update function, since they are (together with other features) a plus on the plain Leaflet map rendering.
If unfortunately this wouldn't be possible, then I suggest to state this in the README, or even better to clean up the unsupported parameters passed to the mapboxgl.Map constructor.

Thanks,

Vito

With Firefox 48, open the basic example and zoom in or out. The following error is recorded:
TypeError: t is undefined

Stack:
o.Point.prototype._subtract()
leaflet.js:5
o.Point.prototype.subtract()
leaflet.js:5
L.MapboxGL<._animateZoom()
leaflet-mapbox-gl.js:164
o.Evented<.fire()
leaflet.js:5
._animateZoom()
leaflet.js:9
._tryAnimatedZoom/<()
leaflet.js:9
bound ()
self-hosted
openTabPrompt()
nsPrompter.js:417
ModalPrompter.prototype.openPrompt()
nsPrompter.js:532
ModalPrompter.prototype.nsIPrompt_prompt()
nsPrompter.js:717
ModalPrompter.prototype.prompt()
nsPrompter.js:567

basic.html:24

Maybe because this._offset is initially undefined?

Hi,

I have noticed a lag when panning the map, when I am using mapboxgl as a layer inside a leaflet map with markers. It seems to be because of IE not handling mapbox-gl-js so well and being slower on rendering than Chrome but globally, would it not be interesting for both component to share the "navigation" (mouse or touch) logic?
Because here, both libraries handle mouse/touch actions and mapbox-gl-leaflet syncs the zooms but could there not be one "master" (leaflet in that case) that could override mapbox-gl behaviour and pass the navigation actions to mapbox-gl?

Fabien

Is it possible to interact with a vector layer hosted on mapbox using the leaflet binding? For example, can you click on a vector polygon layer and have feature attributes for that layer returned in a popup?

https://github.com/mapbox/mapbox-gl-js/blob/master/CHANGELOG.md

This project still uses LatLng

Can you add some more examples regarding how can I do that?

Also, this is really awesome.

@mourner are there still issues that need to be hit before this can be opened? Can you file tickets for them?

Even though I'm not on node or npm, I like pulling in assets into rails using http://www.RailsAssets.org - it creates dynamic rails asset gems from bower packages, making it easy to keep vendor assets external from your application repository without dealing with all the gluework needed.

Will this on the road map to make it compatible with leaflet v1? thanks!

The demos ecounted Error: Failed to initialize WebGL(…)

evented.js:91Error: Failed to initialize WebGL(…)Evented.fire @ evented.js:91
3map.js:346Uncaught TypeError: Cannot read property 'resize' of undefined
48map.js:346 Uncaught TypeError: Cannot read property 'resize' of undefinede.resize @ map.js:346e._onWindowResize @ map.js:1187

Any Idea?

I've noticed a minor issue when using leaflet-mapboxGL at low zoom levels.
If you drag-pan the map, layers on top of the base vector tile layer move at a different rate to the base layer. The following jsfiddle demonstrates (try dragging the map up and down and see that the marker moves away from it's place on the map):
http://jsfiddle.net/baxford/vsqgofm6/3/

I've found a fix by adding the following line at the end of initGL:
this._glMap.transform.latRange = null;

Here is a similar JSFiddle with that change in place
http://jsfiddle.net/baxford/z3anbyh6/2/

NOTE: I also found I needed to set {minZoom:1} on the L.map to avoid a similar issue at zoom 0.

Have also created a PR for this: #29

When loading a heat layer into a gl map using leaflet-mapbox-gl, I'm getting error "gl.update is not a function" from the "_update" method below when panning or zooming the map.

This works fine in mapbox-gl-js 0.12.0 -- bug was introduced in mapbox-gl-js 12.1 - perhaps from the following change noted in the changelog which makes the "update" method private:

Breaking changes
Made Map#update and Map#render private methods (#1798)

Function which throws error when panning/zooming map:

_update: function () {
var size = this._map.getSize(),
container = this._glContainer,
gl = this._glMap,
topLeft = this._map.containerPointToLayerPoint([0, 0]);

L.DomUtil.setPosition(container, topLeft);

var center = this._map.getCenter();

// gl.setView([center.lat, center.lng], this._map.getZoom() - 1, 0);
// calling setView directly causes sync issues because it uses requestAnimFrame

var tr = gl.transform;
tr.center = mapboxgl.LngLat.convert([center.lng, center.lat]);
tr.zoom = this._map.getZoom() - 1;

if (gl.transform.width !== size.x || gl.transform.height !== size.y) {
    container.style.width  = size.x + 'px';
    container.style.height = size.y + 'px';
    gl.resize();
} else {
    gl.update();
}

}

when you drag the map vigorously and the zoom value is less than 2 the markers get out of position. this happens in both mobile and desktop browsers.

This tool was meant to help bridge the gap between Mapbox.js and Mapbox GL JS, but Mapbox GL JS and its accompanying documentation have since matured to a point where a hybrid is probably no longer necessary.

If deprecation is too extreme (there is still some activity in this repo), I think there should at least be a disclaimer that mapbox-gl-leaflet is experimental and bugs may not be fixed quickly, if at all.

cc: @bsudekum @mourner @tmcw

Will leaflet layers on top be animated in sync with the mapbox gl js layer, for example when zooming or panning? (The Google Map plugin results in out-of-sync animations of leaflet layers with the Google Map layer, for example)

Steps to replicate:

1. Add a marker and pan to it:

function zoomTest(zoomLevel) {
    var currLatlng = new L.LatLng(17.456461,78.82324);
        var currLocationMarker = L.marker([17.456461,78.82324],{draggable:false}).addTo(map);   
    map.panTo(currLatlng);
}

1. Click the zoom out button 2 or more times.

Quickly reproducible in the example provided in the project:
Double-click to zoom, then drag to pan. Tiles that were outside the viewport are not drawn.

If I switch to Leaflet's current master branch this still happens, but less frequently.

Issue

In the demo:
https://github.com/mapbox/mapbox-gl-leaflet/tree/master/examples/basic.html

the zooming animation works fine. However, if I remove the marker, that is, if I remove those lines:

L.marker([38.912753, -77.032194])
    .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    .addTo(map)
    .openPopup();

then zooming happens without animation, although map.options.zoomAnimation is set.

Possible explanation

I guess this is related to the test in leaflet 0.7.3:

    _nothingToAnimate: function () {
        return !this._container.getElementsByClassName('leaflet-zoom-animated').length;
    },

which returns false when there is nothing on the map.

Tentative fix

I tried to set the CSS class leaflet-zoom-animated on the GL container, this works for the first zooming motion, but not afterwards, because transitionend did not get fired.

Workaround

In the mapbox GL plugin, in the methods onAdd and onRemove I used a very small marker, adding it to and removing it from the map, to make sure there is something to animate (_nothingToAnimate() returns true).

There is probably a cleaner solution than this workaround.

I am trying to setup a click event on a layer:

// Create the map layer
gl._glMap.addLayer({
    'id': 'transparentLayer',
    'type': 'circle',
    'source': 'projectSource',
    'source-layer': 'eq-simple',
    'interactive': true
});

gl._glMap.on('click', function(e) {
    console.log('e:'); // this log never makes it to the browser console.
    console.log(e);
    gl._glMap.featuresAt(e.point, { radius : 6}, function(err, features) {
        console.log('features:');
        console.log(features);
        if (err) throw err;
        $('#mapLegend').empty();
        for(var k in features[0].properties) {
            $('#mapLegend').append(k+': '+features[0].properties[k]+'</br>');
        }
    });
});

Hi All,
Using leafletJs MBTiles (png type) able to make a offline map application. But now requirement is to read pbf file for offline.
For that I need to use some extension and choose mapBoxGl for that. If we use JSON source as online it is working perfectly, but if we download the JSON files and redirect all resources to device only. we are getting one error
Uncaught Error: sources.layers: "type" is required

Need help on this.
Any one implemented offline map with leafletJs and pbf?
Advance Thanks To All ...

Sudip Barman

With leaflet 1.0 out soon, there should be a branch for this project for leaflet-master.
The change is pretty simple, just extend L.Layer instead of L.Class
There is another change to do in _animateZoom, as e.origin doesn't exist anymore and e.center is a LatLng, not a L.Point. I tried changing it to

var origin = this._map.latLngToContainerPoint(e.center).add(this._map._getMapPanePos()).subtract(this._map.getSize().divideBy(2));

But the offset seem to be wrong. If you help me figure out how the offset must be calculated, that would be great :)

I am not sure how a branch is created in the master project, can the owner only do it? Can you do some kind of PR that could be merged as a branch in master?

Fabien

How can I create a geojson vector tile layer?
I was hoping to do something like:

map.addSource('projectSource', {
    'type': 'geojson',
    'data': layerAttributes,
});

and then using the source, create a layer:

map.addLayer({
    'id': transparentLayer,
    'type': 'point',
    'source': 'projectSource',
    "source-layer": "eq-simple",
    'interactive': true
});

Hi,
I seem to have an issue with drag scrolling in IE11. It looks fine in chrome, I don't know about any others. The zoom is perfectly smooth. You can see it in the basic example.

Hi,
The most recent commit includes on lines 149 - 153:

if (gl._resize !== null ){
                gl._resize();
            } else {
                gl.resize();    
            }

This returns true when gl._resize is a function OR if it is undefined.
Suggest changing it to:

if (gl._resize !== null && gl._resize !== undefined){
                gl._resize();
            } else {
                gl.resize();    
            }

Suggested change works in Chrome with leaflet 1.0.2 and mapbox gl 0.25.1

When zoomed beyond level 18 in a Leaflet map the tiles don't seem to load until the user executes a pan. I did find a solution that works with geojson, but not vector tiles loaded from the style-cdn.json file. In leaflet-mapbox-gl.js in the section beginning at line 95 below add the line of code to include throttleUpdate on an overlayadd event as follows:

getEvents: function () {
return {
overlayadd:this._throttledUpdate, //ADD THIS HERE
move: this._throttledUpdate, // sensibly throttle updating while panning
zoomanim: this._animateZoom, // applys the zoom animation to the
zoom: this._pinchZoom, // animate every zoom event for smoother pinch-zooming
zoomstart: this._zoomStart, // flag starting a zoom to disable panning
zoomend: this._zoomEnd
};
},

The created Layer is always placed into the Map's tilePane
https://github.com/mapbox/mapbox-gl-leaflet/blob/master/leaflet-mapbox-gl.js#L73
https://github.com/mapbox/mapbox-gl-leaflet/blob/master/leaflet-mapbox-gl.js#L90

Ideally, this being a L.Layer subclass it could call getPane() to use a pane specified in the constructor.

I've added a popup to the underlying mapbox gl map.
The onclick event for the map still fires because I assume it's hitting the container.
Is there a work around?

If you integrate this with webkit, react-leaflet and leaflet when closing the map it is throwing an error on Line 75.

L.DomEvent.off(this._map._proxy, L.DomUtil.TRANSITION_END, this._transitionEnd, this);

this._map._proxy is undefined because in leaflet.js it removes the animation proxy right before removing the layers.

Hello,

Here is what I do.
Create a map, add a standard tile layer, add a polyline.
Then, remove the tile layer and a mapbox-gl layer. Then polyline will still be displayed until some webgl tiles start being displayed, then it disappears.
Setting a z-index of 1 on the SVG of the polyline gets it back on top

Fabien

I've tried this a million different ways, but no matter what I try, I cannot get the two layers to draw together. I need to draw the base map using L.mapboxGL. Then I draw a polygon (e.g. a ZIP code boundary) over that. No problem. Shows up fine. But then I draw all surrounding borders (e.g. ZIP codes) using a custom MBTiles layer from my own server. I can get either the GL layer or the tiles layer to show so I know my code is working, but I can not get both to show up at the same time.

I've tried various forms of and sendToBack(), sendToFront(), setZIndex() and as far as I can tell, none have an affect on my layers.

Can anyone offer advice on a way to get the two types of layers (raster and vector) to work and play well together? I seem to recall reading something years ago that a GL layer draws above all others but the successful render of the polygon and the ability to draw markers would seem to bely that. It's just the two tile layers that are fighting each other.

Note that if I just use Leaflet to draw raster tiles for my base maps, everything works just fine. The only problem is that my request counts and costs are something like 40x. Vector drastically reduces those costs, so I'd like to find a way to accomplish this.

I have tried a jsfiddle with sample code, though the gl layer isn't working in that at all. But so that you can get an idea of the approach I'm taking, here's a simplified version of the JQuery-reliant code:

// initialize the map
var map = L.map('map').setView([33.1519385559844, -96.860310037651], 11);

// draw the gl layer (straight from the Leaflet GL example)
var gl = L.mapboxGL({
  attribution: '<a href="https://carto.com/" target="_blank">© CARTO</a> <a href="https://www.maptiler.com/license/maps/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
  accessToken: 'not-needed',
  style: 'https://maps.tilehosting.com/styles/voyager/style.json?key=[YOURKEY]'
}).addTo(map);

// Now we draw the polygon of a zip code border
// Style the polygon
var style = {
  "color": "#000",
  "weight": 1.5,
  "fillOpacity": 0.1
};

var json_boundaries = new L.geoJson(null, { style: style }).addTo(map);
var url = "[json server url]";

// Get the polygon asynchronously with Jquery
$.ajax({
  dataType: "json",
  url: url,
  success: function(data) {
    $(data.features).each(function(key, data) {
      json_boundaries.addData(data);
    });
  }
}).error(function() {});

// Finally, draw the mbtiles overlay showing the borders of all surrounding ZIPs
var mbtiles_url = "[mbtiles server url]";
var neighborPolysLayer = L.tileLayer(mbtiles_url).addToMap(map);

Hi,
I have plotted few markers on map with the library. When i zoom into the map, the markers show a delay in re-positioning themselves at the right place.However , that's not the case when we do the same using leaflet or mapbox.js. How can i eliminate the delay and show a non-delayed transition on zoom in/ zoom out.

The main goal of leaflet-mapbox-gl.js is to make leaflet methods to work along with mapboxGL, but now mapboxGL's methods seem to be obsolete, and not working.

I have included leaflet.js, mapbox-gl.js, leaflet-mapbox-gl.js

var map = L.map('map',{
    minZoom:2,
    maxZoom:19,
  }).setView([2.92, 110.84], 5);

var gl = L.mapboxGL({
      accessToken: '_MY_ACCESS_TOKEN_',
      style: 'mapbox://styles/mapbox/satellite-streets-v9',
      center: [103.921812, 1.279844],
      zoom: 4
}).addTo(map);

Now, map.addSource not working.. Uncaught TypeError: map.addSource is not a function..
What is the alternative in leaflet or mapbox or How to make it work??

map.addSource('trace', {
     type: 'geojson',
     data: data
});

But it was working well while using mapbox-gl alone, by using the following method:

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/satellite-streets-v9',
    center: [103.921812, 1.279844], // starting position
    zoom: 4 // starting zoom
  });

In Chromium 49 and Firefox 45, when mixing traditional tile layers with a mapbox-gl layer, the gl layer vanishes as soon as one pans the map: https://jsfiddle.net/1rghvfh3/ (a workaround of this bug would be to hardcode a negative zIndex in the options of the tileLayer)

This is because of the way a dynamic zIndex gets assigned automatically to GridLayers in Leaflet 1.0. As mapbox-gl-leaflet isn't derived from this base class, but still hooks into the same tilePane that other tile layers do, it should implement the same zIndex logic in order to be used together with other tileLayers.

I understand this is mentioned in the readme, I am just trying to understand:

1. why it is not supported (since both leaflet and mapbox-gl support it)
2. what it would take (by me?) to add support.

Leaflet's API is explicit about fractional zoom, there are two map options called zoomDelta and zoomSnap in the code.

Thoughts please? Thank you.

Trying to use npm to get this package, I get the version compatible with Leaflet v.0.7. Could you please create a new release and advertise in package.json so this can be used for Leaflet 1.0?

The jsfiddle https://jsfiddle.net/fnicollet/9w9er53v/ you provided, has an obsolete external resource https://cdn.rawgit.com/mapbox/mapbox-gl-leaflet/leaflet-master/leaflet-mapbox-gl.js. This link is dead..

Update the jsfiddle by removing the mentioned dead link and replace it with the following working link:
https://rawgit.com/mapbox/mapbox-gl-leaflet/master/leaflet-mapbox-gl.js

I just git clone this repo, and I receive the error with this

Failed to initialize WebGL

According to this support article, you can use mapbox-gl with third party tilesets (e.g., Mapzen). Presumably, you wouldn't need a Mapbox accessToken in this case because you're not making any Mapbox API calls. However, mapbox-gl-leaflet chokes if the accessToken is not supplied (it will work though if you provide a nonsense string, e.g. "THIS_IS_MY_TOKEN".

I'm working with this in react-leaflet, so there's a chance my implementation is causing different results, but I'm fairly certain this is true for the general case.

i am using leaflet-mapbox-gl.jsand dont know where to add my map inside the code ??
can any one help me:)
my code look like that

var map = L.map('map').setView([38.912753, -77.032194], 15);
L.marker([38.912753, -77.032194])
.bindPopup("Hello Leaflet GL!
Whoa, it works!")
.addTo(map)
.openPopup();
var gl = L.mapboxGL({
accessToken: token,
style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);
var gl = L.mapboxGL({
style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json',
accessToken: 'no-token'
}).addTo(map);
</script>
thnx for helping;)

Using the provided sample code as provided here, https://www.mapbox.com/mapbox-gl-js/api/

I'm getting the following error. Can't quite figure out why the WebGL won't init. I've enabled the draft extension in Chrome as well. Help appreciated, tnx.

Error: Failed to initialize WebGL
    at o._setupPainter (map.js:1541)
    at new o (map.js:353)

Chrome (latest), macOs (10.12.6). Laravel 5.6. MacBook Air (mid-2011).

Using leaflet-master branch with Leaflet 1.0.0-rc3, zooming in or out is jerky. Looks like the map flashes in a wrong position before settling on the proper view. This can be reproduced with the basic example just by pointing to [email protected] instead of beta 2. Tested with Chrome 52 and Firefox 48 on Mac OS X.

The issue is reproducible when you are using the gl layer in react base application together with
react-leaflet.

It crashes with following error when component is destroyed:

TypeError: undefined is not an object (evaluating 'obj[eventsKey]')
at
removeOne leaflet-src 2708

The original TileLayer works as expected.

It is hard to say what component is root cause. However, it is trigged due to undefined _map._proxy at onRemove.
https://github.com/mapbox/mapbox-gl-leaflet/blob/master/leaflet-mapbox-gl.js#L87

It see extremely trivial fix here.