diff --git a/index.htm b/index.htm
index c3e5530..b3ed315 100755
--- a/index.htm
+++ b/index.htm
@@ -22,11 +22,12 @@
Field
-
+
+
Annotations
+
-
@@ -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 myIcon3 = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(60, 40), html: 'Linking' });
-var myIcon1 = L.divIcon({ className: 'leaflet-div-icon5', iconSize: new L.Point(60, 40), html: 'Archiving' });
-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
+var archivingIcon = L.divIcon({ className: 'leaflet-div-icon5', iconSize: new L.Point(60, 40), html: 'Archiving' });
+var networkingIcon = L.divIcon({ className: 'leaflet-div-icon4', iconSize: new L.Point(150, 30), html: 'Networking' });
+var linkingIcon = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(60, 40), html: '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: ' ' + pagename + ' ' });
@@ -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 val2 = dict[groups[i][1]]; //gets the value of the second element
+ 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
var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 1.5, dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
}
diff --git a/style.css b/style.css
index 3f77364..1e8c98d 100755
--- a/style.css
+++ b/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;
+}