added Annotations to tags

index.htm

@@ -22,11 +22,12 @@
 
   <div id="myDropdown" class="dropdown-content">
     <h2>Field</h2>
-    <div id="leaflet_layers"><!--Here the layer control menu will be added--></div>
+    <div id="field_layers"><!--Here the layer control menu will be added--></div>
+    <h2>Annotations</h2>
+    <div id="annotation_layers"><!--Here the layer control menu will be added--></div>
   </div>
 </div>
 
-
 <div id='map'></div>
 
 
@@ -37,7 +38,6 @@ function myDropmenu() {
   document.getElementById("myDropdown").classList.toggle("show");
 }
 
-var layers_by_field = {};
 
 // Leaflet
 var map = L.map('map', {
@@ -69,18 +69,25 @@ var apiEndpoint = "https://hub.xpub.nl/networksofcare/mediawiki/api.php";
 var params ="action=ask&format=json&query=[[Category%3ADiagram]] |%3FCategory |%3FConnection |%3FField";
 
 //Main categories with static location:
-var myIcon2 = L.divIcon({ className: 'leaflet-div-icon4', iconSize: new L.Point(150, 30), html: 'Networking' });
+var archivingIcon = L.divIcon({ className: 'leaflet-div-icon5', iconSize: new L.Point(60, 40), html: 'Archiving' });
-var myIcon3 = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(60, 40), html: 'Linking' });
+var networkingIcon = L.divIcon({ className: 'leaflet-div-icon4', iconSize: new L.Point(150, 30), html: 'Networking' });
-var myIcon1 = L.divIcon({ className: 'leaflet-div-icon5', iconSize: new L.Point(60, 40), html: 'Archiving' });
+var linkingIcon = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(60, 40), html: 'Linking' });
-L.marker(xy(1000, 400), {icon: myIcon1}).addTo(map); //Archiving
-L.marker(xy(1600, 1200), {icon: myIcon2}).addTo(map); //Networking
-L.marker(xy(100, 1400), {icon: myIcon3}).addTo(map);  //Linking
 
+L.marker(xy(1000, 400), {icon: archivingIcon}).addTo(map);
+L.marker(xy(1600, 1200), {icon: networkingIcon}).addTo(map);
+L.marker(xy(100, 1400), {icon: linkingIcon}).addTo(map);
 
-var dict = {} //this object works as a dictionary to store page names and their coordinates
+
+var dict_coordinates = {} //this object works as a dictionary to store page names and their coordinates
 var connectionarray = []; //this array will store page names and their connections
-var overlays = {}; //object for map layers
+var annotated = L.layerGroup();
+var not_annotated = L.layerGroup();
+var layers_by_field = {};
 
+var overlayAnnotated = {
+    "Yes": annotated,
+    "No": not_annotated
+};
 
 // making random coordinates for the points
 //in archiving
@@ -116,6 +123,7 @@ for (var i = 15; i <= 25; i++) {
     lon3Array.push(i * 50);
 }
 
