working tags

index.htm

@@ -37,8 +37,7 @@ function myDropmenu() {
   document.getElementById("myDropdown").classList.toggle("show");
 }
 
-//map layers
+var layers_by_field = {};
-//var artobj = L.layerGroup();
 
 // Leaflet
 var map = L.map('map', {
@@ -46,9 +45,11 @@ var map = L.map('map', {
 	crs: L.CRS.Simple, //changes coordinate reference system to a x,y one instead of map cartesian coordinates
 	minZoom: -1,
 	maxZoom: -2,
-	//layers: [art, technology] //adds layers for my map
+  layers: [] //adds layers for my map
+
 });
 
+
 var yx = L.latLng;
 var xy = function(x, y) {
 	if (L.Util.isArray(x)) { // When doing xy([x, y]);
@@ -122,11 +123,6 @@ for (var i = 15; i <= 25; i++) {
     lon3Array.push(i * 50);
 }
 
-
-//create a variable for every field.
-//var variable_field = L.layerGroup();
-
-
 //The function to wrap the result. It waits for API call to be completed.
 var callback = function (response) {
 	var pages = response.query.results;
@@ -136,14 +132,12 @@ var callback = function (response) {
 		var category = pages[key].printouts.Category[0].fulltext;
     var category1 = pages[key].printouts.Category[1].fulltext;
 		var connection = pages[key].printouts.Connection[0];
-		var field = pages[key].printouts.Field;
+		var fields = pages[key].printouts.Field;
 		console.log(pagename);
 
 
 		if (category == "Category:Archiving"){
 
-      var obj = L.layerGroup();
-
 			var lan = lanArray[Math.floor(Math.random() * lanArray.length)]; //chooses random number from the array, x coordinate
 			lanArray.splice(lanArray.indexOf(lan), 1); //removes the chosen number from the array to avoid repetitions
 
@@ -156,12 +150,25 @@ var callback = function (response) {
 
 			var myIcon = L.divIcon({ iconSize: new L.Point(200, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });//divIcon is the name, label.
 
-			L.marker(archivingcoordinates, {icon: myIcon}).addTo(map).addTo(obj);
+			var marker = L.marker(archivingcoordinates, {icon: myIcon})//.addTo(map);
+
 
+      for(var i = 0; i < fields.length; i++) {
+    //for each page, each "field"...
+     //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
+// Add the marker to the layer for each field
+    var field = fields[i];
 
-      for(var i = 0; i < field.length; i++){ //for each page, each "field"...
+    if ( layers_by_field[ field ] == undefined ) {
-				overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
+      layers_by_field[field] = L.layerGroup();
     }
+        // assume it exists...
+        marker.addTo(layers_by_field[ field ]);
+      }
+
+      //for(var i = 0; i < field.length; i++){ //for each page, each "field"...
+				//overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
+			//}
 
 			dict[pagename] = [lan, lon];//adding to the dictionary the page name and its coordinates
 
@@ -228,7 +235,7 @@ var callback = function (response) {
 	  console.log('calling');
 	  const result = await resolveAfter1Second();
 
-		var layer = L.control.layers(null, overlays).addTo(map); //null is for no baselayer
+		var layer = L.control.layers(null, layers_by_field).addTo(map); //null is for no baselayer
 
     // placing layers controls on the dropdown menu
     var htmlObject = layer.getContainer(); // Returns the HTMLElement that contains the control.
@@ -238,14 +245,18 @@ var callback = function (response) {
       newParent.appendChild(el);
       }
 
+
     setParent(htmlObject, a);
 
+
+
 	  console.log(result); // expected output: 'resolved'
 	}
 
 	asyncCall();
 
 
+
 //connecting with dash lines the pages with connections
 	var groups = [];
 

style.css

@@ -435,7 +435,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 
 input[type="checkbox"]:not(:checked),
 input[type="checkbox"]:checked {
-  display: none;
+  /*display: none;*/
 }
 
 input[type="checkbox"]:not(:checked) {