We Keep Coding

Apply grayscale filter for some layers of a Mapbox map

I try to apply a grayscale effect to the background of a map, but I don't want the upper layers of the map to be affected by the grayscale.
Naively, I applied a CSS filter on the canvas element:
filter: grayscale(1);
but of course everything on my map turned to gray :
I want to preserve the border of the city Aix-en-Provence green, but I want the background of the map to be gray.
Is it possible to somehow apply a grayscale to all layers behind one layer ?

No, it's not possible using CSS filters, as mapbox uses a single canvas element to draw all its layers. The only way to go about this is to modify the colors in the style of the map and change all color related prop values of the layers you want grayscal-ed to their grayscale equivalent. I'm pretty sure you'll find grayscale styles for mapbox.
In theory, since it's possible to fetch all layers of the map (and their order), and it's also possible to get the contents of its style object, this task could be automated, but it would need attention to detail and thorough testing.
Definitely not a one liner.
Most likely, it also won't work for external images (e.g: image layers or layers displaying sprites) used by the map, unless you replace those with grayscale alternatives, too.
Another approach, which might just work, would be to use the same technique as the mapbox-gl-compare plugin and have two maps overlapped. Obviously, in your case, you won't have the slider to toggle between them and the one on top would need to be mostly transparent, while the one below would be transformed using CSS filtering.
You'd think keeping two maps in sync in terms of panning, zooming (and, most importantly: rendering) wouldn't work but, as you can see in the plugin demo, it works quite well. All you have to figure out is how to make the map on top mostly transparent (it's a map style modification job - although easier, as this time you'd need to simply hide the layers, not change their color). Also note having the layers disabled will actually make the top map faster, so it looks like the right solution.

How can a put a static picture over Google Dynamic Map?

I have added a Google Maps Javascript API (dynamic map) to my web-site. I want to put a static picture in the bottom left corner over the maps div - something like a legend. It will not move when the user scrows around.
Is there a way to do it through Google Javascript API or shall I just add a div, put it over the map with CSS?

Yes, there is a way to add this sort of thing using the Google Maps Javascript API. It is considered a Custom Control, and here is a link to the documentation. You would do that if you need to have your element move around when screen real estate gets tight and you want Google Maps to take care of it.
If you aren't concerned with reflowing the other controls as the map appears on screens of various sizes, you can just go with an absolutely positioned element. If you don't want your overlay to affect the map ui by capturing mouse events, just set pointer-events:none; on that element.

How to ignore mouse events on a mapbox layer

I've built a marker on my Mapbox map that looks like this when a user mouse over it:
The issue I'm running into is that the document icon is a separate layer from the background pin. This is so users can upload custom icons. When using the mouseover and mouseleave events to create a hover popup on the background pin layer, the popup flickers when the user hovers over the icon layer. This is because the user is technically leaving the background pin layer.
I know there are javascript hacks to potentially do this that are messy, but what I'm really looking for is a way to "ignore" events on a mapbox layer. Is this possible?
Edit: The markers here are rendered as a Mapbox layer, not as HTML markers and are thus drawn using the canvas (I believe), so using CSS to ignore events is not possible.

A simple way to ignore mouse events using CSS is to use the style property pointer-events:none this will not trigger any pointer(mouse) events on the element

Instead of registering events per layer, you could register the mousemove event without specifying the layer and use queryRenderedFeatures to see if the cursor is on either of your two layers.
Another approach is use a technique like https://www.mapbox.com/mapbox-gl-js/example/add-image/ and create a composited image client side so you only have the one layer.

How do I resize SVG images on a map as the zoom level changes?

I'm using leaflet to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map.
I've looked online for examples, and the resources I've come across uses the geo functions from the d3.geo library. Whereas in my use case I'm using d3, leaflet, and an SVG layer over the map.
Is there a formula that I can apply to resize the objects correctly? I know that I will have to apply a translate function which will be based on the width height and current zoom level, but I was wondering if there is a standard way to do this?
EDIT: Here is one resource I found, but it uses the d3 geofunctions, and from what I can gather, it seems to redraw the polygons every time the map view is reset (which might be inefficient(?)
http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html

Just apply CSS to change the size of the SVG or just modify the SVG using JS or what ever you use for SVGs every time the scroll event is triggered.
Google maps has an event in it's api which is triggered when the zoom level changes.
https://developers.google.com/maps/documentation/javascript/events#EventProperties

Google Maps - Changing the pane order of tile overlays?

A continuation of my previous question: How to change the layering of KML and Tile Overlays in Google Maps?
I am currently rewriting some of the code regarding the buttons which enable and disable tile overlays using arrays. In doing so, I'm trying to combine all of the button's individual functions into a single function, but since I have two methods of rendering the overlays, I was hoping to try and simply focus on only one method. The first uses "overlayMapTypes":
map.overlayMapTypes.insertAt(0, beloitMapType);
The second, using a script provided in my previous question:
this.getPanes().overlayShadow.appendChild(this.settings.div_);
The former method is my original approach; however, since I use polygons on the Satellite view I needed a way to place icon/name overlays above the colored polygons. To achieve this, I sought something akin to the latter method where certain overlays could be placed onto a pane higher than the polygons and thus appear above them.
However, in the time between my previous question and now, as well as through some of my own research, I've come to realize that the latter method, rather than placing the tiles into their places, estimates the location of the tile and places it as an image overlay. As a result, a part of my accessibility layer which colors in inaccessible paths had been misaligned by a pixel or two, or my building name overlay currently has names on the border of two tiles which have a sharp line through them as those two tiles overlap slightly. In addition, these two issues come and go each time the map is loaded with each tile being placed on the map with a variance of 1-2 pixels in any direction.
Thus, I would very much prefer to use the former method with overlayMapTypes, which is more reliable and accurate, on all of the overlays, but I also need a way to bring some of these overlays higher than the "overlayLayer" pane and above the polygons. Is this possible and, if so, how could it be done?
Addition: I have an additional need to try and find a method to achieve the reassignment of panes with the overlayMapType method: the script I'm using to achieve this doesn't appear to work in IE7/8. I'm going to investigate this angle myself, but I'd still prefer to drop the script entirely if possible.

Well, I've hit upon a possible solution and, for the sake of sharing it, allow me to explain:
Polygons do not necessarily need to be visible to still have click and hover events.
Since the polygons are used to color the buildings and poi in Satellite view, such a visual component could easily be done by an overlay.
Thus, a possible solution is to have all polygons invisible and simply use them for click and hover events. Likewise, a second overlay, or a modification of an existing one, would replace the polygon's original visual component. Since this visual component is now an overlay like everything else, it can be easily layered with any other overlay using the "MapType" method.
(This however doesn't answer the question; namely, can tile overlays and polygons be layered only with the MapType method? I would still like to know that, but in the event that there is no answer, this hopefully is a possible alternative.)