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.

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.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

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 a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 650k+ professionals in 500+ cloud certifications and completed 300+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner, Microsoft Gold Partner, AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, and many more.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.

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.