Circles appear behind other layers

[ryanhamley]

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:

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.

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

Thanks!

[mblomdahl]

@ryanhamley I noticed a bug with this implementation;

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]

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.