MediaWiki:Common.js
Jump to navigation
Jump to search
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* 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>
