justinobeirne.com

Justin O’Beirne of San Francisco, California: essays and contact information.

Additional Examples of Styled Maps with Google Maps API 3
2010

REMOVING SELECT MAP ELEMENTS

Example 26: No States/Provinces

Many world atlases show maps of countries without their states or provinces. If you’d like to make similar maps, consider using this style.

Suggested uses: country comparisons, political maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative.province",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 27: Major Roads Only

If you want to make a map that only shows an area’s most important highways, consider using this style.

Suggest uses: traffic maps, metro area maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative.neighborhood",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.land_parcel",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.arterial",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.local",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 28: Recreation Maps (Natural Features & Parks)

This style removes all the maps’ “manmade” features; it’s perfect for any kind of recreational-themed map.

Suggested uses: hiking maps, fishing maps, camping maps, etc.

JSON code snippet for this style:

[
  {
    featureType: "administrative",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape.man_made",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.attraction",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.government",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.medical",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.place_of_worship",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi.school",
    elementType: "all",
    stylers: [

    ]
  },{
    featureType: "poi.sports_complex",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

MODIFYING THE COLORING OF DIFFERENT MAP ELEMENTS

Muted Maps

Example 29: Muted Maps II

Of all the map styles I’ve created, this is my favorite. It’s very subdued and, as a result, it’s excellent for a wide variety of uses.

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "transit",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Mimicking the Styles of Other Maps & Mapping Sites

Prefer the styling of another online mapping site? No problem. Now you make Google Maps look like your favorite mapping site.

Example 30: Bing Maps

JSON code snippet for this style:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { hue: "#5e00ff" },
      { lightness: 40 },
      { saturation: -70 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "simplified" },
      { saturation: -30 }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: -50 },
      { lightness: 40 }
    ]
  },{
    featureType: "poi",
    elementType: "geometry",
    stylers: [
      { saturation: -10 },
      { lightness: 40 }
    ]
  }
]

 

Example 31: Yahoo! Maps

JSON code snippet for this style:

[
  {
    featureType: "all",
    elementType: "all",
    stylers: [
      { saturation: 40 }
    ]
  },{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { hue: "#ff1100" },
      { gamma: 1 },
      { lightness: -30 },
      { saturation: -20 }
    ]
  },{
    featureType: "administrative.locality",
    elementType: "all",
    stylers: [
      { hue: "#fff700" },
      { saturation: 100 },
      { lightness: 0 },
      { visibility: "on" },
      { gamma: 1 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#ff9100" },
      { lightness: -20 }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { saturation: -10 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "poi.park",
    elementType: "all",
    stylers: [
      { saturation: -20 }
    ]
  }
]

 

Example 32: MapQuest

JSON code snippet for this style:

[
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { hue: "#0033ff" },
      { lightness: 10 },
      { saturation: -50 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "all",
    stylers: [
      { hue: "#ffc300" }
    ]
  },{
    featureType: "road.highway",
    elementType: "labels",
    stylers: [
      { visibility: "simplified" },
      { gamma: 0.6 },
      { lightness: 0 }
    ]
  },{
    featureType: "transit.station",
    elementType: "all",
    stylers: [
      { visibility: "on" },
      { gamma: 0.01 }
    ]
  },{
    featureType: "landscape",
    elementType: "all",
    stylers: [
      { hue: "#88ff00" },
      { lightness: -1 },
      { saturation: -10 }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { saturation: 30 },
      { lightness: 50 }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "landscape",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

 

Example 33: OpenStreetMap

JSON code snippet for this style:

[
  {
    featureType: "administrative.country",
    elementType: "labels",
    stylers: [
      { saturation: 60 },
      { hue: "#ff00bb" },
      { lightness: 0 }
    ]
  },{
    featureType: "administrative.province",
    elementType: "labels",
    stylers: [
      { hue: "#ff00bb" },
      { saturation: 60 },
      { lightness: 0 }
    ]
  },{
    featureType: "administrative.neighborhood",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.land_parcel",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "administrative.province",
    elementType: "geometry",
    stylers: [
      { hue: "#ff00b2" },
      { saturation: 50 },
      { lightness: -20 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { gamma: 0.8 },
      { hue: "#0099ff" },
      { saturation: -80 },
      { lightness: 10 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#ffd500" },
      { visibility: "simplified" },
      { saturation: -10 },
      { lightness: -10 }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "geometry",
    stylers: [
      { saturation: -20 },
      { lightness: 40 }
    ]
  }
]

 

Example 34: Rand McNally’s The Road Atlas

JSON code snippet for this style:

[
  {
    featureType: "landscape.man_made",
    elementType: "all",
    stylers: [
      { lightness: -46 },
      { saturation: 100 },
      { hue: "#ffee00" },
      { gamma: 0.94 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { hue: "#2a00ff" },
      { visibility: "simplified" },
      { lightness: -10 },
      { saturation: -60 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { lightness: 20 },
      { hue: "#ff0066" },
      { saturation: 20 }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "simplified" }
    ]
  },{
    featureType: "water",
    elementType: "all",
    stylers: [
      { lightness: 40 }
    ]
  },{
    featureType: "administrative.locality",
    elementType: "all",
    stylers: [
      { lightness: 20 }
    ]
  }
]


© 2010  Justin O’Beirne  ·  Contact

All rights reserved. Unauthorized use and/or duplication of this material without express and written permission is strictly prohibited. Up to 250 words and/or 3 images may be used without permission, provided that full and clear credit is given to “Justin O’Beirne” with appropriate and specific direction to the original content.

Copyrighted materials are reproduced either with permission of their owners or under fair use. Trademarks are the property of their respective owners. No endorsement is implied.




HOME