Removing previous layer when new layer is select from drop-down menu?

Question

I have a drop-down with some options in it, after selecting one option and button clicking I get the text and my shapefile from the GeoServer which is added to the map. So when I click on the first option I get the text on the screen and shapefile on the map, and as I select the 2nd option the text is updated (which is fine) and the shapefile for that option is upadated with previous shapefile i.e. of the first option. How do I remove the previous option's shapefile when the 2nd option is clicked? Below is how my code looks:

Check this space for the result of the most suitable ward for Marketing of the selected category.

TomazicM · Answer

After long programming practice abstraction becomes your second nature (see oldtimers bible from E.J.Dijkstra: Data Structures + Alghorithms = Programs). First you separate data from alghorithms and then segment repeating tasks into loops and procedures/functions.

For illustration I'll take only your first three options. First you abstract layer names by creating an array of names:

var layerName = [
  'ghole road',
  'kasba vishrambaug wada',
  'bhavani peth',
  'bibwewadi',
  'tilak road',
  'yerwada - sangamwadi',
  'dhankawadi',
  'kasba vishrambaug wada'
];

Then you abstract options into array of objects that describe your options with their properties. Layers are enumerated by their corresponding index from layerName array:

var data = [
  {
    description: 'Kasba Vishrambaug Wada, Ghole Road & Nagar Road',
    services: 'Financial Services',
    layers: [0, 1, 2]
  },
  {
    description: 'Bibwewadi, Tilak Road & Yerwada-Sangamwadi',
    services: 'Automobile Services',
    layers: [3, 4, 5]
  },
  {
    description: 'Dhankawadi, Ghole Road & Kasba Vishrambaug Wada',
    services: 'Nightlife/Bar/Pub',
    layers: [6, 0, 7]
  }
];

Code for select HTML element can then be only:

<select name="POI" id="POI">
  <option>Click here to expand</option>
</select>

Options are then be added in JS loop:

var selectElement = document.getElementById('POI');
var optionElement;
for (var i = 0; i < data.length; i++) {
  optionElement = document.createElement('option');
  optionElement.innerHTML = data[i].services;
  selectElement.appendChild(optionElement);
}

In function for adding/removing layer you then follow simple logic when option is selected to be displayed:

if any previous layers were displayed, they are removed them from the map
if newly requested layers do not exist yet, they are first created, otherwise only added to the map.

Code could then look something like this:

var layer = [];
for (var i = 0; i < data.length; i++) {
  layer[i] = null;
}

var selectedLayers = null;

function GetSelectedValue() {
  var i = selectElement.selectedIndex - 1;
  var test = data[i].services + " are the most suitable wards for marketing/advertising the selected category.";
  document.getElementById("result").innerHTML = test;
  if (selectedLayers != null) {
    for (var j = 0; j < selectedLayers.length; j++) {
      layer[selectedLayers[j]].remove();
    }
  }
  selectedLayers = data[i].layers;
  for (var j = 0; j < selectedLayers.length; j++) {
    var layerInd = selectedLayers[j];
    if (layer[layerInd] == null) {
      layer[layerInd] = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
        layers: 'pmc:' + layerName[layerInd],
        format: 'image/png',
        transparent: true,
        opacity: 0.5,
      });      
    }
    layer[layerInd].addTo(map);
  }      
}

Removing previous layer when new layer is select from drop-down menu?

One Answer

Add your own answers!

Ask a Question