Wiki ♥ Earth Map

by Édouard Hue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<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">
<div id="map" class="map">
    <div id="popup"></div>
</div>

CSS

.popover {
    width: 480px;
}

JavaScript

$.getJSON("https://wdq.wmflabs.org/api?q=CLAIM[31:(TREE[2828309][][279])] AND NOCLAIM[31:19698111]&callback=?", function (data) {
    var slices = [];
    for (var i = 0; i < data.items.length; i += 50) {
        slices.push(data.items.map(function (id) {
            return "Q" + id;
        }).slice(i, i + 50));
    }

    var vectorSource = new ol.source.Vector({});

    $.each(slices, function (i, slice) {
        $.getJSON("https://www.wikidata.org/w/api.php?action=wbgetentities&ids=" + slice.join("|") + "&sitefilter=frwiki&languages=fr&props=labels|sitelinks/urls|descriptions|claims&format=json&callback=?", function (entities) {
            $.each(entities.entities, function (id, entity) {
                var node = {
                    id: entity.id,
                    label: 'labels' in entity && 'fr' in entity.labels ? entity.labels.fr.value : "",
                    description: 'descriptions' in entity && 'fr' in entity.descriptions ? entity.descriptions.fr.value : "",
                    frwp: 'sitelinks' in entity && 'frwiki' in entity.sitelinks ? {
                        title: entity.sitelinks.frwiki.title,
                        url: entity.sitelinks.frwiki.url
                    } : null,
                    commonscat: entity.claims.P373 in entity ? entity.claims.P373[0].mainsnak.datavalue.value : null,
                    nature: entity.claims.P31[0].mainsnak.datavalue.value['numeric-id'],
                    coordinates: ol.proj.transform([entity.claims.P625[0].mainsnak.datavalue.value.longitude, entity.claims.P625[0].mainsnak.datavalue.value.latitude], 'EPSG:4326', 'EPSG:3857')
                };
                var feature = new ol.Feature({
                    geometry: new ol.geom.Point(node.coordinates),
                    labelPoint: new ol.geom.Point(node.coordinates),
                    name: node.label,
                    payload: node
                });
                vectorSource.addFeature(feature);
            });
       ...