Getting Started in Visual Studio Code

Basic Webmapping with Leaflet

Mar 2

Written By lmeisterlin

Included in this tutorial:

Launching Visual Studio Code
Create a new folder for your project
Setting up a basic HTML file

Software version in examples: Visual Studio Code 1.97

Credits: Steven Dela Cruz Duncan & L. Meisterlin (2025)

This tutorial will guide you through setting up Visual Studio Code (VS Code) to begin web mapping with Leaflet. We will cover installing VS Code, creating a new project folder, and setting up your first HTML file.

Installing and Launching Visual Studio Code

Step 1: Download and Install Visual Studio Code

To begin, visit the official Visual Studio Code website and download the version suitable for your operating system (Windows, macOS, or Linux). Once the download is complete, run the installer and follow the setup instructions.

Step 2: Open Visual Studio Code

After installing Visual Studio Code, open the application. You should see the Welcome screen, which provides options to create or open a project.

Creating a New Project Folder

Step 3: Create and Open a Folder

To create a new project folder, go to File > Open Folder... in Visual Studio Code. Navigate to your preferred directory, create a new folder (e.g., LeafletMapProject), and open it within VS Code.

Creating a New HTML File

Step 4: Create a New HTML File

Inside the newly created project folder, click on the New File button in VS Code’s Explorer Panel. Name the file index.html and press Enter to create it.

Step 5: Add Basic HTML Structure

With the index.html file open, copy the following code:

<!DOCTYPE html> <!-- Declares HTML5 -->
<html lang="en"> <!-- Sets page language -->
<head>
    <meta charset="utf-8"> <!-- Defines character encoding -->
    <title>My First Leaflet Map</title> <!-- Page title -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->

    <style> 
        /* CSS styles go here */
    </style>
    
    <h1> This is my first webpage. </h1>

    <script> 
        // JavaScript code goes here
    </script>

</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

Step 6: Open the File in a Browser

Save the index.html file to ensure all changes are stored. To view it in a browser, right-click anywhere inside the file and select Open with Live Server (if the Live Server extension is installed). If Live Server is not installed, manually open the file in a web browser by navigating to your project folder and double-clicking index.html. Your browser should look like this.

WebmappingLeafletVisual Studio CodeMapping Data

lmeisterlin