Set Up Your Environment
This guide assumes you have a basic understanding of HTML, CSS, and JavaScript. If you're new to web development, we recommend using an Integrated Development Environment (IDE) like Visual Studio Code to help manage your files and code.
Let's start by creating the necessary file structure:
Create a new project folder: Choose any location on your computer. Let's call this folder
mapsindoors-tutorial
. Ensure the folder is empty.Create three empty files inside your
mapsindoors-tutorial
folder:index.html
: This file will be your application's entry point and contain the main HTML structure.style.css:
This file will contain the CSS styles for the HTML document.script.js
: This file will contain the JavaScript code for initializing and controlling the MapsIndoors map.
Now, open the index.html
file in your code editor and add the following basic HTML structure. This includes the necessary boilerplate and links to the MapsIndoors Web SDK, your custom CSS, and your custom JavaScript file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MapsIndoors</title>
<!-- Include the style.css -->
<link rel="stylesheet" href="style.css">
<!-- Include the MapsIndoors SDK -->
<script src="https://app.mapsindoors.com/mapsindoors/js/sdk/4.41.0/mapsindoors-4.41.0.js.gz"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Next, open the style.css
file and add the following styles. These styles ensure the map container can fill the page correctly.
/* style.css */
/* Ensure html and body take up full height and use flexbox */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrollbars if map is full size */
display: flex; /* Use flexbox for layout */
flex-direction: column; /* Stack children vertically */
}
Explanation:
We've set up a standard HTML5 document (
index.html
).The
<meta>
tags ensure proper character display and responsiveness.The
<title>
tag sets the title for the browser tab.The
<link rel="stylesheet" href="style.css">
tag in the<head>
loads your external CSS file, allowing you to style your HTML elements.The first
<script>
tag in the<head>
loads the MapsIndoors Web SDK library.The
<script src="script.js"></script>
tag at the end of the<body>
links to your custom JavaScript file. Placing it here ensures it runs after the HTML body has been parsed and the MapsIndoors SDK is available.The
style.css
file currently contains basic styles for thehtml
andbody
elements. We've addeddisplay: flex
andflex-direction: column
to prepare the page for a flexible layout where elements can fill the available space, which will be useful when adding the map and other UI components later.height: 100%
,margin: 0
,padding: 0
, andoverflow: hidden
are included to ensure the page takes up the full viewport and prevents unwanted scrollbars.
Note: In this documentation, we indicate which file a code snippet belongs to by showing the filename on the first line in the code samples.
You have now created the basic project structure and included the MapsIndoors SDK and your custom CSS file.
Last updated
Was this helpful?