WikiMiniAtlas/API

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

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

wma

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

globe

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

lang

The project or language. See example.

page

The page the iFrame is embedded in. See example.

postMessage parameters

getcoords

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

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

KML-Data.

areas

See ways.

minlon and maxlon

?