The Veganaut map can be embedded on your page! It features all the vegan options entered by our users and is kept up to date by them and us. (We hope you are one of our users as well. If not: register and enter all the vegan options you want the visitors of your page to see.) So how does embedding work, exactly?

For instance, let’s say you want to show your visitors a map of all the vegan options available in Bern, Switzerland. Then just add this line of html-code to your page:

<iframe src="
https://veganaut.net/map/?mode=embedded&type=gastronomy&granularity=location&zoom=13&coords=46.9511997,7.4452972" width="100%" height="380" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"></iframe>


and you get this interactive map:

Now, let’s say you don’t want to show your visitors a map of Bern, but a map of Zürich instead. To do that, you have to change the long numbers behind “coords=” inside the src-attribute, i.e. you have to replace the coordinates for Bern (46.9511997,7.4452972) with those for Zürich.

You probably don’t know the coordinates for Zürich by heart, but that’s not a problem. Just go to veganaut.net/map, search for Zürich and manually adjust the map until it is centered on exactly the spot you want.  Then copy-paste the coordinates from the page url.

You can also copy-paste the zoom level directly from the page url, or you can adjust it manually by changing the number behind “zoom=” (to zoom in make the number higher, to zoom out make it lower; the highest zoom level is 18, the lowest 0). Also, by changing type=gastronomy to type=retail and/or granularity=location to granularity=product you can customize the filter settings.

Of course, you can also just copy-paste the whole page url into the src-attribute. However, if you do, be sure to insert

mode=embedded&

between https://veganaut.net/map? and the rest of the url, or else the embedded map will look like the following, which also kind of works, but is not very user friendly (i.e. your visitors won’t be able to switch to full screen mode and can click on too many irrelevant buttons):

If you’d like us to adapt our embedded mode to your needs, just get in touch with us. We’re happy to customize it if we can.

Also,  please tell us if you embed our map on your page. It’s always good to hear from people who find what we’re doing useful.

Pro-Tip: Since your users´ devices come in different sizes the map section they see may not always show the whole area you´d like them to see. – If you hard-code a fixed zoom level into your iframe, that is. But there´s a solution: Go to the veganaut.net startpage, search for the desired area via the text field, hit “Show”, then go to the map and don´t move it around at all. Instead look at the url. You will see that it does not feature any zoom= or coords= attributes, but instead a single area= attribute, e.g. area=bern-schweiz---oR1682378. Use this attribute instead of the zoom and coords attributes inside the url in your iframe code! The zoom level and coordinates will adjust automatically to show the whole area no matter how large or small the device your page is displayed on. (Maybe the exact area you want to show has no specific name known to Openstreetmaps. In that case, sticking to a fixed zoom and coords might still be better.)