diff --git a/images/layers-2x.png b/images/layers-2x.png
index 9839040..041efa6 100644
Binary files a/images/layers-2x.png and b/images/layers-2x.png differ
diff --git a/images/layers.png b/images/layers.png
old mode 100644
new mode 100755
diff --git a/images/marker-icon-2x.png b/images/marker-icon-2x.png
old mode 100644
new mode 100755
diff --git a/images/marker-icon.png b/images/marker-icon.png
old mode 100644
new mode 100755
diff --git a/images/marker-shadow.png b/images/marker-shadow.png
old mode 100644
new mode 100755
diff --git a/images/net1.jpg b/images/net1.jpg
new file mode 100644
index 0000000..0509f52
Binary files /dev/null and b/images/net1.jpg differ
diff --git a/images/net2.jpg b/images/net2.jpg
new file mode 100644
index 0000000..bb97a4e
Binary files /dev/null and b/images/net2.jpg differ
diff --git a/images/net3.jpg b/images/net3.jpg
new file mode 100644
index 0000000..44bba0f
Binary files /dev/null and b/images/net3.jpg differ
diff --git a/images/net4.jpg b/images/net4.jpg
new file mode 100644
index 0000000..c51379c
Binary files /dev/null and b/images/net4.jpg differ
diff --git a/index.htm b/index.htm
index def8b61..9875e2b 100644
--- a/index.htm
+++ b/index.htm
@@ -1,304 +1 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-<title>Networks of Care</title>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link rel="shortcut icon" type="image/x-icon" href=""/>
-<link rel="stylesheet" type="text/css" href="reset.css"/>
-<link rel="stylesheet" href="./style.css"/>
-<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
-<base target="_parent">
-</head>
-
-<body>
-
-<div class="tags_menu">
-  <div class="tags_header">
-
-    <button onclick="myDropmenu()" class="dropbtn"> <h1>Explore tags</h1> </button>
-  </div>
-
-  <div id="myDropdown" class="dropdown-content">
-    <h2>Field</h2>
-    <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>
-
-
-<script>
-
-// When the user clicks the menu button, toggle between hiding and showing the dropdown content.
-function myDropmenu() {
-  document.getElementById("myDropdown").classList.toggle("show");
-}
-
-
-// Leaflet
-var map = L.map('map', {
-	zoomControl: false, //removes zoom controls
-	crs: L.CRS.Simple, //changes coordinate reference system to a x,y one instead of map cartesian coordinates
-	minZoom: -1,
-	maxZoom: -2,
-});
-
-
-var yx = L.latLng;
-var xy = function(x, y) {
-	if (L.Util.isArray(x)) { // When doing xy([x, y]);
-		return yx(x[1], x[0]);
-	}
-	return yx(y, x); // When doing xy(x, y);
-};
-
-var bounds = [xy(0, 0), xy(0, 0)]; //did this to remove border around map, showing on firefox
-var image = L.imageOverlay('', bounds).addTo(map); //imageOverlay is the map image
-map.fitBounds(bounds);
-map.setView(xy(1050, 750), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
-
-
-// Wiki Api
-var apiEndpoint = "https://hub.xpub.nl/networksofcare/mediawiki/api.php";
-
-// my query: All pages with category "diagram". Show "category", show "connection", show "field".
-var params ="action=ask&format=json&query=[[Category%3ADiagram]] |%3FCategory |%3FConnection |%3FField|limit=100";
-
-//Main categories with static location:
-var archivingIcon = L.divIcon({ className: 'leaflet-div-icon5', iconSize: new L.Point(), html: ' <a href="https://hub.xpub.nl/networksofcare/mediawiki/index.php?title=Category:Archiving"> Archiving </a> ' });
-var networkingIcon = L.divIcon({ className: 'leaflet-div-icon4', iconSize: new L.Point(), html: ' <a href="https://hub.xpub.nl/networksofcare/mediawiki/index.php?title=Category:Networking"> Networking </a> ' });
-var linkingIcon = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(), html: ' <a href="https://hub.xpub.nl/networksofcare/mediawiki/index.php?title=Category:Linking"> Linking </a> ' });
-
-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_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 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
-var lanArray = [];
-for (var i = 1; i <= 40; i++) { //in 3+4th quadrant
-    lanArray.push(i * 50); //* 50 means I only have coordinates ending with 0 or 5, making them more far apart
-}
-
-
-var lonArray = [];
-for (var i = 1; i <= 45; i++) {
-    lonArray.push(i * 15);
-}
-
-
-//in networking
-var lan2Array = [];
-for (var i = 25; i <= 45; i++) {//2nd quadrant
-    lan2Array.push(i * 50);
-}
-
-var lon2Array = [];
-for (var i = 15; i <= 33; i++) {
-    lon2Array.push(i * 50);
-}
-
-//in linking
-var lan3Array = [];
-for (var i = 1; i <= 15; i++) {//1st quadrant
-    lan3Array.push(i * 50);
-}
-
-var lon3Array = [];
-for (var i = 20; i <= 30; 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;
-	Object.keys(pages).forEach(function(key) { //for loop
-		var pagename = pages[key].fulltext;//getting json keys
-		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"){
-
-			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
-
-			var lon = lonArray[Math.floor(Math.random() * lonArray.length)]; //chooses random number from the array, y coordinate
-			lonArray.splice(lonArray.indexOf(lon), 1); //removes the chosen number from the array to avoid repetitions
-
-			var archivingcoordinates = xy(lan, lon);
-
-
-			//var travel = L.polyline([archivingcoordinates, xy(1000, 400)], {color:'lightgrey', weight: 10, lineCap: 'butt', offset: 50}).addTo(map).addTo(obj);//connects to "Archiving"
-
-			var myIcon = L.divIcon({ iconSize: new L.Point(200, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });//divIcon is the name, label.
-
-      var marker = L.marker(archivingcoordinates, {icon: myIcon, riseOnHover: true})//.addTo(map);
-
-
-      for(var i = 0; i < fields.length; i++) { //for each page, each "field"...
-        var field = fields[i];
-
-        if ( layers_by_field[ field ] == undefined ) { //if it doesn't exist...
-          layers_by_field[field] = L.layerGroup(); //adds to object "layers_by_field" key and value.
-        }
-
-        // assumes it exists...
-        marker.addTo(layers_by_field[ field ]); //adding to layer group
-        map.addLayer(layers_by_field[ field ]); //making the layers visible
-      }
-
-			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);
-      }
-
-		}
-
-
-		if (category == "Category:Networking"){
-
-			var lan1 = lan2Array[Math.floor(Math.random() * lan2Array.length)]; //chooses random number from the array, x coordinate
-			lan2Array.splice(lan2Array.indexOf(lan1), 1); //removes the chosen number from the array to avoid repetitions
-
-			var lon2 = lon2Array[Math.floor(Math.random() * lon2Array.length)]; //chooses random number from the array, x coordinate
-			lon2Array.splice(lon2Array.indexOf(lon2), 1); //removes the chosen number from the array to avoid repetitions
-
-			var networkingcoordinates = xy(lan1, lon2);
-
-			//var travel = L.polyline([networkingcoordinates, xy(1500, 1200)], {color:'lightgrey', weight: 10, lineCap: 'butt'}).addTo(map);
-
-			var myIcon = L.divIcon({ className: 'leaflet-div-icon2', iconSize: new L.Point(200, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
-			//L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
-      L.marker(networkingcoordinates, {icon: myIcon, riseOnHover: true}).addTo(map);
-
-			dict_coordinates[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
-		}
-
-
-    if (category1 == "Category:Linking"){
-
-      var lan3 = lan3Array[Math.floor(Math.random() * lan3Array.length)]; //chooses random number from the array, x coordinate
-      lan3Array.splice(lan3Array.indexOf(lan3), 1); //removes the chosen number from the array to avoid repetitions
-
-      var lon3 = lon3Array[Math.floor(Math.random() * lon3Array.length)]; //chooses random number from the array, x coordinate
-      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);
-      //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> ' });
-      //L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
-      L.marker(linkingcoordinates, {icon: myIcon, riseOnHover: true}).addTo(map);
-
-      L.imageOverlay('./images/Scan7.jpg', [[400, 500], [950, 900]]).addTo(map);
-      L.imageOverlay('./images/Scan8.jpg', [[1100, 1400], [1650, 1800]]).addTo(map);
-
-
-      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.
-	function resolveAfter1Second() {
-	  return new Promise(resolve => {
-	    setTimeout(() => {
-	      resolve('resolved');
-				//console.log(overlays);
-	    }, 1000);
-	  });
-	}
-
-	async function asyncCall() {
-	  //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 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, field_layers);
-    setParent(htmlObject2, annotation_layers);
-
-	  //console.log(result); // expected output: 'resolved'
-	}
-
-	asyncCall();
-
-
-//connecting with dash lines the pages with connections
-	var groups = [];
-  console.log(dict_coordinates);
-
-//every page with a connection goes to "connectionarray" (see above).
-//this splits the array in pairs and adds them to "groups" as subarrays. Each subarray has now the two pages that should connect.
-	for(var i = 0; i < connectionarray.length; i += 2){
-		groups.push(connectionarray.slice(i, i + 2));
-	}
-
-//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_coordinates[groups[i][0]]; //gets the value stored in the dictionary of the first element of each subarray in "groups"
-		var val2 = dict_coordinates[groups[i][1]]; //gets the value of the second element
-    console.log(groups[i], val1, val2);
-		var travel = L.polyline([xy(val1), xy(val2)], {color:'#0025a2', weight: 1.5, dashArray: '5', lineCap: 'butt'}).addTo(map); //makes line. Done!
-	}
-
-}; //main function ends
-
-var scriptTag = document.createElement("script"); // Dynamically create a "script" tag
-scriptTag.src = apiEndpoint + "?" + params + "&callback=callback"; // Point to the query string
-document.body.appendChild(scriptTag); // Add the script tag to the document
-
-</script>
-
-</body>
-</html>
+<meta http-equiv="Refresh" content="0; url='https://hub.xpub.nl/networksofcare/mediawiki/'" />
diff --git a/map.htm b/map.htm
new file mode 100755
index 0000000..8a163e7
--- /dev/null
+++ b/map.htm
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<title>Networks of Care</title>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="shortcut icon" type="image/x-icon" href=""/>
+<link rel="stylesheet" type="text/css" href="reset.css"/>
+<link rel="stylesheet" href="./style.css"/>
+<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
+<base target="_parent">
+</head>
+
+<body>
+
+<div class="tags_menu">
+  <div class="tags_header">
+
+    <button onclick="myDropmenu()" class="dropbtn"> <h1>Explore tags</h1> </button>
+  </div>
+
+  <div id="myDropdown" class="dropdown-content">
+    <h2>Field</h2>
+    <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>
+
+
+<script>
+
+// When the user clicks the menu button, toggle between hiding and showing the dropdown content.
+function myDropmenu() {
+  document.getElementById("myDropdown").classList.toggle("show");
+}
+
+
+// Leaflet
+var map = L.map('map', {
+	zoomControl: false, //removes zoom controls
+	crs: L.CRS.Simple, //changes coordinate reference system to a x,y one instead of map cartesian coordinates
+	minZoom: -1,
+	maxZoom: -2,
+});
+
+
+var yx = L.latLng;
+var xy = function(x, y) {
+	if (L.Util.isArray(x)) { // When doing xy([x, y]);
+		return yx(x[1], x[0]);
+	}
+	return yx(y, x); // When doing xy(x, y);
+};
+
+var bounds = [xy(0, 0), xy(0, 0)]; //did this to remove border around map, showing on firefox
+var image = L.imageOverlay('', bounds).addTo(map); //imageOverlay is the map image
+map.fitBounds(bounds);
+map.setView(xy(1850, 850), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
+
+
+// Wiki Api
+var apiEndpoint = "https://hub.xpub.nl/networksofcare/mediawiki/api.php";
+
+// my query: All pages with category "diagram". Show "category", show "connection", show "field".
+var params ="action=ask&format=json&query=[[Category%3ADiagram]] |%3FCategory |%3FConnection |%3FField|limit=100";
+
+//Main categories with static location:
+var archivingIcon = L.divIcon({ className: 'archivingIcon', iconSize: new L.Point(), html: ' <a href="https://hub.xpub.nl/networksofcare/mediawiki/index.php?title=Category:Archiving"> Archiving </a> ' });
+var networkingIcon = L.divIcon({ className: 'networkingIcon', iconSize: new L.Point(), html: ' <a href="https://hub.xpub.nl/networksofcare/mediawiki/index.php?title=Category:Networking"> Networking </a> ' });
+var linkingIcon = L.divIcon({ className: 'linkingIcon', iconSize: new L.Point(), html: ' <a href="https://hub.xpub.nl/networksofcare/mediawiki/index.php?title=Category:Linking"> Linking </a> ' });
+
+L.marker(xy(1000, 0), {icon: archivingIcon, riseOnHover: true}).addTo(map);
+L.marker(xy(1700, 1200), {icon: networkingIcon, riseOnHover: true}).addTo(map);
+L.marker(xy(100, 1400), {icon: linkingIcon, riseOnHover: true}).addTo(map);
+
+
+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 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
+var lanArray = [];//x
+for (var i = 10; i <= 40; i++) { //in 3+4th quadrant
+    lanArray.push(i * 50); //* 50 means I only have coordinates ending with 0 or 5, making them more far apart
+}
+
+var lonArray = [];//y
+for (var i = -50; i <= 10; i++) {
+    lonArray.push(i * 50);
+}
+lonArray.splice(lonArray.indexOf(-50), 1);
+lonArray.splice(lonArray.indexOf(0), 1);
+lonArray.splice(lonArray.indexOf(50), 1);
+
+//in networking
+var lan2Array = [];
+for (var i = 30; i <= 50; i++) {//2nd quadrant
+    lan2Array.push(i * 50);
+}
+
+var lon2Array = [];
+for (var i = 15; i <= 33; i++) {
+    lon2Array.push(i * 50);
+}
+lon2Array.splice(lon2Array.indexOf(1150), 1);
+lon2Array.splice(lon2Array.indexOf(1200), 1);
+lon2Array.splice(lon2Array.indexOf(1250), 1);
+
+//in linking
+var lan3Array = [];
+for (var i = -7; i <= 20; i++) {//x
+    lan3Array.push(i * 50);
+}
+
+var lon3Array = [];
+for (var i = 18; i <= 45; i++) {//y
+    lon3Array.push(i * 50);
+}
+lon3Array.splice(lon3Array.indexOf(1350), 1);
+lon3Array.splice(lon3Array.indexOf(1400), 1);
+lon3Array.splice(lon3Array.indexOf(1450), 1);
+
+//The function to wrap the result. It waits for API call to be completed.
+var callback = function (response) {
+	var pages = response.query.results;
+	Object.keys(pages).forEach(function(key) { //for loop
+		var pagename = pages[key].fulltext;//getting json keys
+		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"){
+
+			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
+
+			var lon = lonArray[Math.floor(Math.random() * lonArray.length)]; //chooses random number from the array, y coordinate
+			lonArray.splice(lonArray.indexOf(lon), 1); //removes the chosen number from the array to avoid repetitions
+      console.log(lon);
+			var archivingcoordinates = xy(lan, lon);
+
+
+			//var travel = L.polyline([archivingcoordinates, xy(1000, 400)], {color:'lightgrey', weight: 10, lineCap: 'butt', offset: 50}).addTo(map).addTo(obj);//connects to "Archiving"
+
+			var myIcon = L.divIcon({ className: 'archivingChildren', iconSize: new L.Point(220, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });//divIcon is the name, label.
+
+      var marker = L.marker(archivingcoordinates, {icon: myIcon, riseOnHover: true})//.addTo(map);
+
+
+      for(var i = 0; i < fields.length; i++) { //for each page, each "field"...
+        var field = fields[i];
+
+        if ( layers_by_field[ field ] == undefined ) { //if it doesn't exist...
+          layers_by_field[field] = L.layerGroup(); //adds to object "layers_by_field" key and value.
+        }
+
+        // assumes it exists...
+        marker.addTo(layers_by_field[ field ]); //adding to layer group
+        map.addLayer(layers_by_field[ field ]); //making the layers visible
+      }
+
+			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);
+      }
+
+		}
+
+
+		if (category == "Category:Networking"){
+
+			var lan1 = lan2Array[Math.floor(Math.random() * lan2Array.length)]; //chooses random number from the array, x coordinate
+			//lan2Array.splice(lan2Array.indexOf(lan1), 1); //removes the chosen number from the array to avoid repetitions
+
+			var lon2 = lon2Array[Math.floor(Math.random() * lon2Array.length)]; //chooses random number from the array, x coordinate
+			lon2Array.splice(lon2Array.indexOf(lon2), 1); //removes the chosen number from the array to avoid repetitions
+      console.log(lon2);
+
+			var networkingcoordinates = xy(lan1, lon2);
+
+			//var travel = L.polyline([networkingcoordinates, xy(1500, 1200)], {color:'lightgrey', weight: 10, lineCap: 'butt'}).addTo(map);
+
+			var myIcon = L.divIcon({ className: 'networkingChildren', iconSize: new L.Point(200, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
+			//L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
+      L.marker(networkingcoordinates, {icon: myIcon, riseOnHover: true}).addTo(map);
+
+			dict_coordinates[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
+		}
+
+
+    if (category1 == "Category:Linking"){
+
+      var lan3 = lan3Array[Math.floor(Math.random() * lan3Array.length)]; //chooses random number from the array, x coordinate
+      //lan3Array.splice(lan3Array.indexOf(lan3), 1); //removes the chosen number from the array to avoid repetitions
+
+      var lon3 = lon3Array[Math.floor(Math.random() * lon3Array.length)]; //chooses random number from the array, x coordinate
+      lon3Array.splice(lon3Array.indexOf(lon3), 1); //removes the chosen number from the array to avoid repetitions
+      console.log(lon3);
+
+      var linkingcoordinates = xy(lan3, lon3);
+      //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: 'linkingChildren', iconSize: new L.Point(220, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
+      //L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
+      L.marker(linkingcoordinates, {icon: myIcon, riseOnHover: true}).addTo(map);
+
+      L.imageOverlay('./images/net3.jpg', [[400, -500], [950, -100]]).addTo(map);
+      L.imageOverlay('./images/net4.jpg', [[0, 2500], [1400, 3500]]).addTo(map); // [y, x] to [y, x]
+      L.imageOverlay('./images/net2.jpg', [[-1000, 0], [-1800, 600]]).addTo(map);
+      L.imageOverlay('./images/net1.jpg', [[-200, 2300], [-1000, 2900]]).addTo(map); // [y, x] to [y, x]
+
+      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.
+	function resolveAfter1Second() {
+	  return new Promise(resolve => {
+	    setTimeout(() => {
+	      resolve('resolved');
+				//console.log(overlays);
+	    }, 1000);
+	  });
+	}
+
+	async function asyncCall() {
+	  //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 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, field_layers);
+    setParent(htmlObject2, annotation_layers);
+
+	  //console.log(result); // expected output: 'resolved'
+	}
+
+	asyncCall();
+
+
+//connecting with dash lines the pages with connections
+	var groups = [];
+  //console.log(dict_coordinates);
+
+//every page with a connection goes to "connectionarray" (see above).
+//this splits the array in pairs and adds them to "groups" as subarrays. Each subarray has now the two pages that should connect.
+	for(var i = 0; i < connectionarray.length; i += 2){
+		groups.push(connectionarray.slice(i, i + 2));
+	}
+
+//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_coordinates[groups[i][0]]; //gets the value stored in the dictionary of the first element of each subarray in "groups"
+		var val2 = dict_coordinates[groups[i][1]]; //gets the value of the second element
+    //console.log(groups[i], val1, val2);
+		var travel = L.polyline([xy(val1), xy(val2)], {color:'#0025a2', weight: 1.5, dashArray: '5', lineCap: 'butt'}).addTo(map); //makes line. Done!
+	}
+
+}; //main function ends
+
+var scriptTag = document.createElement("script"); // Dynamically create a "script" tag
+scriptTag.src = apiEndpoint + "?" + params + "&callback=callback"; // Point to the query string
+document.body.appendChild(scriptTag); // Add the script tag to the document
+
+</script>
+
+</body>
+</html>
diff --git a/reset.css b/reset.css
old mode 100644
new mode 100755
diff --git a/style.css b/style.css
old mode 100644
new mode 100755
index b4c3c9d..1f276c9
--- a/style.css
+++ b/style.css
@@ -669,7 +669,7 @@ html, body {
   overflow: hidden;
 }
 
-.leaflet-div-icon {
+.archivingChildren {
   background-color: transparent;
 	color: black;
 	border: none;
@@ -682,7 +682,7 @@ html, body {
 	text-align: center;
 }
 
-.leaflet-div-icon a {
+.archivingChildren a {
   font-family: "lunchtype2";
 	font-size: calc(9px + 0.4vw);
   padding: 1%;
@@ -691,13 +691,13 @@ html, body {
   font-weight: normal;
   /*border: 2px solid CornflowerBlue;
   border-radius: 50%;*/
-  background-color: black;
-  color: white;
+  background-color: lightgrey;
+  color: black;
   text-align: center;
 
 }
 
-.leaflet-div-icon2 {
+.networkingChildren {
   background-color: transparent;
 	color: white;
 	border: none;
@@ -709,33 +709,33 @@ html, body {
 	text-align: center;
 }
 
-.leaflet-div-icon2 a {
+.networkingChildren a {
   font-family: "lunchtype2";
   font-size: calc(9px + 0.4vw);
   padding: 1%;
 	text-transform: uppercase;
   text-decoration: none;
   font-weight: normal;
-  background-color: lightgrey;
-  color: black;
+  background-color: black;
+  color: white;
   text-align: center;
 }
 
-.leaflet-div-icon2 a:hover,
-.leaflet-div-icon a:hover,
-.leaflet-div-icon3 a:hover,
-.leaflet-div-icon4 a:hover,
-.leaflet-div-icon5 a:hover,
-.leaflet-div-icon6 a:hover  {
+.networkingChildren a:hover,
+.archivingChildren a:hover,
+.linkingChildren a:hover,
+.linkingIcon a:hover,
+.archivingIcon a:hover,
+.networkingIcon a:hover  {
   background-color: #0025a2;
   color: white;
 }
 
-.leaflet-div-icon3 {
+.linkingChildren {
   text-align: center;
 }
 
-.leaflet-div-icon3 a {
+.linkingChildren a {
   font-family: "lunchtype2";
   font-size: calc(9px + 0.4vw);
   padding: 1%;
@@ -747,32 +747,32 @@ html, body {
   text-align: center;
 }
 
-.leaflet-div-icon4 a{
-  font-size: calc(9px + 1.5vw);
+.networkingIcon a{
+  font-size: calc(9px + 2.5vw);
   font-family: "lunchtype2";
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
-  color: black;
+  color: white;
   text-decoration: none;
-  background-color:lightgrey;
-  z-index: 2;
+  background-color:black;
+  z-index: 2000;
 }
 
-.leaflet-div-icon5 a {
-  font-size: calc(9px + 1.5vw);
+.archivingIcon a {
+  font-size: calc(9px + 2.5vw);
   font-family: "lunchtype2";
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
   text-align: center;
-  color: white;
-  background-color: black;
+  color: black;
+  background-color: lightgrey;
   z-index: 2;
 }
 
-.leaflet-div-icon6 a {
-  font-size: calc(9px + 1.5vw);
+.linkingIcon a {
+  font-size: calc(9px + 2.5vw);
   font-family: "lunchtype2";
   font-weight: bold;
   text-transform: uppercase;
@@ -821,7 +821,7 @@ text-transform: capitalize;
 .tags_menu {
   position: fixed;
   z-index: 1000;
-  top: 60%;
+  top: 444px;
   /*background-color: rgba(237, 237, 237, 0.95);*/
   background-color: #0025a2;
   color: white;
@@ -865,6 +865,25 @@ text-transform: capitalize;
   z-index: 10000;
   width: 10em;
   overflow: hidden;
+  height:100%;
+}
+
+@media screen and (max-height: 723px) {
+  .dropdown-content {
+    overflow-y: scroll;
+    height:150px;
+  }
+
+  ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 10px;
+  }
+
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background-color: rgba(0,0,0,.5);
+  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+  }
 }
 
 .dropdown-content a {
