less clustering

master
rita 4 years ago
parent 8184bbb2aa
commit 563cf23afb

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before

Width:  |  Height:  |  Size: 696 B

After

Width:  |  Height:  |  Size: 696 B

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before

Width:  |  Height:  |  Size: 618 B

After

Width:  |  Height:  |  Size: 618 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 976 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 MiB

@ -1,304 +1 @@
<!DOCTYPE html> <meta http-equiv="Refresh" content="0; url='https://hub.xpub.nl/networksofcare/mediawiki/'" />
<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>

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

@ -669,7 +669,7 @@ html, body {
overflow: hidden; overflow: hidden;
} }
.leaflet-div-icon { .archivingChildren {
background-color: transparent; background-color: transparent;
color: black; color: black;
border: none; border: none;
@ -682,7 +682,7 @@ html, body {
text-align: center; text-align: center;
} }
.leaflet-div-icon a { .archivingChildren a {
font-family: "lunchtype2"; font-family: "lunchtype2";
font-size: calc(9px + 0.4vw); font-size: calc(9px + 0.4vw);
padding: 1%; padding: 1%;
@ -691,13 +691,13 @@ html, body {
font-weight: normal; font-weight: normal;
/*border: 2px solid CornflowerBlue; /*border: 2px solid CornflowerBlue;
border-radius: 50%;*/ border-radius: 50%;*/
background-color: black; background-color: lightgrey;
color: white; color: black;
text-align: center; text-align: center;
} }
.leaflet-div-icon2 { .networkingChildren {
background-color: transparent; background-color: transparent;
color: white; color: white;
border: none; border: none;
@ -709,33 +709,33 @@ html, body {
text-align: center; text-align: center;
} }
.leaflet-div-icon2 a { .networkingChildren a {
font-family: "lunchtype2"; font-family: "lunchtype2";
font-size: calc(9px + 0.4vw); font-size: calc(9px + 0.4vw);
padding: 1%; padding: 1%;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
font-weight: normal; font-weight: normal;
background-color: lightgrey; background-color: black;
color: black; color: white;
text-align: center; text-align: center;
} }
.leaflet-div-icon2 a:hover, .networkingChildren a:hover,
.leaflet-div-icon a:hover, .archivingChildren a:hover,
.leaflet-div-icon3 a:hover, .linkingChildren a:hover,
.leaflet-div-icon4 a:hover, .linkingIcon a:hover,
.leaflet-div-icon5 a:hover, .archivingIcon a:hover,
.leaflet-div-icon6 a:hover { .networkingIcon a:hover {
background-color: #0025a2; background-color: #0025a2;
color: white; color: white;
} }
.leaflet-div-icon3 { .linkingChildren {
text-align: center; text-align: center;
} }
.leaflet-div-icon3 a { .linkingChildren a {
font-family: "lunchtype2"; font-family: "lunchtype2";
font-size: calc(9px + 0.4vw); font-size: calc(9px + 0.4vw);
padding: 1%; padding: 1%;
@ -747,32 +747,32 @@ html, body {
text-align: center; text-align: center;
} }
.leaflet-div-icon4 a{ .networkingIcon a{
font-size: calc(9px + 1.5vw); font-size: calc(9px + 2.5vw);
font-family: "lunchtype2"; font-family: "lunchtype2";
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: black; color: white;
text-decoration: none; text-decoration: none;
background-color:lightgrey; background-color:black;
z-index: 2; z-index: 2000;
} }
.leaflet-div-icon5 a { .archivingIcon a {
font-size: calc(9px + 1.5vw); font-size: calc(9px + 2.5vw);
font-family: "lunchtype2"; font-family: "lunchtype2";
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: white; color: black;
background-color: black; background-color: lightgrey;
z-index: 2; z-index: 2;
} }
.leaflet-div-icon6 a { .linkingIcon a {
font-size: calc(9px + 1.5vw); font-size: calc(9px + 2.5vw);
font-family: "lunchtype2"; font-family: "lunchtype2";
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
@ -821,7 +821,7 @@ text-transform: capitalize;
.tags_menu { .tags_menu {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 60%; top: 444px;
/*background-color: rgba(237, 237, 237, 0.95);*/ /*background-color: rgba(237, 237, 237, 0.95);*/
background-color: #0025a2; background-color: #0025a2;
color: white; color: white;
@ -865,6 +865,25 @@ text-transform: capitalize;
z-index: 10000; z-index: 10000;
width: 10em; width: 10em;
overflow: hidden; 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 { .dropdown-content a {

Loading…
Cancel
Save