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

Upload files to ''

Browse Source 
new styling + fixed query
master
rita 4 years ago
parent 5e7257590e
commit 270699a812
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File

43
index.htm
Unescape Escape View File

@ -16,8 +16,8 @@
<div class="tags_menu">
<div class="tags_header">
<h1>Tags</h1>
<button onclick="myDropmenu()" class="dropbtn"> </button>
<button onclick="myDropmenu()" class="dropbtn"> <h1>Explore tags</h1> </button>
</div>
<div id="myDropdown" class="dropdown-content">
@ -66,12 +66,12 @@ map.setView(xy(1050, 750), -1); //1st and 2nd values: where the maps centers. 3r
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|limit=100";
//Main categories with static location:
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' });
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);
@ -92,34 +92,36 @@ var overlayAnnotated = {
// making random coordinates for the points
//in archiving
var lanArray = [];
for (var i = 1; i <= 50; i++) { //in 3+4th quadrant
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 <= 50; i++) {
for (var i = 1; i <= 45; i++) {
lonArray.push(i * 15);
}
//in networking
var lan2Array = [];
for (var i = 25; i <= 50; i++) {//2nd quadrant
for (var i = 25; i <= 45; i++) {//2nd quadrant
lan2Array.push(i * 50);
}
var lon2Array = [];
for (var i = 15; i <= 30; i++) {
for (var i = 15; i <= 33; i++) {
lon2Array.push(i * 50);
}
//in linking
var lan3Array = [];
for (var i = 1; i <= 20; i++) {//1st quadrant
for (var i = 1; i <= 15; i++) {//1st quadrant
lan3Array.push(i * 50);
}
var lon3Array = [];
for (var i = 15; i <= 25; i++) {
for (var i = 20; i <= 30; i++) {
lon3Array.push(i * 50);
}
@ -135,6 +137,7 @@ var callback = function (response) {
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"){
@ -147,11 +150,12 @@ var callback = function (response) {
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);
var marker = L.marker(archivingcoordinates, {icon: myIcon, riseOnHover: true})//.addTo(map);
for(var i = 0; i < fields.length; i++) { //for each page, each "field"...
@ -172,7 +176,7 @@ var callback = function (response) {
var category_annotated2 = pages[key].printouts.Category[2].fulltext;
marker.addTo(annotated);
map.addLayer(annotated);
console.log(annotated);
//console.log(annotated);
} else{
marker.addTo(not_annotated);
map.addLayer(not_annotated);
@ -195,7 +199,7 @@ var callback = function (response) {
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);
L.marker(networkingcoordinates, {icon: myIcon, riseOnHover: true}).addTo(map);
dict_coordinates[pagename] = [lan1, lon2];//adding to the dictionary the page name and its coordinates
}
@ -215,7 +219,10 @@ var callback = function (response) {
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);
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
@ -268,6 +275,7 @@ var callback = function (response) {
//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.
@ -280,7 +288,8 @@ var callback = function (response) {
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
var travel = L.polyline([xy(val1), xy(val2)], {color:'lightgrey', weight: 1.5, dashArray: '10', lineCap: 'butt'}).addTo(map); //makes line. Done!
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

Write Preview
Loading…
Cancel
Save