31:T63a,viewof map = { // From https://observablehq.com/@tmcw/using-mapbox-gl-js // Create the map container const container = html`

`; const infoContainer = html`

Map with country names

Translation coverage:
of 243 names

Zoom in to see additional country labels in the local language.

Notes:

Most languages have translation identical to English.
Certain scripts may have incorrect rendering in GL

`; container.appendChild(infoContainer); const mapContainer = html`

`; container.appendChild(mapContainer); yield mapContainer; yield container; // Inititalize the GL map let map = addMap({ container: mapContainer, center: [0, 20], zoom: 1 }); // Wait until the map loads. map.on("load", () => { addLayers(map, mapLayers); map.setLayoutProperty('country-label-lg', 'visibility', 'none'); map.setLayoutProperty('country-label-md', 'visibility', 'none'); map.setLayoutProperty('country-label-sm', 'visibility', 'none'); container.value = map; container.dispatchEvent(new CustomEvent("input")); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }32:T5b2,mapLayers = ({ source: { 'adm0-points': { type: 'geojson', data: { type: 'FeatureCollection', features: [] } } }, layer: { 'adm0-label': { type: 'symbol', source: 'adm0-points', filter: [">=", ["zoom"], ["get", "z_min"]], layout: { 'text-field': [ "step", ["zoom"], ["get", "name"], 3, [ "format", ["get", "name"], { "text-color": "#000000" }, [ "case", [ "==", ["coalesce", ["get", "name"], ["get", "names"]], ["get", "names"] ], "", ["concat", "\n", ["get", "names"]] ], { "text-color": "red", "font-scale": 0.5 } ] ], 'text-font': ["DIN Pro Medium", "Arial Unicode MS Regular"], 'text-size': [ "interpolate", ["cubic-bezier", 0.2, 0, 0.7, 1], ["zoom"], 1, ["step", ["get", "symbolrank"], 11, 4, 9, 5, 8], 9, ["step", ["get", "symbolrank"], 28, 4, 22, 5, 21] ], 'text-max-width': 6, 'text-line-height': 1.1, 'symbol-sort-key': ['/', 1, ['get', 'area_sqkm']] }, paint: { 'text-color': 'red', 'text-halo-color': 'white', 'text-halo-width': 1 } } } })33:[] 2f:{"title":"Country names in any language","cells":[{"id":0,"value":"md`# Country names in any language\n\nUse this interactive tool to explore the country names in every language in the world. The crowdsourced translations are fetched live from [Wikidata](https://www.wikidata.org/) and plotted on an [OpenStreetMap basemap](http://openstreetmap.org). Built using [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/examples/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"viewof selectedLanguage = autoSelect({\n title: \"Language\",\n options: Object.keys(languageData.languages).map(\n k => `[${k}] ${languageData.languages[k][2]}`\n ),\n value: \"[hy] հայերեն\",\n description:\n \"Search language by [code] or native name. Try [la], [hy], [bs]..\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"viewof enableWikimediaMap = checkbox({\n description: `Show localised OpenStreetMap raster tiles from Wikimedia Maps in ${languageName}`,\n options: [\n {\n value: \"toggle\",\n label: `Translated basemap`\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`## Country translation list`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"table(geoJSON.features.map(i => i.properties), {\n columns: [\n {\n key: 'iso_3166_1',\n name: `ISO country code`\n },\n {\n key: 'qid',\n name: 'Wikidata QID',\n render: val =>\n `${val}`\n },\n {\n key: 'name',\n name: `Translated name in [${language}]`\n },\n {\n key: 'names',\n name: `Local names`\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"// Toogle translated basemap from OSM/Wikimedia Maps\n{\n // Remove existing layer if it is already on the map\n if (map.getSource('wikimedia-tiles')) {\n map.removeLayer('wikimedia-tiles');\n map.removeSource('wikimedia-tiles');\n }\n\n if (enableWikimediaMap) {\n // Add tile layer\n map.addLayer({\n id: 'wikimedia-tiles',\n type: 'raster',\n source: {\n type: 'raster',\n\n tiles: [\n \"https://api.allorigins.win/raw?url=\" +\n `https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png?lang=${language}`\n ],\n tileSize: 256\n }\n });\n\n // Set map zoom to 2 which is the minimum for the localised labels in the tiles\n if (map.getZoom() < 2) {\n map.setZoom(2);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"language = selectedLanguage ? /\\[(.*?)\\]/g.exec(selectedLanguage)[1] : 'en'","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"languageName = selectedLanguage\n ? /\\s.*/g.exec(selectedLanguage)[0].trim()\n : 'English'","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"geoJSON = {\n let qids = [];\n\n // Join additional properties\n adm0Labels.features.map(item => {\n // Collect all qids for label localisation\n if (item.properties.hasOwnProperty('qid')) {\n qids.push(item.properties.qid);\n }\n\n return item;\n });\n\n // Get localised labels from Wikidata using the qid\n translateQids(qids, [language]).then(data => {\n // Join properties from Wikidata\n adm0Labels.features.map(item => {\n // Add translation if it exists\n if (\n data[item.properties.qid].hasOwnProperty(language) &&\n data[item.properties.qid][language]\n ) {\n item.properties['name'] = data[item.properties.qid][language];\n } else {\n item.properties['name'] = null;\n }\n return item;\n });\n\n //Update map data\n map.getSource('adm0-points').setData(adm0Labels);\n });\n\n return adm0Labels;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"stats = {\n let stats = {};\n\n // Calculate translation coverage\n let count = 0;\n geoJSON.features.forEach(item => {\n if (item.properties.hasOwnProperty('name') && item.properties['name'])\n count++;\n });\n document.getElementById('count').innerHTML = `${parseInt(\n (count / 245) * 100\n )}%`;\n\n document.getElementById('language-name').innerHTML = languageName;\n\n stats['translations'] = count;\n\n return stats;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`### Sources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md` #### Country label locations\n\nThis was generated from the [mapbox-streets vector tiles/place_label layer](https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v8/#overview) and has an additional Wikidata 'qid' property for each country label.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"adm0Labels = d3.json(\n 'https://gist.githubusercontent.com/planemad/32892648660d9a7dbd7d9fede19728e2/raw/be142261a0cadba961eed7d985fd15fbba2b2dfd/mapbox-country-labels.geojson'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"md` #### Language list\n\nThis was sourced from the [Wikimedia ULS project](https://github.com/wikimedia/jquery.uls/blob/master/src/jquery.uls.data.js) and is used to build the language list in the dropdown selector.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"languageData = d3.json(\n \"https://gist.githubusercontent.com/planemad/e7e22ac19d6c78df30f844a8fcb86916/raw/61a437269c1cf8e29810aaeb56f4e95945d2b14d/wikimedia-uls-languages.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"accessToken = \"pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2s4bnI0bWN0MTE1MzNlcXN0a2M4aTJzYiJ9.N9PCXHPAeJb4N6lBd2_a0Q\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"import { mapboxgl } with { accessToken } from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import { select, autoSelect, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"import { addMap, addLayers } from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"import { translateQids } from \"@planemad/query-wikidata\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"mapboxgl.setRTLTextPlugin(\n 'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',\n null,\n true // Lazy load the plugin\n)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}