Skip to content

Quick Start Guide

Goal: Create your first indoor map in 30 minutes

This guide walks you through creating a simple single-floor map from start to finish. Perfect for first-time users who want to understand the basics.

Before You Start

What you'll need:

  • ✅ A MapBoot account (sign up)
  • ✅ A floorplan image (PNG or JPG)
  • ✅ Basic knowledge of the building layout
  • ✅ 30 minutes of uninterrupted time

What you'll learn:

  • How to set up a map structure
  • How to trace walls and create graphics
  • How to create routing paths on routes layer
  • How to add locations
  • How to publish and embed your map

Step 1: Create Your Map (2 minutes)

  1. Log in to MapBoot Dashboard
  2. Click "New Map"
  3. Click "Open in Editor" (the edit map button)

Note

The following steps are done inside the MapBoot Editor.

Configure Map Settings

  1. In the Map Tree (left panel), select the Map at the top of the tree
  2. The map properties will appear in the Properties panel (right side)
  3. Give your map a name (e.g., "Main Building")
  4. Set your measurement unit:
  5. Meters (m) — for metric
  6. Feet (ft) — for imperial

Tip

Choose the unit system that matches your floorplan measurements. This cannot be changed later without affecting scale.

Step 2: Set Up Building Structure (3 minutes)

Create a Group (Building)

  1. In the Map Tree (left panel), you'll see your map name
  2. Click "Add Group"
  3. Name it "Main Building"
  4. Keep Type as "Regular" (not Transit)

Create a Layer (Floor)

  1. Select the Group you just created
  2. Click "Add Layer"
  3. Name it "Ground Floor"
  4. The layer is now active (highlighted in the tree)

Upload Blueprint

  1. With the layer selected, look at Properties (right panel)
  2. Click "Upload Blueprint Image"
  3. Choose your floorplan PNG/JPG
  4. The image appears in the viewport

