search

smithmicro / mapbox-gl-circle

A *google.maps.Circle* replacement for Mapbox GL JS
https://smithmicro.github.io/mapbox-gl-circle/
ISC License
55 stars 26 forks source link

Circles appear behind other layers #50

Closed ryanhamley closed 6 years ago

ryanhamley commented 6 years ago

Hi, I started implementing mapbox-gl-circle into a program that has several other layers on the map and noticed that the circle always appeared behind one of my other layers, regardless of what order they were added in.

I tracked it down to these lines in the code where waterway-label is hardcoded as the second argument to addLayer causing the circle to always be added just before this layer.

You can see the issue in action here:

screen shot 2017-10-10 at 11 20 58 am

It's pretty straightforward to expose the before argument to the user so that users can control where a circle is added in the layer stack. I implemented a fix as you can see in this image.

screen shot 2017-10-10 at 11 16 46 am

Here's my pull request for the proposed fix https://github.com/mblomdahl/mapbox-gl-circle/pull/51

Thanks!

mblomdahl commented 6 years ago

@ryanhamley I noticed a bug with this implementation;

screen shot 2017-10-22 at 4 49 52 pm

Notice that the handle in the center is now getting blurred by overlapping circles. Handles must always be at the top, so I modified the code in 09a19f4 to use 'waterway-label' by default for fill/stroke, but still allows you to force the layers to end of layers array by doing myCircle.addTo(myMap, null). Released to NPM with #54.

ryanhamley commented 6 years ago

Thanks for the couple of corrections and additional info on this @mblomdahl Sorry to be MIA for it as I was on vacation the past week. I'm going to try this out in my app now.