Include the <!DOCTYPE HTML> tag at the very top of your page. (if you interested in understanding why, you can go here)

As you might know, leaflet is built on top of the leaflet SDK version v1.0, you need to include the leaflet files into your HTML page. Add following two lines in your head tag.

<script src=""></script>
<link rel="stylesheet" href="" />

Now add Micello SDK.

<script src=""></script>

Now, let's add a map container. Add below HTML to your body tag. Map will be displayed inside this "div" element. Here element id is required, which will be used later to let SDK know where to put the map. In this case we are using id as "map", but you can choose any valid string.

<div id="map"></div>

Now add few lines of css to position your map. You can set the height, width or any other css property as per your requirement.

    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }

Now let's initialize leaflet map first. This can be any setting you desire.

var map ='map');

Next step is to add a tilelayer. Tile layer will load the outdoor map. Leaflet supports many tile layers and you can choose any one of them.


Now add below code to load the Micello map. Where you see YOUR_API_KEY, replace that text with the API key Micello provided for you. Here we are loading "Westfield Valley Fair" map (CID 78).

L.micello.loader.on("indoorReady", function (e) {
    community = ( 78, {
        key: "YOUR_API_KEY",

That's it, now open the map in your web browser and voila, your first Micello map.