Scale the Blueprint

  1. In Properties, find "Background Scale"
  2. Measure a known distance on your blueprint (e.g., a room that's 10 meters wide)
  3. Adjust the scale value until the grid matches real-world size
  4. Use Opacity slider to make the blueprint semi-transparent (around 50-70%) for easier tracing

Scaling Tips

  • Find a dimension you know precisely (like a standard door width: 0.9m or 3ft)
  • Zoom in close and count grid squares
  • Adjust scale until measurements match reality

Step 3: Draw Walls & Surfaces (10 minutes)

MapBoot Editor UI

Enable Drawing Tools

  1. Make sure the Sub Layer is set to "Graphics" Sub Layer (this is the default value for drawing walls and surfaces)

  2. Make sure Snap Snap point is enabled (helps align points to grid or to other points)

  3. Zoom in to the area where you'll start

How Drawing Works

The Point/Line/Polygon buttons in the toolbar are for selection mode only. To start drawing, click the Add Point button (+) in the toolbar.

Sub Layer Selection

  • Graphics sub-layer = For drawing walls and surfaces (visual elements)
  • Routes sub-layer = For drawing pathfinding routes (functional navigation)

Make sure you're on the correct sub-layer before drawing!

Draw Exterior Walls

  1. Click the Add Point button (+) Add point in the toolbar to start drawing
  2. Click to place your first point at a corner
  3. Click to place the next point along the wall
  4. Continue clicking around the building perimeter
  5. Close the loop by clicking near your starting point (it will snap)
  6. Press Esc to finish and switch back to selection mode

Apply Wall Style

MapBoot Editor Toolbar

  1. Select the line you just drew (click on it)
  2. In the toolbar on the right side, find the Wall Style menu
  3. Click "Thick" style for outer/perimeter walls (Darl grey)

Style Location

Wall and surface styles are in the toolbar on the right side, not in the Properties panel.

Viewing Styles Clearly

Editor gizmos can hide wall styles after being applied. To see your graphics clearly, click the Preview button Preview map in the toolbar - this hides all gizmos and shows only the styled graphics of your map.

Draw Interior Walls

  1. Click the Add Point button (+) Add point again to start a new line
  2. Draw lines for interior partitions (room dividers)
  3. Draw walls as they appear on your blueprint (with or without door gaps - walls are purely visual)
  4. When lines intersect, MapBoot automatically creates shared points
  5. Press Esc to finish each line
  6. Select the interior wall lines
  7. In the toolbar (right side), click "Thin" wall style (Ligth grey)

Group Selection

You can select multiple lines at once (Cmd/Ctrl+Click or drag select) and apply the style to all of them at once - this is the quickest way.

Pro Tip

  • Use Cmd/Ctrl + drag to pan around the viewport
  • Use scroll wheel to zoom
  • Press Delete to remove mistakes
  • Save frequently using the Save button in the toolbar

Step 4: Create Floor Surface (3 minutes)

Create the Floor Polygon

  1. Switch to Line selection mode (top toolbar)
  2. Select the closed loop of exterior walls
  3. In the toolbar (right side), find the Surface Style menu
  4. Click "Base" style (covers the whole floor area), Apply "Public" style for accessible areas (rooms visitors can enter), Apply "Private" style for restricted areas (storage, maintenance)
  5. The enclosed area fills with a light color

Surface Style Application

Surfaces are typically styled as you create them. Select the lines that form a closed loop, then apply the surface style from the toolbar. You can also apply styles to group selections of existing surfaces.

Note

Surfaces are visual only. They help highlight areas but don't affect routing.

Step 5: Build Routing Network (7 minutes)

Critical: Without routing paths, users cannot navigate to locations.

Routes Layer

The routing network is on a separate routes layer, completely independent from walls/graphics. Routes define where people can walk and connect location access points.

Draw Walkable Paths

  1. Important: Set the Sub Layer to "Routes" (this is where you draw pathfinding routes)
  2. Click the Add Point button (+) Add point in the toolbar to start drawing
  3. Draw lines through corridors and walkable areas
  4. These lines represent where people can actually walk
  5. Routes should pass through doorways and connect all accessible areas
  6. Press Esc to finish each routing line

Sub Layer Must Be Set to Routes

Before drawing routing paths, make sure the Sub Layer is set to "Routes", not "Graphics". Routes and graphics are on separate sub-layers.

Important Rules

  • Routes are independent of wall graphics
  • Routes should follow realistic walking paths through rooms and corridors
  • Create a continuous network connecting all areas

Common Mistake

Routing lines must form a connected network. Isolated segments will prevent navigation between areas.

Step 6: Add Locations (4 minutes)

Locations are searchable places users can navigate to.

Create a Location

  1. Important: Ensure you're on the routes layer (location points can only be added on routes layer)
  2. Click the Add Point button (+) Add point in the toolbar
  3. Click once where you want the location marker
  4. Press Esc immediately
  5. You've created an "orphan point" — MapBoot converts this to a location automatically

Routes Layer Required

Location points can only be created while the routes layer is selected. If you try to create an orphan point on the graphics layer, it will be automatically deleted.

Name the Location

  1. Select the point you just created
  2. In Properties, fill in:
  3. Name: e.g., "Conference Room A"
  4. Description: e.g., "Main conference room, seats 20"
  5. Meta Data: e.g., "meeting, conference, room"

Add Access Points

  1. In the location Properties, find "Access Points"
  2. Click "Pick"
  3. Click the entrance point(s) for this location on the routes network
  4. A key icon appears on selected points

Add Surface (Optional)

  1. In Properties, find "Surfaces"
  2. Click "Pick"
  3. Click the polygon that represents this room
  4. When users search for this location, the surface will highlight

Tip

  • Add all entrance access points if a room has multiple entrances
  • The router will automatically choose the closest entrance
  • Move location points by dragging them to adjust location card/icon position on the map

Step 7: Test & Publish (1 minute)

Save Your Work

  1. Click "Save All" Save Map in the toolbar
  2. Wait for the success confirmation
  3. You can also Save Layer Save Layer, this will only save changes made to the selected layer.

Publish

  1. Click the "Publish" Save Map button in toolbar
  2. Publishing makes your changes visible in the public viewer
  3. Click the Viewer Map viewer button to open a new tab to view the map after getting published
  4. Note: Saving ≠ Publishing. You must publish to make changes live.

Get Your Map ID

  1. Select your Map (top of tree)
  2. In Properties, copy the Map ID (e.g., 0a74e042)
  3. You can also copy the mapId in the maps list on your dashboard as well.

Step 8: Embed in Website (Optional)

Add this code to your website, replacing <YOUR_MAP_ID>:

HTML
<div id="mapboot"></div>
<script src="https://cdn.mapboot.com/viewer/latest/mapboot.min.js"></script>
<script>
  window.mapboot.init({
    target: '#mapboot',
    mapid: '<YOUR_MAP_ID>',
    unit: 'm'  // Use 'm' or 'ft' to match your map
  });
</script>

Whitelist Your Domain

  1. In the Editor, select your Map in the tree
  2. In Properties, find "Allowed Domains"
  3. Add your website domain (e.g., example.com,wwww.example.com)
  4. Save and publish again

✅ Success Checklist

You've successfully created a map if:

  • ✅ You can see walls and surfaces
  • ✅ Locations are searchable
  • ✅ Routes generate between any two locations
  • ✅ Routes follow realistic paths through doors
  • ✅ The map is published
  • ✅ You have your Map ID

What's Next?

Now that you understand the basics, explore advanced features:

Troubleshooting

"No route found" - Ensure routing lines connect all entrances on routes layer to the routing network - Check that access points are defined for both locations

"Blueprint is the wrong size" - Adjust the Background Scale value in Layer properties - Use a known measurement to calibrate

"Location doesn't appear in search" - Verify the location has a Name filled in - Ensure the location has at least one Access Point - Publish the map (unpublished changes aren't searchable)

"Map won't embed" - Add your domain to Allowed Domains in Map properties - Verify you're using the correct Map ID - Ensure the map is Published (not just saved)

Need more help? Email contact@mapboot.com or check Troubleshooting.