Open Street Map — Add Multiple Open Street Map in Primeng Carousel in Angular Project

This blog will explain you how we can add multiple Open street map in one page OR inside the carousel in angular project.

## Creation of the Angular project

We have used below technologies to implement this features

• NodeJS and NPM
• Angular CLI: The Angular CLI makes it easy to create an application that already works, right out of the box.
• Angular 8: Angular is a TypeScript-based open-source web application framework.
• Leaflet: An Open-source JavaScript library for mobile-friendly interactive maps.

## Package.json — Add below dependency in package.json file

• “@asymmetrik/ngx-leaflet”: “⁷.0.1”,
• “leaflet”: “¹.6.0”

## style.scss — Add dependency in global scss/css file

• @import url(“../../../node_modules/leaflet/dist/leaflet.css”);

## map-template.component.html — Add below placeholder in html file

## map-template.component.ts — Add below code in respective typescript file

Note: Add ‘LeafletModule’ dependency in application module. So we can access there related functions.

• Import below dependency in import section

• Create ‘MapLocationDetail’ and ‘leafletMapOptions’ class for type declaration.
• Add ‘leafletMapOptions’ key inside ‘Location’ class to set multiple maps respective to location array.

• Declare required variable instances

• Create leafLetLayerInitilizer method with lat,lng parameter to set in Open street map options.

• Create ‘getMapLocationDetail’ method to get data and call ‘leafLetLayerInitilizer’ method with location latitude , longitude. This will add leaflet maps in each data.

• Call ‘getMapLocationDetail’ method on ngOnInit().

• Add ‘onMapReady(map, data)’ method. This method we have added in html template. Added map.invalidateSize() to resolve map invalid size issue.