@ -14,25 +14,32 @@
< body > < 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 >
< h2 > Field< / h2 >
< h2 > Format < / h2 > < div id = "leaflet_layers" > <!-- Here the layer control menu will be added --> < / div >
< h2 > Language < / h2 > < / div >
< / div >
< div id = 'map' > < / div > < div id = 'map' > < / div >
< script > < script >
/* When the user clicks the menu button, toggle between hiding and showing the dropdown content */
function myDropmenu() {
document.getElementById("myDropdown").classList.toggle("show");
}
//map layers
//map layers
//var artobj = L.layerGroup();
//var artobj = L.layerGroup();
//function to remove duplicates in array
function removeDuplicates(data) {
return [...new Set(data)]
};
// Leaflet
// Leaflet
var map = L.map('map', {
var map = L.map('map', {
zoomControl: false, //removes zoom controls
zoomControl: false, //removes zoom controls
@ -43,7 +50,6 @@ var map = L.map('map', {
});
});
var yx = L.latLng;
var yx = L.latLng;
var xy = function(x, y) {
var xy = function(x, y) {
if (L.Util.isArray(x)) { // When doing xy([x, y]);
if (L.Util.isArray(x)) { // When doing xy([x, y]);
return yx(x[1], x[0]);
return yx(x[1], x[0]);
@ -52,41 +58,38 @@ var xy = function(x, y) {
};
};
var bounds = [xy(0, 0), xy(0, 0)]; //did this to remove border around map, showing on firefox
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
var image = L.imageOverlay('', bounds).addTo(map); //imageOverlay is the map image
map.fitBounds(bounds);
map.fitBounds(bounds);
map.setView(xy(1050, 750), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
map.setView(xy(1250, 750), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
// Wiki Api
// Wiki Api
var apiEndpoint = "https://hub.xpub.nl/networksofcare/mediawiki/api.php";
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";
var params ="action=ask& format=json& query=[[Category%3ADiagram]] |%3FCategory |%3FConnection |%3FField";
// my query: All pages with category "diagram". Show "category", show "connection", show "field".
// "diagram::include" is my way of annotating on the wiki which pages should be visible on the diagram. e.g. I may not want help pages there, main page, etc.
//Main categories with static location:
// "connection::" is my annotation on the wiki for pages that are connected to others. e.g. "Lídia" page is connected to "Varia Code of Conducts". "ginger coons" page is connected to "LGM Code of Conducts".
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' });
//Main categories static location:
var myIcon1 = L.divIcon({ className: 'leaflet-div-icon5', iconSize: new L.Point(60, 40), html: 'Archiving' });
var myIcon2 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Networking' });
L.marker(xy(1000, 400), {icon: myIcon1}).addTo(map); //Archiving
var myIcon3 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Linking' });
var myIcon1 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Archiving' });
L.marker(xy(1000, 400), {icon: myIcon1}).addTo(map);
L.marker(xy(1600, 1200), {icon: myIcon2}).addTo(map); //Networking
L.marker(xy(1600, 1200), {icon: myIcon2}).addTo(map); //Networking
L.marker(xy(100, 1400), {icon: myIcon3}).addTo(map); //Linking
L.marker(xy(100, 1400), {icon: myIcon3}).addTo(map); //Linking
// exploring animations
// exploring animations
//L.marker(xy(1000, 400), {icon: L.icon({iconUrl: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png', className: 'blinking'})}).addTo(map);
//L.marker(xy(1000, 400), {icon: L.icon({iconUrl: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png', className: 'blinking'})}).addTo(map);
var dict = {} //this objects works as a dictionary to store page names and their coordinates
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 connectionarray = []; //this array will store page names and their connections
var overlays = {}; //dictionary for map layers
var overlays = {}; //object for map layers
// making random coordinates for the points
// makes random coordinates for the points
//in archiving
var lanArray = [];
var lanArray = [];
for (var i = 1; i < = 50; i++) { //in 3+4th quadrant
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
lanArray.push(i * 50); //* 50 means I only have coordinates ending with 0 or 5, making them more far apart
@ -97,9 +100,10 @@ for (var i = 1; i <= 15; i++) {
lonArray.push(i * 50);
lonArray.push(i * 50);
}
}
var lan1Array = [];
//in networking
var lan2Array = [];
for (var i = 25; i < = 50; i++) {//2nd quadrant
for (var i = 25; i < = 50; i++) {//2nd quadrant
lan1 Array.push(i * 50);
lan2 Array.push(i * 50);
}
}
var lon2Array = [];
var lon2Array = [];
@ -107,28 +111,38 @@ for (var i = 15; i <= 30; i++) {
lon2Array.push(i * 50);
lon2Array.push(i * 50);
}
}
var obj = L.layerGroup();
//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);
}
//create a variable for every field.
//create a variable for every field.
//var variable_field = L.layerGroup();
//var variable_field = L.layerGroup();
//The function to wrap the result. It waits for api call to be completed.
//The function to wrap the result. It waits for API call to be completed.
var callback = function (response) {
var callback = function (response) {
var pages = response.query.results;
var pages = response.query.results;
Object.keys(pages).forEach(function(key) { //for loop
Object.keys(pages).forEach(function(key) { //for loop
var pagename = pages[key].fulltext;//getting json keys
var pagename = pages[key].fulltext;//getting json keys
var url = pages[key].fullurl;
var url = pages[key].fullurl;
var category = pages[key].printouts.Category[0].fulltext;
var category = pages[key].printouts.Category[0].fulltext;
var category1 = pages[key].printouts.Category[1].fulltext;
var connection = pages[key].printouts.Connection[0];
var connection = pages[key].printouts.Connection[0];
var field = pages[key].printouts.Field;
var field = pages[key].printouts.Field;
console.log(pagename); //printing to console
console.log(pagename);
if (category == "Category:Archiving"){
if (category == "Category:Archiving"){
for(var i = 0; i < field.length ; i + + ) { / / for each page with " field " . . .
var obj = L.layerGroup();
overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
}
var lan = lanArray[Math.floor(Math.random() * lanArray.length)]; //chooses random number from the array, x coordinate
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
lanArray.splice(lanArray.indexOf(lan), 1); //removes the chosen number from the array to avoid repetitions
@ -139,21 +153,25 @@ var callback = function (response) {
var archivingcoordinates = xy(lan, 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 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, 50), html: ' < a href = " ' + url + ' " > ' + pagename + ' < / a > ' });//divIcon is the name, label. There's different types of icons.
//L.circle(archivingcoordinates, {color: 'grey', radius: 5, fillOpacity: 100}).addTo(map); var myIcon = L.divIcon({ iconSize: new L.Point(200, 35), html: ' < a href = " ' + url + ' " > ' + pagename + ' < / a > ' });//divIcon is the name, label.
L.marker(archivingcoordinates, {icon: myIcon}).addTo(map).addTo(obj);
L.marker(archivingcoordinates, {icon: myIcon}).addTo(map).addTo(obj);
dict[pagename] = [lan, lon];//adding to the dictionary the page name and its coordinates
for(var i = 0; i < field.length ; i + + ) { / / for each page , each " field " . . .
overlays[field[i]] = obj; //adds to object "overlays" a key and a value. key is the text displayed, value is group layer
}
dict[pagename] = [lan, lon];//adding to the dictionary the page name and its coordinates
}
}
if (category == "Category:Networking"){
if (category == "Category:Networking"){
var lan1 = lan1Array[Math.floor(Math.random() * lan1Array.length)]; //chooses random number from the array, x coordinate
lan1Array.splice(lan1Array.indexOf(lan1), 1); //removes the chosen number from the array to avoid repetitions
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
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
lon2Array.splice(lon2Array.indexOf(lon2), 1); //removes the chosen number from the array to avoid repetitions
@ -162,13 +180,33 @@ var callback = function (response) {
//var travel = L.polyline([networkingcoordinates, xy(1500, 1200)], {color:'lightgrey', weight: 10, lineCap: 'butt'}).addTo(map);
//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(150, 40 ), html: ' < a href = " ' + url + ' " > ' + pagename + ' < / a > ' });
var myIcon = L.divIcon({ className: 'leaflet-div-icon2', iconSize: new L.Point(150, 35 ), html: ' < a href = " ' + url + ' " > ' + pagename + ' < / a > ' });
//L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
//L.circle(networkingcoordinates, {color: 'blue', radius: 5, fillOpacity: 100}).addTo(map);
L.marker(networkingcoordinates, {icon: myIcon}).addTo(map);
L.marker(networkingcoordinates, {icon: myIcon}).addTo(map);
dict[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
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"
if ( typeof connection != 'undefined' ) { //if there is a "connection"
var connection2 = pages[key].printouts.Connection[0].fulltext; //get the value
var connection2 = pages[key].printouts.Connection[0].fulltext; //get the value
connectionarray.push(connection2, pagename); //add value to array
connectionarray.push(connection2, pagename); //add value to array
@ -181,8 +219,7 @@ var callback = function (response) {
return new Promise(resolve => {
return new Promise(resolve => {
setTimeout(() => {
setTimeout(() => {
resolve('resolved');
resolve('resolved');
console.log(overlays);
//console.log(overlays);
}, 1000);
}, 1000);
});
});
}
}
@ -191,14 +228,24 @@ var callback = function (response) {
console.log('calling');
console.log('calling');
const result = await resolveAfter1Second();
const result = await resolveAfter1Second();
L.control.layers(null, overlays).addTo(map); //null is for no baselayer
var layer = L.control.layers(null, overlays).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);
console.log(result); // expected output: 'resolved'
// expected output: 'resolved'
}
}
asyncCall();
asyncCall();
//connecting with dash lines the pages with connections
//connecting with dash lines the pages with connections
var groups = [];
var groups = [];
@ -213,14 +260,10 @@ var callback = function (response) {
for(var i = 0; i < groups.length ; i + + ) {
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 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 val2 = dict[groups[i][1]]; //gets the value of the second element
var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 2 , dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 1.5 , dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
}
}
//console.log(removeDuplicates(fieldarray));
}; //main function ends
}; //ends big function
var scriptTag = document.createElement("script"); // Dynamically create a "script" tag
var scriptTag = document.createElement("script"); // Dynamically create a "script" tag
scriptTag.src = apiEndpoint + "?" + params + "&callback=callback"; // Point to the query string
scriptTag.src = apiEndpoint + "?" + params + "&callback=callback"; // Point to the query string
