Marking neighboring municipalities

This is a small util for marking neighboring municipalities.

Dependencies:
jquery, leaflet v101

Data:
https://github.com/yurukov/Bulgaria-geocoding/blob/master/municipalities.geojson

When a municipality is marked as red, you need to click on all blue municialities
which are its neighbors. when that's done, you click on the red municipality itself
to mark that it's done. If it doesn't have any blue municipalities, you need to just
click on it. When all are done, you'll get a printout of the updated geojson in the
console. The script works only with the geojson mentioned above. 

neigh.html

<link type="text/css" href="leaflet.101.css" rel="stylesheet"/>
<style>
body { 
  padding: 0; 
  margin: 0; 
} 
html, body, #map { 
  height: 100vh; 
  width: 100vw;  
  overflow:hidden;
	font-family:"Helvetica Neue",sans-serif!important;
}

#map {
  z-index: 0;
}
</style>
    <div id="map" class="loading-background"></div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="leaflet.101.js"></script>
    <script type="text/javascript" src="neigh.js"></script>

neigh.js

gdata=null;
map=null;
data=[];
focus=0;
initMap();

$.getJSON("municipalities.geojson",function(d) {
  gdata=d;
  L.geoJSON(d,{onEachFeature:function(feature, layer){
    data.push([feature.properties.nuts4,layer,[]]);
    layer.i=data.length-1;
    layer.on("click",function(e) {
      index=e.target.i;
      if (index<focus) {
        //skip
      } else if (index==focus) {
        e.target.setStyle({color:"gray"});
        data[focus][2].sort();
        console.log(data[focus][0]+"\t"+data[focus][2].join(","));
        focus++;
        if (data.length<=focus) {
          dump();
          return;
        }
        data[focus][1].setStyle({color:"red"});
        map.setView(data[focus][1].getCenter(),map.getZoom());
        for (i=focus+1;i<data.length;i++)
          data[i][1].setStyle({color:"rgb(51, 136, 255)"});
      } else {
        if (data[focus][2].indexOf(index)==-1) {
          data[focus][2].push(index);
          data[index][1].setStyle({color:"green"});
        } else {
          data[focus][2]=data[focus][2].filter(function(f) { return f!=index; });
          data[index][1].setStyle({color:"rgb(51, 136, 255)"});
        }
      }      
    });
  }}).addTo(map);

  data[focus][1].setStyle({color:"red"});
});

function back() {
  focus--;
  data[focus][1].setStyle({color:"red"});
  map.setView(data[focus][1].getCenter(),map.getZoom());
}

function dump() {
  d1=data;
  a=[]; 
  for (i=0;i<d1.length;i++)
    a.push([d1[i][0],[]]);
  for (i=0;i<d1.length;i++) {
    for (j=0;j<d1[i][2].length;j++) {
      if (a[i][1].indexOf(d1[d1[i][2][j]][0])==-1)
        a[i][1].push(d1[d1[i][2][j]][0]);
      if (a[d1[i][2][j]][1].indexOf(d1[i][0])==-1)
        a[d1[i][2][j]][1].push(d1[i][0]);
    }
  }
  for (i=0;i<a.length;i++) {
    a[i][1].sort();
    gdata.features[i].properties.neighbors=a[i][1];
  }
  console.log(JSON.stringify(gdata).replace(/{"type":"Fea/g,"\n"+'{"type":"Fea'));
}

function initMap() {
	map = L.map('map', {
    center:[42.8,25.8], 
    zoom:7, 
    minZoom: 2, 
    maxZoom: 13, 
  });
  
  L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {              
	    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>',
      subdomains: 'abcd',
	    maxZoom: 13
    }).addTo(map);
}