Posts‎ > ‎

Styled Google Map on the Mapping web app

posted May 8, 2017, 12:38 PM by Faustino Rodriguez   [ updated Sep 2, 2017, 8:44 AM ]
The Mapping web app accepts styled map definitions for Google Maps.
The extra custom Styled map option will appear right beside the standard Map and Satellite styles, for you to choose or even set as the default option.

As described on this page styled map definition is an array of three types of objects (featureType,  elementType, stylers) with scopes and properties, that combined produces an amazing effect.

You won't need to be an expert on map colors, just search on the Snazzy Maps repository (or other of your preference) for the styled map that matches your requirement. There are over 11,000 styled map definitions and counting.

When you find "your matching style", if you are using the Mapping Sheets add-on, you just need to copy the code (click expand-code button, select all from [ to ] both included, copy) and then paste it on Preferences > Map > Styled map definition input box. Optionally select to set this style as the Default on loading and save.

On your next BUILD you would get the Style option on your map.

See a simple sample below, copied from this page to get an idea of the structure
[
  {
    "featureType": "all",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "simplified"
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "visibility": "simplified"
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]


Thanks to Snazzy Maps for providing such a wonderful tool, for the rest of us.

p.s. The styled map definition array for the Mapping web app, is just a key entry in your .json data file with this path: custom > styledMap. Optionally set custom > styledMapDefault as true
Comments