1

I am a beginner in webmapping development using LeafletJS and JS. I am the owner of the website built under LeafletJS.

I have faced some problems with charts overlapping. On the right top of the map there is an object info that actives on Click. However I am unable to click on the large scale charts covered by the small scale charts. To solve that, I created an object select with the following options that are the charts USAGES: Berthing scale range (1-2499) Harbour scale range (2500-4999) Approach scale range (5000-34999) Coastal scale range (35000-99999) General scale range (100000-499999) Overview scale range (500000-10000000)

I have a JSON file that contains the chart's scales as showed bellow:

{"type":"FeatureCollection","features":[ {"type":"Feature","properties":{"Numero":"802","Titulo":"Porto de Natal","Escala":8500,"zIndex":999,"Ano":2000,"Ediciao":8,"Datum":"WGS-84" {"type":"Feature","properties":{"Numero":"1","Titulo":"Brasil - Costa e Ilhas ao Largo","Escala":5600000,"zIndex":979,"Ano":2004,"Ediciao":5,"Datum":"WGS-84",

So, "ESCALA" stores the scale value and I am in need to relate or associate each USAGE (Berthing, Harbour, Approach, Coastal, General and Overview) with the scale value in the JSON in order to remove overlaping charts. For instance, when I select the Approach option in the select object, all the other charts (bouding box polygons) that have scale value out of the Approach scale range would be removed from the map, and so on. This way I would be able to select all charts bouding boxes.

My object select code (top left of the page) is found below:

selector.onAdd = function (map) { 
   var div = L.DomUtil.create('div', 'select'); 
   div.innerHTML = '<select id="sta_select"><option>(no selection)</option><option>Overview</option><option>General</option><option>Coastal</option><option>Approach</option><option>Harbour</option><option>Berthing</option></select>'; 
   Usagevals={1:"Overview",2:"General",3:"Coastal",4:"Approach",5:"Harbour",6:"Berthing"}; 

  return div; 
}; 
selector.addTo(map); 

I wonder if anyone could help me solving the chart's overlapping issue.

  • Could you provide a jsFiddle? That makes it a bit easier for us to debug the code. Thanks! – Sidney Gijzen Dec 24 '15 at 10:38

Your Answer

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

Browse other questions tagged or ask your own question.