Top 5 Tips on Using an Open Street Map or Google Map Layer in your Web Maps

Using a base layer such as Google Maps or Open Street Map is a great way to easily add context and extra detail to your map. I would share with you some tips on how they can be used most effectively:

1 - Use Transparency for Certain Layers

Usually when building a map, we place polygons layers on the bottom, lines in the middle and points on top. Using a base layer obviously breaks this pattern as the base layer has polygons, lines and points already.

This forces us to place our layer of interest on top of the base layer which has two negative consequences, firstly the base layer below is hidden and secondly any labels that happen to fall at the point where the main layer meets the base layer will be partially obscured.

Using transparency on the main layer can help us reduce these consequences and make the map more attractive and usable.

In some cases, particularly where we have many classes with only subtle differences in color it is best NOT to use transparency in order to make the map easier to read as in the example below. It may also be that we have sufficient base layers such as roads, place names to give our map enough context.

2 - Use Thicker Outlines to Cover Up Differences in Data Accuracy

The data in the OSM basemap may be of different scale and accuracy than the data you have. This may case mis-alignments that are visible in the map. As a result the data in your layer is often more accurate and results in the lines on the base map and your layer not being correctly aligned. If presentation is more important than data accuracy in the map that you’re creating, then you can hide a lot of the mismatch by using a thicker outline.

3 - Don’t Repeat What’s Already in the Base Layer on Transparent Maps

If you are using transparency to expose the base layer, then you should avoid repeating data that’s already in the base layer. Adding a roads layer when the base map already contains roads will often make the map feel untidy.

4 - Avoid Using Layers that are Constrained By a Bounding Box

Nothing looks worse on top of a base map than a layer that has been cropped by a bounding box. Consider deleting the bounding shapes before uploading your file.

5 - Set a “Scale Range” for more detailed layers

In order for your map to appear less cluttered, it may be useful to draw a particular layer only when the user has zoomed in.