Create a New Project

Last updated: 6/14/2023

You begin by creating an initial application. Throughout this tutorial, you will modify and extend that starter application to create a simple application which covers the basic features of this guide.

Set Up Your Environment

While not strictly neccesary, if you do not have prior development experience, it is advised to install an Integrated Development Environment (IDE). A common one to use is Visual Studio Code, which is free.
Start by creating a new project folder. The location is not important, just remember the location, and ensure your newly created project folder is empty.
Inside that, create two empty files: index.html and main.js.

The file index.html is the entry point for our application and contains the HTML code. The file main.js will be read by index.html and consists of the JavaScript code for the actual application to run. To run the demo you will be creating in this tutorial, open index.html in your web browser.
Open index.html. Create a basic HTML structure and include the main.js file, as follows:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapsIndoors</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Both here, and in future code examples, you will always be able to see which of two files the code should go in, by looking at the first line, where the name of the file is written.

Next up: Show a map