5

I am able to select a decal and display the GeoJSON on the map. Once I select another decal from the select dropdown it shows the new GeoJSON shape but doesn't remove the old ones. I've tried multiple ways to solve this including removeLayer().

import { Component, OnInit } from '@angular/core';
import * as Leaflet from 'leaflet'; 

@Component({
  selector: 'app-map', 
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit{
  constructor() {}

  serviceData="";
  private map!: Leaflet.Map;
  private centroid: Leaflet.LatLngExpression = [29.64833, -82.34944];

  private initMap(): void {
    
    // Making a map and tiles
    this.map = Leaflet.map('map').setView(this.centroid, 16);
    const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';

    const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    const OSM = Leaflet.tileLayer(tileUrl, {attribution});
    this.map.addLayer(OSM);
    // tiles.addTo(this.map);
    
    // Making a marker with an icon
    var myIcon = Leaflet.icon({
      iconUrl: 'marker-icon.png',
      iconSize: [25, 32],
      iconAnchor: [25, 32],
    });
    const marker = Leaflet.marker([0,0], {icon: myIcon}).addTo(this.map);
    marker.setLatLng(this.centroid);
  }

  getParkingLots($event: any) {
    this.serviceData = $event
    const url = 'http://localhost:8080/api/filter/decal/' + this.serviceData;

    fetch(url, {
      method: 'GET'
    })
    .then(response => response.json())
    .then(json => {
      var geojson = Leaflet.geoJSON(json, {
        style: function(feature) {
          switch (feature?.properties.Lot_Class)
          {
            case 'Brownthis': return {color: 'brown', fillColor: 'brown', fillOpacity: 0.2};
            case 'Orange': return {color: 'orange', fillColor: 'orange', fillOpacity: 0.2};
            case 'Red': return {color: 'red', fillColor: 'red', fillOpacity: 0.2}
            case 'Red One': return {color: 'red', fillColor: 'red', fillOpacity: 0.2}
            case 'Blue': return {color: 'blue', fillColor: 'blue', fillOpacity: 0.2}
            case 'Green': return {color: 'green', fillColor: 'green', fillOpacity: 0.2}
          }
          return {
            color: 'black',
            fillColor: 'black',
            fillOpacity: 0.2
          };
        },
        onEachFeature: function(feature, layer) {
          layer.bindPopup(feature.properties.Lot_Name)
        }
      })
      .addTo(this.map);
      this.map.fitBounds(geojson.getBounds());
    })
    .catch(error => {
      console.error(error)
    });
  }
  
  ngOnInit(): void {  
    this.initMap();
  }
  
}

1 Answer 1

8

One way of solving this problem would be to declare geojson variable global outside getParkingLots function. Then layer has to be created only the first time, and from then on it just has to be cleared and data added.

Relevant part of the code could then look something like this (since I'm not familiar with Angular, it's plain JS and I hope it's valid also for Angular):

var geojson = null;

getParkingLots($event: any) {
  this.serviceData = $event
  const url = 'http://localhost:8080/api/filter/decal/' + this.serviceData;

  fetch(url, {
    method: 'GET'
  })
  .then(response => response.json())
  .then(json => {
    if (geojson) {
      geojson.clearLayers();
      geojson.addData(json);
      }
    else {
      geojson = Leaflet.geoJSON(json, {
        style: function(feature) {
        .
        .
        .
1
  • oh my goodness! thank you so much! I've been reworking my code over and over with leaflet. Your edited code work.
    – Nat
    Commented Mar 27, 2023 at 21:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.