You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 lines
10 KiB
HTML
272 lines
10 KiB
HTML
<!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">
|
|
<h1>Tags</h1>
|
|
<button onclick="myDropmenu()" class="dropbtn"> </button>
|
|
</div>
|
|
|
|
<div id="myDropdown" class="dropdown-content">
|
|
<h2>Field</h2>
|
|
<div id="leaflet_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");
|
|
}
|
|
|
|
var layers_by_field = {};
|
|
|
|
// 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";
|
|
|
|
//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 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
|
|
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 <= 50; i++) {
|
|
lonArray.push(i * 15);
|
|
}
|
|
|
|
//in networking
|
|
var lan2Array = [];
|
|
for (var i = 25; i <= 50; i++) {//2nd quadrant
|
|
lan2Array.push(i * 50);
|
|
}
|
|
|
|
var lon2Array = [];
|
|
for (var i = 15; i <= 30; i++) {
|
|
lon2Array.push(i * 50);
|
|
}
|
|
|
|
//in linking
|
|
var lan3Array = [];
|
|
for (var i = 1; i <= 20; i++) {//1st quadrant
|
|
lan3Array.push(i * 50);
|
|
}
|
|
|
|
var lon3Array = [];
|
|
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;
|
|
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 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})//.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[pagename] = [lan, lon]; //adding to the dictionary the page name and its coordinates
|
|
}
|
|
|
|
|
|
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}).addTo(map);
|
|
|
|
dict[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}).addTo(map);
|
|
|
|
|
|
dict[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
|
|
|
|
// 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
|
|
|
|
function setParent(el, newParent){ // "unchilds" and gives new parent
|
|
newParent.appendChild(el);
|
|
}
|
|
|
|
setParent(htmlObject, a);
|
|
|
|
console.log(result); // expected output: 'resolved'
|
|
}
|
|
|
|
asyncCall();
|
|
|
|
|
|
|
|
//connecting with dash lines the pages with connections
|
|
var groups = [];
|
|
|
|
//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[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 travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 1.5, dashArray: '10', 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>
|