|
|
| (94 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <!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" href="./style.css"/>
| |
| − | <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
| |
| − | </head>
| |
| | | | |
| − | <body>
| + | {{#css: |
| | | | |
| − | <div id='map'></div>
| + | #content{ |
| | + | margin-left: 0; |
| | + | padding: 0; |
| | + | } |
| | | | |
| | | | |
| − | <script>
| + | h1{ |
| | + | display: none; |
| | + | } |
| | | | |
| − | // Leaflet
| + | .mw-body-content p { |
| − | var map = L.map('map', {
| + | max-width: 100%; |
| − | crs: L.CRS.Simple, //changes coordinate reference system to a x,y one instead of map cartesian coordinates
| + | position: fixed; |
| − | minZoom: -5
| + | width: 100%; |
| − | });
| + | height: 100%; |
| − | | + | left: 0; |
| − | var yx = L.latLng;
| + | top: 0; |
| − | | + | display: block; |
| − | var xy = function(x, y) {
| + | margin-top: 0; |
| − | 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(2500, 1500)];
| |
| − | | |
| − | var image = L.imageOverlay('', bounds).addTo(map); //imageOverlay is the map image
| |
| − | map.fitBounds(bounds);
| |
| − | | |
| − | map.setView(xy(1250, 750), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
| |
| − | | |
| − | | |
| − | // Wiki Api
| |
| − | var apiEndpoint = "http://192.168.1.3/mediawiki/api.php";
| |
| − | | |
| − | var params ="action=ask&format=json&query=[[Diagram%3A%3Ainclude]] |%3FCategory |%3FConnection";// my query: All pages with property "diagram::include". Show "category", show "connection".
| |
| − | | |
| − | // "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.
| |
| − | // "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".
| |
| − | | |
| − | //Main categories static location:
| |
| − | var myIcon1 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Archiving' });
| |
| − | var myIcon2 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Networking' });
| |
| − | var myIcon3 = L.divIcon({ iconSize: new L.Point(60, 40), html: 'Linking' });
| |
| − | 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 dictionary will store page names and their coordinates
| |
| − | var connectionarray = []; //this array will store page names and their connections
| |
| − | | |
| − | //The function to wrap the result
| |
| − | 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 connection = pages[key].printouts.Connection[0];
| |
| − | console.log(pagename, category); //printing to console
| |
| − | | |
| − | // Placing the pins
| |
| − | // This separation between categories is for the future, if I want different categories to have different visuals.
| |
| − | var lan= Math.floor(Math.random() * (2500 - 0) + 0) + 1;//random number but in 3+4th quadrant
| |
| − | var lon = Math.floor(Math.random() * (750 - 0) + 0) + 1;//3+4th quadrant
| |
| − | | |
| − | var lan1= Math.floor(Math.random() * (2500 - 1250) + 1250) + 1; //2nd quadrant
| |
| − | var lon2 = Math.floor(Math.random() * (1500 - 750) + 750) + 1; //2nd quadrant
| |
| − | | |
| − | var archivingcoordinates = xy(lan, lon)
| |
| − | var networkingcoordinates = xy(lan1, lon2);
| |
| − | | |
| − | if (category == "Category:Archiving"){
| |
| − | //L.circle(archivingcoordinates, {color: 'blue', radius: 20, fillOpacity: 0}).addTo(map).bindPopup(' <a href=" ' + url + ' "> ' + pagename + ' </a> ');
| |
| − | var travel = L.polyline([archivingcoordinates, xy(1000, 400)], {color:'lightgrey', weight: 20}).addTo(map);//connect all to "Category: Archiving"
| |
| − | var myIcon = L.divIcon({ iconSize: new L.Point(150, 50), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
| |
| − | L.marker(archivingcoordinates, {icon: myIcon}).addTo(map);
| |
| − | dict[pagename] = [lan, lon];//adding to the dictionary the name and coordinates
| |
| − | }
| |
| − | | |
| − | if (category == "Category:Networking"){
| |
| − | //L.circle(networkingcoordinates, {color: 'white', radius: 20, fillOpacity: 0}).addTo(map).bindPopup(' <a href=" ' + url + ' "> ' + pagename + ' </a> ');
| |
| − | var travel = L.polyline([networkingcoordinates, xy(1600, 1200)], {color:'lightgrey', weight: 20}).addTo(map);
| |
| − | var myIcon = L.divIcon({ iconSize: new L.Point(150, 40), html: ' <a href=" ' + url + ' "> ' + pagename + ' </a> ' });
| |
| − | L.marker(networkingcoordinates, {icon: myIcon}).addTo(map);
| |
| − | dict[pagename] = [lan1, lon2];//adding to the dictionary the name and 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
| |
| − | //console.log("I have a connection with the following page: " + connection2); //printing property::Connection
| |
| − | //console.log(connectionarray)
| |
| − | }
| |
| − | });
| |
| − | | |
| − | //Connect the connections (out of the loop)
| |
| − | for (var i = 0; i < connectionarray.length - 1; i += 2) { //gets pairs from the array (1,2) (2,3) (3,4)
| |
| − | var val1 = dict[connectionarray[i]];
| |
| − | var val2 = dict[connectionarray[i + 1]];
| |
| − | //console.log(val1, val2)
| |
| − | var travel = L.polyline([xy(val1), xy(val2)], {color:'blue', weight: 2, dashArray: '10'}).addTo(map); //connects page and their connection
| |
| − | }
| |
| − | | |
| − | //console.log(dict)
| |
| − | }; | |
| − | | |
| − | 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>
| |
| | | | |
| | + | <html> |
| | + | <head> |
| | + | <base target="_parent"> |
| | + | </head> |
| | + | <body> |
| | + | <iframe src="https://hub.xpub.nl/networksofcare/map.htm" height="100%" width="100%" frameBorder="0"></iframe> |
| | </body> | | </body> |
| | </html> | | </html> |
