Insert a Mapnik Tile Between Google Base Map and Label Image

Question

I'm currently using Mapnik to create choropleth tiles of regions in Brazil via node-mapnik by using the g.connector from Wax as in the code below and it works well.

var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(-23.1851, -51.0754),
    zoom: 8,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.HYBRID
});

var tiles = {
tilejson: '2.0.0',
    tiles: ['url/{z}/{x}/{y}.png']
};
map.overlayMapTypes.insertAt(0, new wax.g.connector(tiles));

But I've noticed, using Chrome developer tools, that Google maps is sending two separate pngs per x, y, z tile back (one a 512x512 vt png with roads and labels and the second a 256x256 kh png of the ground).

Using Wax or other JavaScript tools, is it possible to insert the PNG I'm getting back from Mapnik between the two Google map pngs? My goal is to get the labels to be on top of the images returned by Mapnik. This can certainly be accomplished by changing the opacity of the Mapnik tiles, but the colors don't stand out nearly as well when opacity is reduced. Any help is greatly appreciated.

You might try posting on the GIS StackExchange - http://gis.stackexchange.com — Adam Morris, Mar 21 '14 at 17:09

score 0 · Answer 1 · answered Mar 24 '14 at 19:02

Looks like it's not currently supported.

If you look at the actual html - the two satellite image layers are in a nested div with a z-index, and the overlay is in a separate div with a different z-index. I believe it's not possible to for a separate div to be nested inside two different z-index's of a different div, aka, this doesn't work:

<div style:"z-index: 5"></div>
<div>
   <div style:"z-index: 1"></div>
   <div style:"z-index: 10"></div>
</div>

For a single tile, it is possible to detach it from the overlay div, and re-attach it to the map tile div, and assign z-indexes to all three images, but it doesn't seem very practical.

At the moment, there are a number of open requests to add this as a feature to google maps, but nothing exists.

Here's and idea for an alternate approach - enable your google map without the road layer (search for google map style wizard), and render the road layer onto your tiles using mapnik from openStreetMap data.

Insert a Mapnik Tile Between Google Base Map and Label Image

1 Answers1