diff --git a/index.htm b/index.htm old mode 100755 new mode 100644 index b3ed315..def8b61 --- a/index.htm +++ b/index.htm @@ -16,8 +16,8 @@
-

Tags

- + +
@@ -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: ' Archiving ' }); +var networkingIcon = L.divIcon({ className: 'leaflet-div-icon4', iconSize: new L.Point(), html: ' Networking ' }); +var linkingIcon = L.divIcon({ className: 'leaflet-div-icon6', iconSize: new L.Point(), html: ' Linking ' }); 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: ' ' + pagename + ' ' });//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: ' ' + pagename + ' ' }); //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: ' ' + pagename + ' ' }); //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