0

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:

<select name="POI" id="POI">
                    <option>Click here to expand</option>
                    <option value ="a"  id ="Kasba Vishrambaug Wada, Ghole Road & Nagar Road">Financial Services</option>
                    <option value ="b"  id ="Bibwewadi, Tilak Road & Yerwada-Sangamwadi ">Automobile Services</option>                  
                    <option value ="c"  id ="Dhankawadi, Ghole Road & Kasba Vishrambaug Wada ">Nightlife/Bar/Pub</option>
                    <option value ="d"  id ="Dhankawadi, Yewalewadi & Kasba Vishrambaug Wada ">Religious Place</option>
                    <option value ="e"  id ="Ghole Road, Yerwada-Sangamwadi & Sahakarnagar ">Residential Area/Buildings</option>
                    <option value ="f"  id ="Dhankawadi, Yewalewadi & Nagar Road ">Schools</option>
                    <option value ="g"  id ="Kasba Vishrambaug Wada, Ghole Road & Nagar Road ">Sports Complex/Goods Store</option>
                    <option value ="h"  id ="Nagar Road, Dhole Patil Road & Ghole Road ">Restaurants/Cafes</option>
                    <option value ="i"  id ="Ghole Road, Nagar Road & Hadapsar ">Training Centre/Institute</option>
                    <option value ="j"  id ="Hadapsar, Yerwada-Sangamwadi & Tilak Road ">Hospital</option>
                    <option value ="k"  id ="Ghole Road, Hadapsar & Nagar Road ">Medical Services</option>                                                              
                    <option value ="l"  id ="Aundh, Ghole Road & Hadapsar ">Shopping Centers</option>
                    <option value ="m"  id ="Dhole Patil Road, Ghole Road & Nagar Road">Business Facility</option>
                    <option value ="n"  id ="Ghole Road, Sahakarnagar & Warje-Karvenagar">Convienience/Retail Stores</option>
                    <option value ="o"  id ="Aundh, Ghole Road & Yerwada-Sangamwadi">Electronics Store</option>
                    <option value ="p"  id ="Dhankawadi, Tilak Road & Warje-Karvenagar ">Home Specialty Store</option>
                    <option value ="q"  id ="Bhavani Peth, Nagar Road & Dhole Patil Road ">Office Supply/Services </option>
                </select>
                <script>
                    function GetSelectedValue()
                    {
                        var e = document.getElementById("POI");

                        var ward = e.options[e.selectedIndex].value;
                        var test = e.options[e.selectedIndex].id + " are the most suitable wards for marketing/advertising the selected category.";
                        document.getElementById("result").innerHTML = test;
        

<!-- Data for loading shapefile on click event -->
                                var aundh = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:aundh',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                
                                
                                var bhavani_peth = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:bhavani peth',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                
                                var bibwewadi = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:bibwewadi',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var dhankawadi = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:dhankawadi',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var dhole_patil_road = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:dhole patil road',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var ghole_road = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:ghole road',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var hadapsar = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:hadapsar',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var kasba_vishrambaug_wada = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:kasba vishrambaug wada',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var kothrud_karveroad = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:kothrud karveroad',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var nagar_road = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:nagar road',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var sahakarnagar = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:sahakarnagar',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var tilak_road = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:tilak road',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var warje_karvenagar = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:warje karvenagar',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var yerwada_sangamwadi = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:yerwada - sangamwadi',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                                var yewalewavdi = L.tileLayer.betterWms('http://localhost:8081/geoserver/pmc/wms',{
                                layers: 'pmc:yewalewavdi',
                                format: 'image/png',
                                transparent: true,
                                opacity: 0.5,
                                });
                    <!-- if condition for shapefile -->
                                if (ward=="a")       {aa = ghole_road,          bb  = kasba_vishrambaug_wada,   cc = bhavani_peth;}
                                else if (ward =="b") {aa = bibwewadi,           bb = tilak_road,                cc = yerwada_sangamwadi;}
                                else if (ward =="c") {aa = dhankawadi,          bb = ghole_road,                cc = kasba_vishrambaug_wada;}
                                else if (ward =="d") {aa = dhankawadi,          bb = yewalewavdi,               cc = kasba_vishrambaug_wada;}
                                else if (ward =="e") {aa = ghole_road,          bb = yerwada_sangamwadi,        cc = sahakarnagar;}
                                else if (ward =="f") {aa = dhankawadi,          bb = yewalewavdi,               cc = nagar_road;}
                                else if (ward =="g") {aa = ghole_road,          bb  = kasba_vishrambaug_wada,   cc = nagar_road;}
                                else if (ward =="h") {aa = nagar_road,          bb  = ghole_road,               cc = dhole_patil_road;}
                                else if (ward =="i") {aa = ghole_road,          bb = nagar_road,                cc = hadapsar;}
                                else if (ward =="j") {aa = hadapsar,            bb = yerwada_sangamwadi,        cc = tilak_road;}
                                else if (ward =="k") {aa = ghole_road,          bb  = hadapsar,                 cc = nagar_road;}
                                else if (ward =="l") {aa = aundh,               bb  = ghole_road,               cc = hadapsar;}
                                else if (ward =="m") {aa = dhole_patil_road,    bb  = ghole_road,               cc = nagar_road;}
                                else if (ward =="n") {aa = ghole_road,          bb = sahakarnagar,              cc = warje_karvenagar;}
                                else if (ward =="o") {aa = aundh,               bb  = ghole_road,               cc = yerwada_sangamwadi;}
                                else if (ward =="p") {aa = dhankawadi,          bb = tilak_road,                cc = warje_karvenagar;}
                                else                 {aa = bhavani_peth,        bb = nagar_road,                cc = dhole_patil_road;} 
                                    
                                    
                                    aa.addTo(map);
                                    bb.addTo(map);
                                    cc.addTo(map);
                

                    
</script>
<br><br>
<button id="btn1" type="button" onclick="GetSelectedValue()" >Click here for result</button><br>
<p id="result">Check this space for the result of the most suitable ward for Marketing of the selected category.</p>
</div>
  • Welcome to Geographic Information Systems! Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Your questions should as much as possible describe not just what you want to do, but precisely what you have tried and where you are stuck trying that. Please check out our short tour for more about how the site works. – Ian Turton Jun 16 at 10:40
  • You are dealing with WMS layers not shapefiles - this might be preventing your searches finding solutions – Ian Turton Jun 16 at 10:41
  • You have only three layers defined/created in your code, yet your are using nine. Why only this three, where are other six layers? – TomazicM Jun 16 at 10:58
  • @TomazicM I have updated the code. there are a total of 15 layers which on each option click should display 3 layers. I tried removeLayer() but it did not work – Akshinde Jun 16 at 13:20
0

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);
  }      
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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