gisprojects

Custom Basemap Using Google

Customizing a basemap can be done in multiple ways. Previously, I used ArcGIS Esri software to do this. However, what if the client does not have a license?

Purpose: Customize a basemap to the stylistic colors of an organization.

Step 1: Chose an organization.

I chose the non-profit Global Links. They do good work that has local and far reaching impact - for example, they are a primary mask supplier for an organization I volunteer with.

Step 2: Create a color pallet.

To get a reference image, I took a screen shot of the main page of Global Links.

Created a color pallet reference table with a Column for the Hex Code, Color Name, Sample Image, and RBG Distribution. The below reference table was used as a code pallet for which hex codes to use to assign colors in the map style editor.

Abbreviated Color Pallet Example

Hex Code	Color Name	Color	RBG Color Code
#8C264B	Stiletto		R: 140
			B: 38
			G: 75
#04B2D9	Cerulean		R: 4
			B: 178
			G: 217
#03738C	Blue Lagoon		R: 3
			B: 115
			G: 140

Step 3: Create basemap with color pallet.

I used the Google Sytling Wizard to create a custom basemap with colors pulled from my reference pallet table.

I also created a table that documented the colors changed for each section.

Colors Used For Map Features

Feature Type	Element Type	Styler
All	Geometry	Mosque (#026873)
All	Labels	Aubergine (#260911)
Landscape	Geometry	Mosque (#026873)
Administrative	Geometry	Wine Berry (#591830)
Administrative/Land parcel	Stroke	Cerulean (#04B2D9)
Administrative/Land parcel	Labels/Text fill	Aubergine (#260911)
Landscape/Natural	Geometry	Blue Lagoon (#03738C)
Points of Interest	Geometry	Stiletto (#8C264B)
Points of Interest	Labels/Text Fill	Aubergine (#260911)
Park	Geometry	Stiletto (#8C264B)
Park	Labels/Text Fill	Aubergine (#260911)
Road	Geometry	Concrete (#F2F2F2)
Road/Highway	Geometry	Carrot Orange (#F2911B)
Road/Highway	Stroke	Korma (#8C6111)
Road/Highway/Controlled area	Geometry	Carrot Orange (#F2911B)
Road/Highway/Controlled area	Stroke	Korma (#8C6111)
Road/Artery	Geometry	Concrete (#F2F2F2)
Road/Local	Text fill	Cioccolato (#59360A)
Transit/Line	Geometry	Brick Red (#BF3056)
Transit/Line	Label/Text Fill	Wine Berry (#591830)
Transit/Line	Label/Text Outline	Concrete (#F2F2F2)
Transit/Station	Geometry	Stiletto (#8C264B)
Water	Geometry	Brick Red (#BF3056)

I exported the JSON file containing the map color coding and created a Google Map API. Then, I used the API and reference code to create an interactive webpage version of the map.

Check out the interactive version of my custom Map Style for Global Links on the map page!