+
 //The function to wrap the result. It waits for API call to be completed.
 var callback = function (response) {
 	var pages = response.query.results;
@@ -124,9 +132,9 @@ var callback = function (response) {
 		var url = pages[key].fullurl;
 		var category = pages[key].printouts.Category[0].fulltext;
     var category1 = pages[key].printouts.Category[1].fulltext;
+    var category_annotated = pages[key].printouts.Category[2];
 		var connection = pages[key].printouts.Connection[0];
 		var fields = pages[key].printouts.Field;
-		console.log(pagename);
 
 
 		if (category == "Category:Archiving"){
@@ -158,7 +166,18 @@ var callback = function (response) {
         map.addLayer(layers_by_field[ field ]); //making the layers visible
       }
 
-			dict[pagename] = [lan, lon]; //adding to the dictionary the page name and its coordinates
+			dict_coordinates[pagename] = [lan, lon]; //adding to the dictionary the page name and its coordinates
+
+      if ( typeof category_annotated != 'undefined') {
+        var category_annotated2 = pages[key].printouts.Category[2].fulltext;
+        marker.addTo(annotated);
+        map.addLayer(annotated);
+        console.log(annotated);
+      } else{
+        marker.addTo(not_annotated);
+        map.addLayer(not_annotated);
+      }
+
 		}
 
 
@@ -178,7 +197,7 @@ var callback = function (response) {
 			//L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
 			L.marker(networkingcoordinates, {icon: myIcon}).addTo(map);
 
-			dict[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
+			dict_coordinates[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
 		}
 
 
@@ -191,7 +210,7 @@ var callback = function (response) {
       lon3Array.splice(lon3Array.indexOf(lon3), 1); //removes the chosen number from the array to avoid repetitions
 
       var linkingcoordinates = xy(lan3, lon3);
-      console.log(pagename, linkingcoordinates);
+      //console.log(pagename, linkingcoordinates);
       //var travel = L.polyline([networkingcoordinates, xy(1500, 1200)], {color:'lightgrey', weight: 10, lineCap: 'butt'}).addTo(map);
 
       var myIcon = L.divIcon({ className: 'leaflet-div-icon3', iconSize: new L.Point(200, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
@@ -199,14 +218,16 @@ var callback = function (response) {
       L.marker(linkingcoordinates, {icon: myIcon}).addTo(map);
 
 
-      dict[pagename] = [lan3, lon3];//adding to the dictionary the page name and its coordinates
+      dict_coordinates[pagename] = [lan3, lon3];//adding to the dictionary the page name and its coordinates
     }
 
 		if (  typeof connection != 'undefined' ) { //if there is a "connection"
 			var connection2 = pages[key].printouts.Connection[0].fulltext; //get the value
 			connectionarray.push(connection2, pagename); //add value to array
 		}
-	});
+
+  });
+
 
 //dealing with asynchronous code with an async function. Meaning, function two only starts when function one is complete.
 //I needed to only add elements to the layers menu after I had the array with the menu content full.
@@ -220,28 +241,31 @@ var callback = function (response) {
 	}
 
 	async function asyncCall() {
-	  console.log('calling');
+	  //console.log('calling');
 	  const result = await resolveAfter1Second();
 
 		var layer = L.control.layers(null, layers_by_field).addTo(map); //null is for no baselayer
+    var layer2 = L.control.layers(null, overlayAnnotated).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.
-    var a = document.getElementById('leaflet_layers') // adds to html
+    var htmlObject2 = layer2.getContainer(); // Returns the HTMLElement that contains the control.
+    var field_layers = document.getElementById('field_layers') // adds to html
+    var annotation_layers = document.getElementById('annotation_layers') // adds to html
 
     function setParent(el, newParent){ // "unchilds" and gives new parent
       newParent.appendChild(el);
-      }
+    }
 
-    setParent(htmlObject, a);
+    setParent(htmlObject, field_layers);
+    setParent(htmlObject2, annotation_layers);
 
-	  console.log(result); // expected output: 'resolved'
+	  //console.log(result); // expected output: 'resolved'
 	}
 
 	asyncCall();
 
 
-
 //connecting with dash lines the pages with connections
 	var groups = [];
 
@@ -254,8 +278,8 @@ var callback = function (response) {
 //what is missing to connect the pages is the coordinates of the pages.
 //The coordinates of every page are stored in the dictionary, so I need to fetch them from there.
 	for(var i = 0; i < groups.length; i++){
-		var val1  = dict[groups[i][0]]; //gets the value stored in the dictionary of the first element of each subarray in "groups"
+		var val1  = dict_coordinates[groups[i][0]]; //gets the value stored in the dictionary of the first element of each subarray in "groups"
-		var val2 = dict[groups[i][1]]; //gets the value of the second element
+		var val2 = dict_coordinates[groups[i][1]]; //gets the value of the second element
 		var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 1.5, dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
 	}
 

style.css

@@ -429,38 +429,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	top: 1px;
 }
 
-.leaflet-control-layers label {
-  font-family: "standard";
-	display: block;
-  left: 0;
-  /*float: left;*/
-  margin-right: 3%;
-  cursor: pointer;
-  color: black;
-  font-size: calc(8px + 0.2vw);
-  line-height: 15px;
-  font-size: calc(9px + 0.2vw);
-  border-bottom: 1.5px solid black;
-  margin: 1%;
-  width: 20em;
-  text-transform: capitalize;
-	}
-
-.leaflet-control-layers label:hover{
-  color: grey;
-}
-
-
-input[type="checkbox"]:not(:checked),
-input[type="checkbox"]:checked {
-  /*display: none;*/
-}
-
-input[type="checkbox"]:not(:checked) {
-}
-
-input[type="checkbox"]:checked{
-}
 
 
 /* Default icon URLs */
@@ -842,7 +810,7 @@ text-transform: capitalize;
 .tags_menu {
   position: fixed;
   z-index: 1000;
-  top: 65%;
+  top: 60%;
   background-color: rgba(237, 237, 237, 0.95);
   left: 1em;
 }
@@ -893,3 +861,42 @@ text-transform: capitalize;
 }
 
 .show {display: block;}
+
+.leaflet-control-layers label {
+  font-family: "standard";
+	display: block;
+  left: 0;
+  /*float: left;*/
+  margin-right: 3%;
+  cursor: pointer;
+  color: black;
+  font-size: calc(8px + 0.2vw);
+  line-height: 15px;
+  font-size: calc(9px + 0.2vw);
+  border-bottom: 1.5px solid black;
+  margin: 1%;
+  width: 20em;
+  text-transform: capitalize;
+	}
+
+  label:last-child {
+  margin-bottom: 1.5em;
+}
+
+.leaflet-control-layers label:hover{
+  color: grey;
+}
+
+
+input[type="checkbox"]:not(:checked),
+input[type="checkbox"]:checked {
+  /*display: none;*/
+}
+
+input[type="checkbox"]:not(:checked) + label {
+  color: red;
+}
+
+input[type="checkbox"]:checked + label{
+  color: blue;
+}