Custom Icons on your Google Maps

When building your maps with the Mapping Sheets add-on, by default it will use the standard icon set, with current default shape, and colors assigned in a predefined order.

However, you can choose your own custom colors and shapes, associated with each value of the column you select as the main Filter and also define alternative shapes and sizes based on specific values as explained below from point #2

1. Using just the default icons and colors

This is the out-of-the-box option and many people are fine with the default icon shape the add-on is using, at least when starting with our Mapping solution.

  • The default icon shape is a "standard" map icon as show in the right image, using the demo map

  • The default icon colors are coming from the valid HTML 140 extended color names, but sorted to provide some contrast among them, e.g. the first 23 colors the add-on will use by default are as follows:
    Blue, Brown, Aqua, Green, Magenta, Orange, Purple, Red, Yellow, Maroon, Gray, Lime, Olive, Teal, HotPink, Aquamarine, LightSteelBlue, BlueViolet, Chartreuse, Chocolate, CornflowerBlue, Crimson, DarkSlateGray

As shown in the screenshot, colors go from Blue to Orange in the list order and all shape icons are by default.

In the screenshot below taken from the mapping demo, there some custom color and shape, as an example of what we can do by using custom icons

Now, let's briefly explain how you can customize the marker icons (also known as pins) in your Mapping web app page

2. Selecting the icon shape, but using the default colors

You can select the icon shape to use in your map from Preferences > Icons > Icon set list, as shown in the right image

  • The current available icon shapes are listed below in alphabetic order
    dots-10, flags, locas, mdi/arrow-down-bold, mdi/bell, mdi/cup-water, mdi/currency-usd, mdi/map-marker, mdi/map-marker-outline, mdi/marker, mdi/pin, mdi/place, mdi/shield, mdi/truck, mdi/water, mdi/wrench, pins, triangles-10, user/bell-off, user/comment-question-outline, user/folder-account, user/folder-upload, user/oil-drum-spill, user/pin-off, user/place-off, user/recycle, user/refresh, user/shield-off, user/washing-machine, user/water-off

p.s. some of these icons are coming from custom projects and user's contributions, they are all built from SVG template files then converted to PNG image files for each of the 140 colors

3. Keeping the selected icon shape, but using custom colors

If you are fine with the selected icon shape, but want to have a specific color for each of your location groups, just do as follow:

  • Create a new sheet with the name Icons within the spreadsheet where you want to customize your marker icons

  • Add the headers Group and Color in row #1

  • Under Group column enter the unique values of the column you choose as your main Filter (e.g. Category)

    • warning: if you skip any unique value the add-on will assign the color from the sorted color list

  • And under Color enter a valid color name for each, as shown in the right image using demo data

    • warning: color names must be written exactly as listed starting with uppercase or will be ignored

  • The embedded spreadsheet below shows all the 140 web html extended colors (grouped by family?) that you can use

web html extended colors 140 (https://en.wikipedia.org/wiki/Web_colors#Extended_colors)

4. Using your own icon images

If you want to use your own icon images, you can do as follow:

  • Add a new header Icon to the Icons sheet described in point #3

  • Then enter enter your icon's full URL references for each main Filter value you want to use

  • In the demo map, we are using a specific icon for locations with Category equal to Laboriosam as follows
    https://thexs-mapping.firebaseapp.com/icons/mdi/map-marker/Gray.png

  • The icon image files should be .png files for performance as recommended by Google, although other formats could work as well

  • The icons must be secure hosted under https:// servers

Where to secure host your custom icon images?

Find below some suggestions based on users feedback and internal testing, only provided as a reference

  • Use your own server if you have any at your disposal

  • Some users are hosting their icons (and other images as well) at Google Photos, Google Drive, Dropbox, etc

    • Where are you hosting your icons?

  • If your icons are of general interest and in a workable SVG format, we can add them to our icon collection, just let us know

5. Using alternative shapes

Set alternative shapes to some icons based on the values under a header you select at Preferences > Icons > Icon shape

  • As shown in the image below, the header Feature is selected to set an alternative shape based on specified values

  • Add a new header Shape to the Icons sheet described in point #3

  • Under Group enter the specific values under the header you choose as Icon shape (e.g. Feature header)

  • And under Shape enter one of the available icon shapes for each value, as listed in point #2

  • The icons will keep the color already assigned

  • In the demo map we wanted to change the icon Shape for locations with specific Feature values as shown in the right image

6. Using alternative sizes

Set alternative sizes to some icons based on the values under a header you select at Preferences > Icons > Icon size

  • As shown in the image above, the header Feature is [also] selected to set a custom size based on specified values

  • Add a new header Size to the Icons sheet described in point #3

  • Under Group enter the specific values under the header you choose as Icon size (e.g. Feature header)

  • And under Size enter the new size as width,height numbers in pixels

  • In the demo map we wanted to modify the size of the icon (mdi/shield) associated with Unattended feature,

    • from its original 24x24 px size to 20x32 px so it looks elongated, so we enter 20,32 as shown in the right image

7. Using fully defined icons

This option is added just for experimentation although it might be suitable for small or special projects

  • If you want to define some of your icons this way, just enter the JSON formatted definition under the header Icon in the Icons sheet described in point #3

  • We are just exposing some (most) of the Google Maps Api options for the marker icon properties, for Icon and Symbol definitions as listed below

  • Find some examples below on using this feature, provided just as a reference

    • an image with scaled (smaller) size
      {"url":"https://thexs-mapping.firebaseapp.com/images/xsMapping-128.png", "scaledSize":{"width":32,"height":32}}

    • a triangle svg path definition, with 12 px side, scale by 2, then forcing the anchor to the bottom tip
      {"path":"M 0 12 L -12 -12 L 12 -12 z", "fillColor":"Aqua", "fillOpacity":0.75, "scale":2, "anchor":{"x":0,"y":12}}

    • a white semi-opaque circle with 25 px radius
      {"path":"M -25, 0 a 25,25 0 1,1 50,0 a 25,25 0 1,1 -50,0", "fillColor":"White", fillOpacity:0.5}

    • forcing the anchor of the standard small circle (10 px) icon to (almost) the center
      {"url":"https://thexs-mapping.firebaseapp.com/icons/dots-10/Aqua.png", "anchor":{"x":6,"y":6}}

    • do you have any other definition?
      {... coming soon?}

8. Adding custom labels to the icons

This option is still under the extended custom features list

p.s. It might look like the images below under Preferences > Icons and on the Mapping app

Summary

  • You can mix some of the options like custom Color and Icon as well as others on different lines

  • Note that the header Group in the Icons sheet is used for several options,

    • to hold values coming from the main Filter header to assign Color and Icon

    • as well as values from the headers you choose for alternative Shape and Size

    • the empty row #8 in the Icons sheet is not required, it's there just for better readability

  • The screenshots below show how the Icons sheet definitions modify how the Icons look on the demo map