Tips for integrating leaflet maps according to the number of elements in your dataset

Question

Tips for integrating leaflet maps according to the number of elements in your dataset

I'm looking to incorporate leaflet maps onto my page, under the following conditions:

If there is only one map, it should span the entire width using bootstrap grid columns. If there are two maps, they should be placed side by side with equal column widths (e.g., col-6). For three maps, two should be on the first row and one on the second row spanning the full width. And for five maps, they should be arranged in two rows with two maps in each row and one map in the third row, all stretching the entire width. (note: the number of elements varies dynamically from the backend)

.component.ts

  
      for (var j = 0; j < this.sensorsarray.length; j++){

    var v = "map" + i + "";
    var div = document.createElement("div");
    div.id = v;
      div.style = "height:380px;";
                  console.log(v);
                
                  document.getElementById('mapper').appendChild(div);


// some code 
}

.component.html

<div class="row no-gutters">
      
     <div class="col-6" [ngClass]="{ 'col-12' : array.length %2 ==1 }">
        <div id="mapper" style="height: 385px;border: 1px solid gray;"></div>  
   
        </div>
       
        
  </div>

Can someone assist me with the above requirements?

angular typescript bootstrap-4 grid ng-class

Answer 1

Answer №1

Here is the code snippet to tackle your problem:

In your .ts file, you have defined an array like this:

array = [1,2,3,4,5,6,7]

In your HTML file:

<div class="row no-gutters">
    <div *ngFor="let item of array; let i=index;" 
        [ngClass]="i===(array.length-1) && (array.length % 2!==0) ? 'col-12' : 'col-6'">
        <div id="mapper" style="height: 385px;border: 1px solid gray;"></div>
    </div>
</div>

Based on your updated query, I believe this could be the solution:

for (var i = 0; i < this.sensorsarray.length; i++) {
      var v = "map" + i + "";
      var div = document.createElement("div");
      div.id = v;
      document.getElementById("mapper").appendChild(div);
      var map = document.getElementById("map" + i);
      map.style.height = "380px;";
      if (
        i === this.sensorsarray.length - 1 &&
        this.sensorsarray.length % 2 !== 0
      ) {
        map.classList.add("col-12");
      } else {
        map.classList.add("col-6");
      }
      // some code
    }

<div class="row no-gutters">
    <div class="w-100">
        <div id="mapper" style="height: 385px;border: 1px solid gray;" class="row"></div>
    </div>
</div>

Answer 2

Here is the code snippet to tackle your problem:

In your .ts file, you have defined an array like this:

array = [1,2,3,4,5,6,7]

In your HTML file:

<div class="row no-gutters">
    <div *ngFor="let item of array; let i=index;" 
        [ngClass]="i===(array.length-1) && (array.length % 2!==0) ? 'col-12' : 'col-6'">
        <div id="mapper" style="height: 385px;border: 1px solid gray;"></div>
    </div>
</div>

Based on your updated query, I believe this could be the solution:

for (var i = 0; i < this.sensorsarray.length; i++) {
      var v = "map" + i + "";
      var div = document.createElement("div");
      div.id = v;
      document.getElementById("mapper").appendChild(div);
      var map = document.getElementById("map" + i);
      map.style.height = "380px;";
      if (
        i === this.sensorsarray.length - 1 &&
        this.sensorsarray.length % 2 !== 0
      ) {
        map.classList.add("col-12");
      } else {
        map.classList.add("col-6");
      }
      // some code
    }

<div class="row no-gutters">
    <div class="w-100">
        <div id="mapper" style="height: 385px;border: 1px solid gray;" class="row"></div>
    </div>
</div>

Tips for integrating leaflet maps according to the number of elements in your dataset

Answer №1

Similar questions

Creating a Typescript React functional component that accepts multiple props of various types

No slides will be displayed in Ionic 2 once the workout is completed

Mastering Angular2: Leveraging TypeScript's Power to Unleash JavaScript ES6 Syntax with

show additional worth on the console

What is the reason behind Angular triggering @HostListener as soon as the element begins to appear in the DOM?

Using string interpolation within the innerHTML property in Angular 2

Angular 8 carousel featuring a dynamic bootstrap 4 design with multiple images and cards displayed on a single slide

Angular version 10 does not allow for intentionally causing errors using the HttpClient delete() method

What is the reason behind having to coerce the enum value before the object type can be properly recognized?

Tips for displaying an array and iterating through its children in Angular 7

When Angular renders for the first time, the route query parameters are found to be empty

Angular directive for converting fields to title case

Attempting to grasp the concept of Typescript generics

Initiate the input change event manually

Tips for transferring observable to parent component in angular 2?

Require assistance with accurately inputting a function parameter

Utilizing a library that solely enhances the functionality of the Array object

Error TS2307: Module 'passport' is nowhere to be found

Choosing a particular checkbox with changing identifiers in Cypress: A guide

Why is Vite's hot reloading feature displaying unpredictable outcomes?