> For the complete documentation index, see [llms.txt](https://docs.mapsindoors.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mapsindoors.com/sdks-and-frameworks/web/tutorial/set-up-your-environment.md).
# 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](https://code.visualstudio.com/) to help manage your files and code.
Let's start by creating the necessary file structure:
1. **Create a new project folder:** Choose any location on your computer. Let's call this folder `mapsindoors-tutorial`. Ensure the folder is empty.
2. **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:
{% code lineNumbers="true" %}
```html
MapsIndoors
```
{% endcode %}
Next, open the `style.css` file and add the following styles. These styles ensure the map container can fill the page correctly.
{% code lineNumbers="true" %}
```css
/* 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 */
}
```
{% endcode %}
**Explanation:**
* We've set up a standard HTML5 document (`index.html`).
* The `` tags ensure proper character display and responsiveness.
* The `` 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 the `html` and `body` elements. We've added `display: flex` and `flex-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`, and `overflow: 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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.mapsindoors.com/sdks-and-frameworks/web/tutorial/set-up-your-environment.md?ask=<question>&goal=<endgoal>
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.