📍 makerspac.es embed guide

how to embed your a makerspac.es map of your space on a website

Show your position, your makerspace-status (open/closed) and connect with friendly spaces of yours.

1. Live Preview

a) height 440px — without minimap

b) height 640px — with minimap

2. embed by iframe (recommended)

Copy one of the following code snippets and insert it on your website where you want the map to appear.
This does not interfere with your page´s css.

a) height 440px — without minimap

        
<iframe 
    src="https://makerspac.es/embed.html?id=1&friends=2,45,67" 
    width="100%" 
    height="440px"
    border-radius: 32px;
    frameborder="0">
</iframe>

b) height 640px — with minimap


<iframe 
    src="https://makerspac.es/embed.html?id=1&friends=2,45,67" 
    width="100%" 
    height="640px"
    border-radius: 32px;
    frameborder="0">
</iframe>

c) elements description

parameter	description	example
`url` required	url of the iframe embed page	`src=https://makerspac.es/embed.html`
`id` required	The ID of your makerspace (get it from your space´s marker-popup).	`id=1`
`friends`optional	IDs of friendly makerspaces of yours, separated by commas. These appear on the left under your makerspace.	`friends=12,34,56`

4. embed by div & JavaScript

Load the map directly in a div to control the styling. You need to access the JS and CSS files.


<!-- CSS in the <head> -->
    <link rel="stylesheet" href="embed.css">

    <!-- div at the desired location -->
    <div id="map-container" style="position:relative; height:440px;">
        <div id="map"></div>
        <div id="loading" class="loading">📍 loading...</div>
    </div>

    <!-- scripts at the end of <body> -->
    <script src="libs/leaflet/leaflet.js"></script>
<script src="embed.js"></script>

5. FAQ for embedding https://makerspac.es

How do I find my ID?
On the makerspac.es homepage, search for your makerspace and click on the pin. You will find the ID when you hover over the colored link:

What are those friends?
Search for the IDs of your friends' makerspaces to add them to the embedded map. example: &friends=x,y,z

What happens when my space is closed?
When you use the SpaceAPI, the marker on the map automatically turns red and the sidebar displays “closed.”