Adding the Map Leaflet Component to an Angular Application
source link: https://hackernoon.com/adding-the-map-leaflet-component-to-an-angular-application
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
@rodrigokamadaRodrigo Kamada
Software developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.
Introduction
Angular is a development platform for building WEB, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 12, and Google is the main maintainer of the project. Leaflet is an interactive maps component library that supports mobile devices.
Prerequisites
Before you start, you need to install and configure the tools:
Getting Started
Create and Configure the Account on the Mapbox
1. Let's create the account. Access the site https://www.mapbox.com/ and click on the button Sign up.
Mapbox - Home page
2. Fill in the fields Username, Email, Password, First name, Last name, click on the checkbox I agree to the Mapbox Terms of Service and Privacy Policy and click on the button Get started.
Mapbox - Sign up
3. Check the registered email.
Mapbox - Check email
4. Click on the link in the email sent.
Mapbox - Confirm email
5. Copy the token displayed in the Dashboard menu and, in my case, the token was displayed pk.eyJ1IjoiYnJhc2thbSIsImEiOiJja3NqcXBzbWoyZ3ZvMm5ybzA4N2dzaDR6In0.RUAYJFnNgOnnZAw
because this token will be configured in the Angular application.
Mapbox - Dashboard
6. Ready! Account created and token generated.
Create the Angular application
1. Now let’s create the application with the Angular base structure using the @angular/cli
with the route file and the SCSS style format.
ng new angular-leaflet
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE angular-leaflet/README.md (1060 bytes)
CREATE angular-leaflet/.editorconfig (274 bytes)
CREATE angular-leaflet/.gitignore (604 bytes)
CREATE angular-leaflet/angular.json (3261 bytes)
CREATE angular-leaflet/package.json (1077 bytes)
CREATE angular-leaflet/tsconfig.json (783 bytes)
CREATE angular-leaflet/.browserslistrc (703 bytes)
CREATE angular-leaflet/karma.conf.js (1432 bytes)
CREATE angular-leaflet/tsconfig.app.json (287 bytes)
CREATE angular-leaflet/tsconfig.spec.json (333 bytes)
CREATE angular-leaflet/src/favicon.ico (948 bytes)
CREATE angular-leaflet/src/index.html (300 bytes)
CREATE angular-leaflet/src/main.ts (372 bytes)
CREATE angular-leaflet/src/polyfills.ts (2820 bytes)
CREATE angular-leaflet/src/styles.scss (80 bytes)
CREATE angular-leaflet/src/test.ts (788 bytes)
CREATE angular-leaflet/src/assets/.gitkeep (0 bytes)
CREATE angular-leaflet/src/environments/environment.prod.ts (51 bytes)
CREATE angular-leaflet/src/environments/environment.ts (658 bytes)
CREATE angular-leaflet/src/app/app-routing.module.ts (245 bytes)
CREATE angular-leaflet/src/app/app.module.ts (393 bytes)
CREATE angular-leaflet/src/app/app.component.scss (0 bytes)
CREATE angular-leaflet/src/app/app.component.html (24617 bytes)
CREATE angular-leaflet/src/app/app.component.spec.ts (1100 bytes)
CREATE angular-leaflet/src/app/app.component.ts (220 bytes)
✔ Packages installed successfully.
2. Install and configure the Bootstrap CSS framework. Complete steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.
3. Configure the Mapbox token in the src/environments/environment.ts
and src/environments/environment.prod.ts
files as below.
mapbox: {
accessToken: 'pk.eyJ1IjoiYnJhc2thbSIsImEiOiJja3NqcXBzbWoyZ3ZvMm5ybzA4N2dzaDR6In0.RUAYJFnNgOnn80wXkrV9ZA',
},
4. Create the src/assets/images
folder and copy the marker-icon.png
and marker-shadow.png
files.
Marker Icon
Marker Shadow
5. Install the leaflet
and @types/leaflet
libraries.
npm install leaflet @types/leaflet
6. Configure the leaflet
library. Change the angular.json
file and add the leaflet.css
file as below.
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/bootstrap-icons/font/bootstrap-icons.css",
"node_modules/leaflet/dist/leaflet.css",
"src/styles.scss"
],
7. Remove the contents of the AppComponent
class from the src/app/app.component.ts
file. Import the leaflet
service and create the getCurrentPosition
, loadMap
methods as shown below.
import { AfterViewInit, Component } from '@angular/core';
import { Observable, Subscriber } from 'rxjs';
import * as L from 'leaflet';
import { environment } from '../environments/environment';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
map: any;
constructor() {
}
public ngAfterViewInit(): void {
this.loadMap();
}
private getCurrentPosition(): any {
return new Observable((observer: Subscriber<any>) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position: any) => {
observer.next({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
observer.complete();
});
} else {
observer.error();
}
});
}
private loadMap(): void {
this.map = L.map('map').setView([0, 0], 1);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: environment.mapbox.accessToken,
}).addTo(this.map);
this.getCurrentPosition()
.subscribe((position: any) => {
this.map.flyTo([position.latitude, position.longitude], 13);
const icon = L.icon({
iconUrl: 'assets/images/marker-icon.png',
shadowUrl: 'assets/images/marker-shadow.png',
popupAnchor: [13, 0],
});
const marker = L.marker([position.latitude, position.longitude], { icon }).bindPopup('Angular Leaflet');
marker.addTo(this.map);
});
}
}
8. Remove the contents of the src/app/app.component.html
file. Add the map div
tag as shown below.
<div class="container-fluid py-3">
<h1>Angular Leaflet</h1>
<div id="map"></div>
</div>
9. Add the style in the src/app/app.component.scss
file as shown below.
#map {
height: 400px;
width: 100%;
max-width: 600px;
}
10. Run the application with the command below.
npm start
> [email protected] start
> ng serve
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.81 MB
styles.css | styles | 280.54 kB
polyfills.js | polyfills | 128.51 kB
scripts.js | scripts | 76.67 kB
main.js | main | 12.03 kB
runtime.js | runtime | 6.63 kB
| Initial Total | 3.30 MB
Build at: 2021-08-20T10:40:47.188Z - Hash: 030dfe6c9ea7ff5d80c2 - Time: 12256ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
11. Ready! Access the URL http://localhost:4200/
and check if the application is working. Check that the application is working on GitHub Pages and Stackblitz.
Angular Leaflet
The application repository is available at https://github.com/rodrigokamada/angular-leaflet.
This post can also be found on my blog in Portuguese.
Recommend
-
5
Introduction Leaflet supports shapes. By providing a GeoJSON file that contains data for boundaries, you can indicate counties, states, and countries on your map. Note: This is Part 4 of a 4-part se...
-
2
@rodrigokamadaRodrigo KamadaSoftware developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.Intro...
-
7
@rodrigokamadaRodrigo KamadaSoftware developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.Intro...
-
4
@rodrigokamadaRodrigo KamadaSoftware developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.Intro...
-
4
@rodrigokamadaRodrigo KamadaSoftware developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.Intro...
-
6
@rodrigokamadaRodrigo KamadaSoftware developer currently working with Node.js, Java, Angular, Bootstrap, MongoDB, MySQL, Redis, Kafka and Docker.Intro...
-
46
react-native-leaflet A LeafletView component using WebView and Leaflet map for React Native applications Notes: This project is replacement for https://github.c...
-
6
-
2
Using Google map in Leaflet Google Map I know this is too late to answer this question. But I want to share my knowledge in this question. For the static purpose you can freely add the google map til...
-
3
November 23, 2023Visualizing Map Data with Go and Leaflet JS9 min read go-programingIntroduction...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK