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

?