User:Abbe98/mapillary.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
(function(mw, $) {
var mapillaryEndpoint = 'https://a.mapillary.com/v3/images?client_id=WHZlUV9FNXhFZ24xZEZQRHZzUlZ3QToyZjg5ZWI2YzQ1Zjg0ZWJm&radius=50&closeto=';
var style = '\
#mapillary-container {\
position: absolute;\
left: 0;\
right: 0;\
top: 0;\
z-index: 3000;\
background: #FFF;\
min-height: 100vh;\
}\
\
#mapillary-close {\
position: fixed;\
top: 5px;\
right: 5px;\
cursor: pointer;\
z-index: 4000;\
}\
\
#mapillary-close:before {\
content: "X";\
}\
\
#mapillary-container span, #mapillary-container a {\
margin-left: 5px;\
}\
\
#mapillary-container img {\
width: 20%;\
}\
';
var styleInject = document.createElement('style');
styleInject.innerHTML = style;
document.head.appendChild(styleInject);
if (window.mw.config.values.wbEntity) {
var coordinateClaim = JSON.parse(window.mw.config.values.wbEntity).claims.P625;
if (coordinateClaim) {
var latitude = coordinateClaim[0].mainsnak.datavalue.value.latitude;
var longitude = coordinateClaim[0].mainsnak.datavalue.value.longitude;
$.ajax({
url: mapillaryEndpoint + longitude + ',' + latitude,
success: function(res) {
if (res.features.length) {
var container = document.createElement('div');
container.id = 'mapillary-container';
container.style.display = 'none';
var containerClose = document.createElement('span');
containerClose.id = 'mapillary-close';
containerClose.addEventListener('click', function() {
container.style.display = 'none';
});
container.appendChild(containerClose);
document.body.appendChild(container);
var navList = document.getElementById('p-tb').lastElementChild.firstElementChild;
var a = document.createElement('a');
a.setAttribute('role', 'button');
var aText = document.createTextNode('Mapillary');
a.appendChild(aText);
a.addEventListener('click', function() {
container.style.display = 'block';
});
var li = document.createElement('li');
li.appendChild(a);
navList.appendChild(li);
res.features.forEach(function(img) {
var html = '<a href="https://www.mapillary.com/app/?focus=photo&pKey=' + img.properties.key + '" target="_blank"><img src="https://d1cuyjsrcm0gby.cloudfront.net/' + img.properties.key + '/thumb-320.jpg" alt="thumbnail" /></a><a href="https://www.mapillary.com/app/user/' + img.properties.username + '">' + img.properties.username + '</a><span>' + img.properties.captured_at + '</span><a href="https://tools.wmflabs.org/mapillary-commons/mapillary2commons?mapillary=' + img.properties.key + '" target="_blank">Import to wikimedia Commons</a>';
var imgCon = document.createElement('div');
imgCon.innerHTML = html;
container.appendChild(imgCon);
});
}
}
});
}
}
})(mediaWiki, jQuery);