A Guide to Create Interactive Maps with Leaflet and TypeScript

Overview

Integration of interactive graphics in web development has become important. This blog post explores the combination of Leaflet, a deep JavaScript library for drawing, and TypeScript, JavaScript’s best typewriter. The goal is to guide developers through creating interactive charts by leveraging the simplicity of Maps and the type-safe nature of TypeScript.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Introduction

In the ever-increasing growth of the web, the integration of interactive visuals has become important. This blog post introduces the integration of Leaflet, a lightweight JavaScript library, and TypeScript, one of JavaScript’s best typescripts. We embarked on a journey to learn how this integration can help developers create consistent, secure mods and visually appealing web applications. The goal is to provide a comprehensive guide from configuration to advanced features and give developers the skills to leverage the potential of Leaflet and TypeScript in map creation.

Setting Up the Project Environment

Setting up your project environment is the first important step in creating an interactive menu using Leaflet and TypeScript. This section guides developers through creating a new TypeScript project or integrating TypeScript into an existing project.

Create a new TypeScript project.

First, create a new directory for your project. Enter your desired location in Terminal and execute the following command:

mkdir leaflet-map-with-typescript
cd leaflet-map-with-typescript

1 2	mkdir leaflet-map-with-typescript cd leaflet-map-with-typescript

Now use npm to start a new TypeScript project:

npm init –y

1	npm init –y

This command creates a package.json file with default values.

Manage dependencies using npm or YARN
Use npm or YARN to manage dependencies. We will use npm here:

npm install leaflet
npm install --save-dev @types/leaflet

1 2	npm install leaflet npm install --save-dev @types/leaflet

This will load Leaflet and its TypeScript type definition. The –save-dev flag adds the dependencies to the devDependencings of the package.json file.

Installation List and TypeScript type definition

Enable global installation of TypeScript:

npm install -g typescript

1	npm install -g typescript

For TypeScript configuration, create a tsconfig.json file in the project root:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"strict": true,

"esModuleInterop": true,

"skipLibCheck": true,

"forceConsistentCasingInFileNames": true,

"outDir": "./dist"

"include": ["src/**/*.ts"],

"exclude": ["node_modules"]

}

This configuration targets ECMAScript 5 enables strict validation and configures the output for TypeScript files.

Create HTML and TypeScript files.
Create an HTML file (index.html) to hold your map and a TypeScript file (main.ts) to execute the logic:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map with TypeScript</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
    <div id="map" style="height: 500px;"></div>
    <script src="main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Leaflet Map with TypeScript</title>

</head>

<body>

</body>

</html>

main.ts:

import * as L from 'leaflet';
// Initialize the map
const map = L.map('map').setView([51.505, -0.09], 13);
 
// Add a tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);
 
// Add a marker
const marker = L.marker([51.5, -0.09]).addTo(map);
marker.bindPopup('Hello, this is a Leaflet map!').openPopup();

import * as L from 'leaflet';

// Initialize the map

const map = L.map('map').setView([51.505, -0.09], 13);

// Add a tile layer

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

attribution: '© OpenStreetMap contributors'

}).addTo(map);

// Add a marker

const marker = L.marker([51.5, -0.09]).addTo(map);

marker.bindPopup('Hello, this is a Leaflet map!').openPopup();

This document uses TypeScript to set up the Brochure map engine. You are now ready to continue creating and improving your interactive map.

Building the Static Map

Now, let’s set the basic static shape of the Leaflet map.

HTML structure

In index.html, set a div with the id “map” as the container for the Brochure map:

<body>
    <div id="map" style="height: 500px;"></div>
    <script src="main.js"></script>
</body>

<body>

</body>

Initialize the map
In your main.ts, use Leaflet to initialize the map box:

import * as L from 'leaflet';
// Initialize the map
const map = L.map('map').setView([51.505, -0.09], 13);

import * as L from 'leaflet';

// Initialize the map

const map = L.map('map').setView([51.505, -0.09], 13);

Add a new tile layer

Add a new OpenStreetMap tile layer to the map function:

// Add a tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

// Add a tile layer

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

attribution: '© OpenStreetMap contributors'

}).addTo(map);

With these simple steps your Static Map map is ready. The following sections will introduce additional interactions and functions to enhance the user experience.

Making it Dynamic

Use TypeScript to bring the brochure map to life:

// MapConfig.ts
export interface MapConfig {
    center: [number, number];
    zoom: number;
}
 
// Map.ts
import { MapConfig } from './MapConfig';
 
export class CustomMap {
    private map: L.Map;
    constructor(elementId: string, config: MapConfig) {
        this.map = L.map(elementId).setView(config.center, config.zoom);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(this.map);
    }
    addMarker(lat: number, lng: number, popupText: string): void {
        const marker = L.marker([lat, lng]).addTo(this.map);
        marker.bindPopup(popupText).openPopup();
    }
}
 
// main.ts
import { CustomMap } from './Map';
import { MapConfig } from './MapConfig';
 
const config: MapConfig = { center: [51.505, -0.09], zoom: 13 };
const customMap = new CustomMap('map', config);
customMap.addMarker(51.5, -0.09, 'Hello, this is a dynamic Leaflet map!');

// MapConfig.ts

export interface MapConfig {

center: [number, number];

zoom: number;

}

// Map.ts

import { MapConfig } from './MapConfig';

export class CustomMap {

private map: L.Map;

constructor(elementId: string, config: MapConfig) {

this.map = L.map(elementId).setView(config.center, config.zoom);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

}).addTo(this.map);

}

addMarker(lat: number, lng: number, popupText: string): void {

const marker = L.marker([lat, lng]).addTo(this.map);

marker.bindPopup(popupText).openPopup();

}

// main.ts

import { CustomMap } from './Map';

import { MapConfig } from './MapConfig';

const config: MapConfig = { center: [51.505, -0.09], zoom: 13 };

const customMap = new CustomMap('map', config);

customMap.addMarker(51.5, -0.09, 'Hello, this is a dynamic Leaflet map!');

With TypeScript interfaces and classes, your Brochure map can have a great user experience. Explore advanced features and best practices.

Conclusion

As a result, the integration of Leaflet and TypeScript seamlessly blends simplicity with power, transforming static graphics into dynamic, interactive content.

Developers can easily create and edit graphics with easy configuration and development code templates. Integration of TypeScript provides a powerful tool by making configuration and interaction transparent.

As the Leaflet design journey continues, there are endless possibilities for exploration and optimization that make the combination of Leaflet and TypeScript perfect for web developers dedicated to solving problems on the map.

Drop a query if you have any questions regarding Leaflet or TypeScript and we will get back to you quickly.

Making IT Networks Enterprise-ready – Cloud Management Services

Accelerated cloud migration
End-to-end view of the cloud environment

Get Started

About CloudThat

CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.

FAQs

1. Why should I use Leaflet with TypeScript?

ANS: – Pages is lightweight has many interactive features in its JavaScript library, while TypeScript provides static typing to make code more readable and maintainable. This combination provides seamless development with clear models and advanced security features.

2. How do you adjust the appearance of the brochure map?

ANS: – There are many options to choose from in the book. You can change the map, add special symbols, or mix different scales. Additionally, TypeScript makes it easy to apply these changes to design libraries.