Interactive maps on any website - Embedded Maps on Soar

You asked for it, embedded maps are finally here!

July 25, 2022

There’s so much you can do with our new embedded maps feature on Soar. Let’s discover how to embed a map, and dive into what’s possible with customization.
How do I embed a map?

‍First, go to Soar and find a map you’re wanting to embed. Use the search bar at the top, or zoom around the Earth to find a map. I know just the map in New York!

Once you’ve found your map, hit the embed icon under the comments section. It looks like this </>.‍
‍A window will pop up which displays a code block. This code block will allow you to add an interactive map to any website or page where embedding is possible. This lets people access the maps from Soar in a whole new way.

Hit the “COPY CODE” button.
Now go to the website or platform you wish to embed the map on, and paste the code into the embed options. This should work on most websites that support HTML code. It will usually look something like this.
The map is now embedded and ready to be viewed by the world.

But we can go further than that.

We’ve added a variety of easy-to-use advanced settings, to further customize the look and function of your embedded map.

How do I use the advanced settings?

‍Click the ‘advanced settings’ text at the bottom of the embed window to begin.

A drop-down menu will appear with different options. Let’s go through them one at a time.

Appearance lets you set the pixel with and height. The default is set to 600x400px. You can set it to any resolution that suits your needs. Take a look at an example with the appearance set to 700x700px

Under controls, you can select which base map appears behind the map you’re embedding. For example, you might want to use the Google Satellite basemap, to compare new imagery with old. Maybe you want to set the basemap to Open Elevation, to define rocky areas better.

  • Enable ‘Basemap selection’ to let people switch between multiple base maps within the embed.
  • Enable ‘Scale’ to add an adaptive scale for reference as you zoom into your map.
  • Enable ‘Transparency control’ to give people a slider that adjusts the transparency of the map. This is useful for showing different information and comparing it to the surrounding area.

Take a look at an embed we’ve setup with all the above options enabled.

There are two options you can switch between for the position of your map.

  • Enable ‘Use total map bounds’ to set the default view of the map to the extents of the maps boarders. This will show the full map.
  • Enable ‘Use my current view’ to make the default view of the map whatever your current zoom level and position is inside Soar before embedding.

You can set what kind of behaviour your map should limit. These can be handy if you only want to show a specified area of your map.

  • Enable ‘Lock zoom’ to stop people from zooming in or out of your map.
  • Enable ‘Lock position’ to stop people from navigating the map. This can be handy when you just want to display a map with a set view and interactive elements (Such as a transparency slider).

Take a look at an embed we’ve setup with both the above options enabled.

All user and platform credits (such as the username of the person who uploaded the map) are automatically attached to each embedded map.

Annotations can also be viewed in the embedded maps, which is extremely useful for explaining the meaning of a map. Simply annotate your map in Soar, or have existing annotation from a user's comment up, then embed the map. Check it out!

Lastly, beyond these settings, we have further customization options possible by altering the styling in the code. We hope people who know their way around code go crazy with these settings and come up with unique style options that best suit their needs.

We can’t wait to see what you do with embedded maps. We hope it’s a useful tool to bring interactive maps to your websites.

This blog was written by:

Michael Pearce

Michael is a creative producer for Soar, crafting creative content such as videos, graphics, and social media posts. He has a background in video game development and enjoys spending time with pigeons in the city.

View author's Soar profile
back to blog