Embedding maps on your website

Support
1

Street Art Cities has various different maps you can embed into your website. Here’s how to do it:

Map links

Map for a specific city

This is the simplest one - if you want to display a specific city, you can use our Embed Tool to generate the code to embed your map. Simply select the city you want, change the zoom level, and copy the code.

:point_right: Are you an official partner? In the partner dashboard you’ll find a similar tool, but it has some special options only available to our partner cities, including being able to track how many people use the map to view markers in a specific campaign.

Map for a route

Want to embed a map for a route, like this one? Simply add /embed/map to the end of the URL to get the embeddable version.

Example URL:

https://streetartcities.com/cities/antwerp/routes/7d52d369-cc6f-416f-bd04-ecb0045c897e/embed/map

Example HTML:

<iframe width="640" height="420" src="https://streetartcities.com/cities/antwerp/routes/7d52d369-cc6f-416f-bd04-ecb0045c897e/embed/map" scrolling="no" frameborder="0" allowfullscreen></iframe>

Tag map

The same goes for tags, like this one. This is a super easy way to get an embeddable map for a specific festival, or any other tag that is used by hunters to tag artworks and places.

Example URL:

https://streetartcities.com/tags/festival/ALL%20CAPS%202023/embed/map

Example HTML:

<iframe width="640" height="420" src="https://streetartcities.com/tags/festival/ALL%20CAPS%202023/embed/map" scrolling="no" frameborder="0" allowfullscreen></iframe>

Artist map

Artists can also add /embed/map after their SAC artist URL to get an embeddable map of only their artworks.

Example URL:

https://streetartcities.com/artists/does/embed/map

Example HTML:

<iframe width="640" height="420" src="https://streetartcities.com/artists/does/embed/map" scrolling="no" frameborder="0" allowfullscreen></iframe>

Styling your map

You can make your map more snazzy by doing some of these things:

  • Replace with width="640" with width="100%" to make the map show up full-width on your page.
  • Add style="border-radius: 8px;" to the <iframe> tag to add some beautiful rounded corners.
4 Likes