Difference between revisions of "MediaWiki:Common.js"

From Networks of Care
Jump to navigation Jump to search
(Created page with "→‎Any JavaScript here will be loaded for all users on every page load.: $(function () { var myElement = document.getElementById('mw-mywiki-example'); myElement.innerHTM...")
 
Line 2: Line 2:
  
  
−
$(function () {
+
<!DOCTYPE html>
−
var myElement = document.getElementById('mw-mywiki-example');
+
<html>
−
myElement.innerHTML = '<p> Hello! </p>';
+
<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>

Revision as of 17:41, 28 March 2020

/* 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>
Retrieved from "http://hub.xpub.nl/networksofcare/mediawiki/index.php?title=MediaWiki:Common.js&oldid=164"