How to emulate this grayscale basemap look+feel in Google Maps

Question

I love the design on the Development Seed homepage, where they've used a grayscale basemap with bold 3D-style graphic markers.

It appears that they've used the ModestMaps API to create a tiled basemap at various resolutions, with the text and graphics burned into the basemap.

I'd like to emulate this look+feel (for a personal, just-for-fun project) using freely available tools such as the Google Maps API. I need the ability to change the marker overlays rapidly, so they would need to draw dynamically over the basemap.

Is it possible to achieve a similar grayscale, terrain-based backdrop using Google Maps?

The Google Maps API Styling documentation shows how to reduce the saturation of the topo map, but I can't see an option to do it with the Terrain map.

I think I can emulate the bold graphics using the complex Icons sample as a starting point but would welcome any suggestions.

Thanks

Answer 1

I don't know whether this will help at all, or whether Google maps supports other tile layers, but the there is an open source project (and some freely accessable tile servers) for generating base maps.

http://acetate.geoiq.com/tiles/terrain/preview.html looks pretty close to what you are after (although not quite as nice).

You could roll your own using the source as well as an additional option. Check out GitHub for all the info (including the url structure for the tile servers and the pre-rolled examples).

Answer 2

If you're comfortable using OpenStreetMap data, you might want to take a look at CloudMade's map style editor; the style at http://maps.cloudmade.com/?lat=39&lng=-89&zoom=4&styleId=28983 might be a good start. You can clone that style and edit it to make it better for your needs.

I'm not sure if you can use it in Google Maps API, but you can definitely use it with OpenLayers and Leaflet.

Answer 3

No it is not possible--Google licenses and serves MapLink, Tele Atlas shaded relief base images for the Google Terrain MapType. At V3 of the Google API you can now style the features of the Terrain MapType, but the base image data is a mixed elevation and vegetation/snow cover renderings.

You can remove the features with a &style=feature:all|element:all|visibility:off styling of a Terrain maptype. But you can not render the base map into grayscale. And, as you've found, setting saturation only adjusts the features not the base image.

You could replace the google.maps.MapTypeId.ROADMAP in your grayMapType code with a .TERRAIN maptype but you are stuck with the green gray shaded relief rendered base map if continuing to use a Google Maps API solution.

Here is an example of the best you could do with the Google provided shaded relief terrain map, note that the zoom values differ from the ROADMAP values you've been using.

Also, you'll note that the Development Seed folks are using image tiles based on a world DEM including bathymetric values with their Modest Maps FLash scripting. If you'd like to roll your own you can try the SRTM30plus or CleanTOPO variants. But you'll have to do more of the web server maping service backend work. And if you get that far into it you may want to study up on working with shaded reliefs.

Answer 4

looks an awful lot to me like that basemap is a generalized (and deftly rendered) hillshade, probably made by combining many digital elevation models and benthic raster data sets. I don't have the faintest how to go about formatting or tiling such a base map for use in google maps, but perhaps something like this or even this will be of some help to you.

best of luck with it.

Answer 5

This question was addressed in the ESRI Mapping Center

I have quoted the relevant sections of the answer below:

First, make an ArcGIS server connection through ArcCatalog to the ArcGIS Online server using this url. It will list all the basemaps as map services.

Next, create a file geodatabase on your computer and note the location. Create a Mosaic Dataset. While creating the mosaic dataset, set the projected coordinate system to WGS84 Web Mercator (Auxiliary Sphere) because this is the projection Esri basemaps use. Once done, right click the mosaic dataset and click Add Rasters - an Add Rasters to Mosaic Dataset tool will open. Under the raster type select "web services" and for Input browse to the GIS Servers you added in the first step and select the basemap service you want to convert to gray scale. In this case, I added the "World_Topo_Map" service. Click OK and this will add world topo map service to the mosaic dataset and it will be added to the table of contents as a three band raster. You’ll notice that Mosaic is a composite layer and it will show three RGB bands.

Now right click you the mosaic dataset in ArcCatalog and click Properties. Click the Functions tab on the Properties dialog, right click the Mosaic function under the function chain and hover over with the mouse to select Insert and then select the Grayscale function. This will open the Raster function properties dialog. Give weights of 0.33 to each band and click OK. You should now be all set and the basemap will display in a gray scale.

Answer 6

The existing answers are out of date, since Esri now provide an easy method to set a grayscale basemap directly, as described at https://developers.arcgis.com/javascript/3/jsapi/map-amd.html#map1

Answer 7

I see you found a solution with the ESRI grayscale map and I remember that development seed map it looked so good!!

Just for anyone else that may come by this question I have found Snazzy maps www.snazzymaps.com to be an easy way to customize a google maps style. I couldn't quite get the same look as the dev seed map but I was to get something close I think https://snazzymaps.com/style/65225/development-seed-look-alike