CODEWITHSUNDEEP
angularleafletopenstreetmapreact-leafletangular-leaflet-directive
Haritha
Haritha

Reputation: 87

How to create the multiple leaflet maps on the page in angular

I have created the leaflet open street map given below.

.component.ts

 map = L.map('map').setView([12.876, 80.599], 12);  

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

I have Placed the map in html page as given below

.component.html

<div class ="row">
<div class="col-xs-12 col-sm-8 col-lg-7">
    <div id="map"></div>
  </div>
</div>

And mentioned the height in css as

.component.css

#map{
  height: 650px;
  border: 1px solid gray;
   position: relative;
  border: none;
}

Now I want to create the two maps in the page, I have tried but not able to create the maps because I have used the id of name map.

So how to change the id value(map) to class than I will use that class to create the more maps within the page

Upvotes: 1

Views: 1084

Answers (2)

user2502767
user2502767

Reputation: 328

In order for you to render multiple maps, you need to ensure the DIV containing the map has a unique ID.

For example. Lets assume you create a component called leafmap. (ng g c leafmap)

The DIV in your leafmap.component.html would look like this:

<div class="map" [attr.id]="mapID"></div>

In your leafmap.component.scss you would have something like this:

.map {
  height: 500px;
}

In your leafmap.component.ts you would have something like this:

import {Component, Input} from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-leafmap',
  templateUrl: './leafmap.component.html',
  styleUrls: ['./leafmap.component.scss']
})
export class LeafmapComponent {
  map: L.Map | undefined;

  //Get the lng/lat values from the component instance
  //<app-leafmap [longitude]="longitude" [latitude]="latitude"></app-leafmap>
  @Input() longitude: number = -98.5795; //I defaulted the map to the center of the US.
  @Input() latitude: number = 39.8282;

  //Initialize the map ID
  mapID: string = 'map'; //I defaulted to 'map' but this will be overwritten in ngOnInit()

  //Initialize the map
  initMap(): void {
    //Create and center the map. Set the zoom level
    this.map = L.map(this.mapID, {
      center: [ this.latitude, this.longitude ],
      zoom: 13
    });

    //Add a marker to the map
    L.marker([this.latitude,this.longitude]).addTo(this.map);

    //Add map tiles
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 8,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    tiles.addTo(this.map);
  }

  constructor() { }

  ngOnInit(){
    //Get a unique mapID for the DIV where the map will be rendered
    this.mapID = this.uidv4();
  }

  //Get a UUID for the mapID
  uidv4(): string {
    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
      (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
    );
  }

  //The div needs to exist before the map can be created.
  ngAfterViewInit(): void {
    //Render the map
    this.initMap();
  }
}

And in your parent component you would have something like this:

<app-leafmap [longitude]="data.longitude" [latitude]="data.latitude"></app-leafmap>

Now you have a with an unique ID and you are assigning a map to it. You can iterate over the element and generate multiple maps dynamically.

Upvotes: 0

zahma
zahma

Reputation: 422

I would probably use the same L.map instance, and make the necessary change on it. Another way can be to create another DOM with a different ID and use [hide] to show the first or the second map.

Upvotes: 1

Related Questions