temp.js

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 = '<img src="https://d1cuyjsrcm0gby.cloudfront.net/' + img.properties.key + '/thumb-320.jpg" alt="thumbnail" /><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 + '">Import to wikimedia Commons</a>';
            var imgCon = document.createElement('div');
            imgCon.innerHTML = html;
            container.appendChild(imgCon);
          });
        }
      }
    });
  }
}