fixed visible layers

index.htm

@@ -32,7 +32,7 @@
 
 <script>
 
-/* When the user clicks the menu button, toggle between hiding and showing the dropdown content */
+// When the user clicks the menu button, toggle between hiding and showing the dropdown content.
 function myDropmenu() {
   document.getElementById("myDropdown").classList.toggle("show");
 }
@@ -45,8 +45,6 @@ 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: [] //adds layers for my map
-
 });
 
 
@@ -70,7 +68,6 @@ 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";
 
-
 //Main categories with static location:
 var myIcon2 = L.divIcon({ className: 'leaflet-div-icon4', iconSize: new L.Point(150, 30), html: 'Networking' });
 var myIcon3 = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(60, 40), html: 'Linking' });
@@ -80,16 +77,12 @@ L.marker(xy(1600, 1200), {icon: myIcon2}).addTo(map); //Networking
 L.marker(xy(100, 1400), {icon: myIcon3}).addTo(map);  //Linking
 
 
-// exploring animations
-//L.marker(xy(1000, 400), {icon: L.icon({iconUrl: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png', className: 'blinking'})}).addTo(map);
-
 var dict = {} //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
 
 
 // making random coordinates for the points
-
 //in archiving
 var lanArray = [];
 for (var i = 1; i <= 50; i++) { //in 3+4th quadrant
@@ -97,8 +90,8 @@ for (var i = 1; i <= 50; i++) { //in 3+4th quadrant
 }
 
 var lonArray = [];
-for (var i = 1; i <= 15; i++) {
-    lonArray.push(i * 50);
+for (var i = 1; i <= 50; i++) {
+    lonArray.push(i * 15);
 }
 
 //in networking
@@ -153,25 +146,19 @@ var callback = function (response) {
 			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
+      for(var i = 0; i < fields.length; i++) { //for each page, each "field"...
         var field = fields[i];
 
-    if ( layers_by_field[ field ] == undefined ) {
-      layers_by_field[field] = L.layerGroup();
-    }
-        // assume it exists...
-        marker.addTo(layers_by_field[ field ]);
+        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.
         }
 
-      //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
+        // assumes it exists...
+        marker.addTo(layers_by_field[ field ]); //adding to layer group
+        map.addLayer(layers_by_field[ field ]); //making the layers visible
+      }
 
+			dict[pagename] = [lan, lon]; //adding to the dictionary the page name and its coordinates
 		}
 
 
@@ -187,7 +174,7 @@ var callback = function (response) {
 
 			//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(150, 35), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
+			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}).addTo(map);
 
@@ -211,6 +198,7 @@ var callback = function (response) {
       //L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
       L.marker(linkingcoordinates, {icon: myIcon}).addTo(map);
 
+
       dict[pagename] = [lan3, lon3];//adding to the dictionary the page name and its coordinates
     }
 
@@ -245,11 +233,8 @@ var callback = function (response) {
       newParent.appendChild(el);
       }
 
-
     setParent(htmlObject, a);
 
-
-
 	  console.log(result); // expected output: 'resolved'
 	}
 

style.css

@@ -1,4 +1,4 @@
-@font-face {
+/*@font-face {
     font-family: "lunchtype";
     src: url("/var/www/html/mediawiki/skins/Vector/fonts/lunchtype24-regular-expanded.woff");
     font-weight: normal;
@@ -14,6 +14,24 @@
     font-family: "standard";
     src: url("./mediawiki/skins/Vector/fonts/standard-book-webfont.woff");
     font-weight: normal;
+}*/
+
+@font-face {
+    font-family: "lunchtype";
+    src: url("./fonts/lunchtype24-regular-expanded.woff");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "lunchtype2";
+    src: url("./fonts/lunchtype25-regular_condensed-webfont.woff");
+    font-weight: normal;
+}
+
+@font-face {
+    font-family: "standard";
+    src: url("./fonts/standard-book-webfont.woff");
+    font-weight: normal;
 }