Wiki ♥ Earth Map

by Édouard Hue

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div id="map" class="map">
    <div id="popup"></div>
</div>

CSS

.popover {
    width: 480px;
}

.popover p.description {
    font-size: smaller;
}

.popover p.links img {
    width: 16px;
    margin-left: 4px;
    margin-right: 4px;
}

JavaScript

console.clear();

// Query limitation on Commons API
var maxCommonsQueryItems = 50
// Center of France according to Q2945355
var centerOfFrance = ol.proj.transform([1.87528, 46.60611], 'EPSG:4326', 'EPSG:3857');

/*
 * Styles
 */

var stroke = new ol.style.Stroke({
    color: '#ffffff'
});
var fill = new ol.style.Fill({
    color: '#45966e'
});

var parkStyle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 10,
        stroke: stroke,
        fill: fill
    })
});

var reserveStyle = new ol.style.Style({
    image: new ol.style.RegularShape({
        radius: 8,
        points: 4,
        stroke: stroke,
        fill: fill
    })
});

/*
 * Features sources and layers
 */

var parksSource = new ol.source.Vector({});
var parksLayer = new ol.layer.Vector({
    source: parksSource,
    style: parkStyle
});

var reservesSource = new ol.source.Vector({});
var reservesLayer = new ol.layer.Vector({
    source: reservesSource,
    style: reserveStyle
});

/*
 * Map
 */

var map = new ol.Map({
    view: new ol.View({
        center: centerOfFrance,
        zoom: 5
    }),
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    }), parksLayer, reservesLayer],
    target: document.getElementById('map')
});

var popup = new ol.Overlay({
    element: $('#popup'),
    positioning: 'top-center'
});
map.addOverlay(popup);

var frwikipediaLogoUrl = 'https://upload.wikimedia.org/wikipedia/commons/d/d1/Wikipedia-logo-v2-fr.svg';

var buildPopupContent = function (feature) {
    var content = new String();
    
    content += '<p class="description">';
    content += feature.get('payload').description;
    content += '</p>';
    
    content += '<p class="links">';
    
    content += '<a href="';
    content += 'https://tools.wmflabs.org/reasonator/?lang=fr&q='
    content += feature.get('payload').id;
    content += '"><img alt="Reasonator" src="https://upload.wikimedia.org/wikipedia/commons/b/ba/Wikidata-Reasonator_small_logo.svg"></a>';

  ...