Leaflet map with countries border only

Question

OpenStreetMap by default show significant amount of details with regional language labels. I am using leaflet in a scenario that I only need country borders, their names and a few markers on the map. Is there a provider available for leaflet that shows only countries?

I was also wondering if these maps can be rendered by svg tiles instead of images.

Answer 1

Here is a JSFiddle demo drawing country borders and names:

My JavaScript code is given three 2-letter country codes ("es", "de", "lv") and fetches their borders and display names from Nominatim. Then it draws them on a Leaflet.js map:

'use strict';

function processNominatimReply(data) {
  data.features.forEach(function(feature) {
    bordersGroup.addData(feature);
  });

  var bbox = data.features[0].bbox;
  var topLeft = L.latLng(bbox[1], bbox[0]);
  var bottomRight = L.latLng(bbox[3], bbox[2]);
  var countryBounds = L.latLngBounds(topLeft, bottomRight);

  var name = data.features[0].properties.display_name;
  var tooltip = L.tooltip()
    .setLatLng(countryBounds.getCenter())
    .setContent(name)
    .addTo(namesGroup);

  myMap.flyToBounds(countryBounds);
}

function sendNominatimRequest(countryCode) {
  var url = 'https://nominatim.openstreetmap.org/search?polygon_geojson=1&format=geojson&polygon_threshold=0.1&country=' + countryCode;

  var request = new XMLHttpRequest();
  request.open('GET', url, false);
  request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
      var data = JSON.parse(this.response);
      processNominatimReply(data);
    }
  };
  request.send();
}

var startPosition = [51.4661, 7.2491];
var myMap = L.map('myMap').setView(startPosition, 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);

var namesGroup = L.layerGroup();
myMap.addLayer(namesGroup);
var bordersGroup = L.geoJSON();
myMap.addLayer(bordersGroup);

var overlays = {
  'Show country names': namesGroup,
  'Show country borders': bordersGroup
};

L.control.layers(null, overlays, {
  collapsed: false
}).addTo(myMap);

var countries = ['es', 'de', 'lv'];
countries.forEach(function(country) {
  sendNominatimRequest(country);
});

html, body { 
  margin: 0;
  padding: 0;
}

#myMap {
  position: absolute;
  width: 100%;
  height: 100%;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>

<div id="myMap"></div>

The suggested solution does not require any API keys or payments and my demo source code is free (license: public domain).

If you plan to use it in production, you should install your own Nominatim instance.