rita
/
Networks_of_Care
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added Annotations to tags

Browse Source
master
rita 5 years ago
parent 54f77d3ae2
commit 5e7257590e
2 changed files with 89 additions and 58 deletions
Show Stats Download Patch File Download Diff File

70
index.htm
Unescape Escape View File

@ -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 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: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
@ -199,15 +218,17 @@ 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.
function resolveAfter1Second() {
@ -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!
}

73
style.css
Unescape Escape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save