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 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.0lon
is a number between 0.0 and 360.0title
is a String containing the marker's title.
ways edit
KML-Data.
areas edit
See ways.
minlon and maxlon edit
?