WikiMiniAtlas/API

From Meta, a Wikimedia project coordination wiki
Jump to: navigation, 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]

?