WikiMiniAtlas/API

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search

WikiMiniAtlas provides an API for interaction with the iFrame through the JavaScript function postMessage and you can pass arguments as URL parameters. Hash-link navigation is not supported.

Communication with the iFrame - An example[edit]

First, assuming you used the following code to create the iFrame:

var site = ( mw.config.get( 'wgDBname' ) === "commonswiki" ) ? "commons" : mw.config.get( 'wgPageContentLanguage' ),
	lat = 0,
	lon = -60,
	w = 600,
	h = 400,
	zoomlevel = 3,
	userlang = mw.config.get( 'wgUserLanguage' ),
	referrer = (mw.config.get('wgNamespaceNumber') === 0) ? encodeURIComponent(mw.config.get('wgTitle')) : '';

var $iframe = $('<iframe>').attr({
	scrolling: 'no',
	frameBorder: 0,
	'class': 'dschwen'
}).css({
	width: w,
	height: h
}).appendTo(document.body);
$iframe.load(function() {
	// Do something after iFrame was loaded
	furtherStuff();
}).attr('src', '//toolserver.org/~dschwen/wma/iframe.html?' + $.param({
	wma: lat + '_' + lon + '_' + w + '_' + h + '_' + site + 
            '_' + zoomlevel + '_' + userlang,
	globe: 'Earth',
	lang: site,
	page: referrer,
	awt: 0
}));

After the iFrame has been created and was loaded, attach a message handler and post a first request using postMessage():

var $rect = $('<div>').text('I am a rectange with position set to absolute. I was drawn over the iFrame to mark an area.');
var _g360 = function(x) {
		return x % 360;
	},
	_g180 = function(x) {
		if (x > 180) x -= 360;
		return x;
	},
	_l0 = function(x) {
		if (x < 0) x = 360 - x;
		return x;
	};
var messageHub = function(e) {
	var r = $.secureEvalJSON(e.originalEvent.data).response,
		tl = r.topleft,
		rb = r.rightbottom,
		latdiff = rb.lat - tl.lat,
		londiff = _l0(rb.lon - tl.lon),
		iw = $iframe.width(),
		ih = $iframe.height(),
		latPerPx = latdiff / ih,
		lonPerPx = londiff / iw,
		rw = $rect.width(),
		rh = $rect.height(),
		rpos = $rect.position(),
		rt = rpos.top,
		rl = rpos.left,
		lonLeft = tl.lon + lonPerPx * rl,
		lonRight = _g180(_g360(lonLeft + lonPerPx * rw)),
		latTop = tl.lat + latPerPx * rt,
		latBottom = latTop + latPerPx * rh;

	lonLeft = _g180(_g360(lonLeft));
	mw.log("The top left corner of the iFrame shows lon:" + lonLeft + " lat: " + latTop );
};

var furtherStuff = function() {
	mw.loader.using('jquery.json', function() {
		var $win = $(window);
		$win.bind('message', messageHub);
		// Fetch the coordinates of the iframe borders
		$iframe[0].contentWindow.postMessage($.toJSON({
			getcoords: 1
		}), location.protocol + $iframe.attr('src'));
	});
};

URL parameters[edit]

wma[edit]

A list of values separated by underscores. lat_lon_iFrameWidth_iFrameHeight_siteOrLang_zoomlevel_userlang See example.

globe[edit]

The celestial body to show. One of Earth|Moon|Mars|Venus|Mercury|Io|Titan

lang[edit]

The project or language. See example.

page[edit]

The page the iFrame is embedded in. See example.

postMessage parameters[edit]

getcoords[edit]

Returns the coordinates of the top left and the right bottom corner. Note that values from 0.0 to 360.0 are returned for the longitude and 90.0 (North) to -90.0 (South) for the latitude. See example.

coords[edit]

An array of coordinates to show. Example:

var coords = [{
	lat: 1
	lon: 1
	title: "The marker's title"
}, {
	// ...
}];

where

  • lat is a number between -90.0 and 90.0
  • lon is a number between 0.0 and 360.0
  • title is a String containing the marker's title.

ways[edit]

KML-Data.

areas[edit]

See ways.

minlon and maxlon[edit]

?