|
|
| Line 1: |
Line 1: |
| | /* Any JavaScript here will be loaded for all users on every page load. */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
| − |
| |
| − |
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <head>
| |
| − | <title>My Diagram</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="docs/images/favicon.ico"/>
| |
| − | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
| |
| − | <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
| |
| − |
| |
| − | <style>
| |
| − | html, body {
| |
| − | height: 100%;
| |
| − | margin: 0;
| |
| − | }
| |
| − |
| |
| − | #map {
| |
| − | width: 80%;
| |
| − | height: 80%;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − | <p id="name1"></p>
| |
| − | <p> testtttttttt </p>
| |
| − |
| |
| − | <div id='map'></div>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − |
| |
| − | // Leaflet
| |
| − |
| |
| − | var map = L.map('map', {
| |
| − | crs: L.CRS.Simple, //square coordinate reference system
| |
| − | minZoom: -5
| |
| − | });
| |
| − |
| |
| − | 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(1000, 1000)];
| |
| − | var image = L.imageOverlay('IMG_8709.jpg', bounds).addTo(map); //imageOverlay is the map image
| |
| − | map.fitBounds(bounds);
| |
| − |
| |
| − |
| |
| − | // Wiki Api
| |
| − | var apiEndpoint = "http://192.168.1.3/mediawiki/api.php";
| |
| − |
| |
| − | var params ="action=ask&format=json&query=[[Coordinates%3A%3A%2B]]|%3FCoordinates|%3FCategory";
| |
| − | // my query: All pages with coordinates (= all categories and normal pages with coordinates)
| |
| − |
| |
| − | //The function to wrap the result
| |
| − | var callback = function (response) {
| |
| − | var pages = response.query.results;
| |
| − | Object.keys(pages).forEach(function(key) { //getting json keys
| |
| − | var pagename = pages[key].fulltext;
| |
| − | var lat = pages[key].printouts.Coordinates[0].lat ; //getting inside keys printouts > coordinates > 0 > lat
| |
| − | var lan = pages[key].printouts.Coordinates[0].lon ;
| |
| − | console.log(pagename, lat, lan); //printing to console
| |
| − |
| |
| − | // PLacing the Pins
| |
| − | var pointlocation = xy(lat, lan);
| |
| − |
| |
| − | if (pagename.startsWith("Category")) {
| |
| − | L.circle(pointlocation, {color: 'white', radius: 20}).addTo(map).bindPopup(pagename);
| |
| − | //var travel = L.polyline([pointlocation, pointlocation]).addTo(map);
| |
| − | }
| |
| − | else {
| |
| − | L.circle(pointlocation, {color: 'blue', radius: 20}).addTo(map).bindPopup(pagename);
| |
| − | var category = pages[key].printouts.Category[0].fulltext ;
| |
| − | console.log(category, "my category"); //printing to console
| |
| − | var travel = L.polyline([pointlocation, xy(500, 500)]).addTo(map);
| |
| − |
| |
| − | }
| |
| − |
| |
| − | map.setView(xy(500, 500), -1); //1st and 2nd values: where the maps centers. 3rd value: zoom
| |
| − |
| |
| − | });
| |
| − | };
| |
| − |
| |
| − | 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>
| |
