From 5e7257590e104fc2103d0a2a8323de731cf8f60e Mon Sep 17 00:00:00 2001 From: rita Date: Wed, 27 May 2020 16:54:53 +0100 Subject: [PATCH] added Annotations to tags --- index.htm | 74 ++++++++++++++++++++++++++++++++++++------------------- style.css | 73 +++++++++++++++++++++++++++++------------------------- 2 files changed, 89 insertions(+), 58 deletions(-) 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; +}