How to display international boundaries in a OpenLayers map?

Question

I'm interested in displaying only the boundaries, coastlines and between countries, of the world through OSM. I'm a bit lost and I don't know what I should do.

I'm trying to display the OSM through OpenLayers on a website.

This is how I displayed the map through OpenLayers

 var view = new ol.View({
    center: istanbul,
    zoom: 6
  });

  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        preload: 4,
        source: new ol.source.OSM() //OpenStreetMap here
      })
    ],
    // Improve user experience by loading tiles while animating. Will make
    // animations stutter on mobile or slow devices.
    loadTilesWhileAnimating: true,
    view: view
  });

Your question is not clear. In what application are u looking at OSM data? Desktop GIS, webGIS? In short, you can download boundaries from OSM using different tools (http://wiki.openstreetmap.org/wiki/Downloading_data) and build your own map. You can also look at some map tile providers that may only display boundaries. — juminet, Jun 27 '17 at 10:39
@juminet I'm trying to display the OSM through OpenLayers on a website. — utopia, Jun 27 '17 at 10:48
Welcome to GIS SE! As a new user be sure to take the [Tour]. For questions that involve code we ask that you show us where you are stuck with your own code by including a code snippet in your question. There is an [edit] button beneath your question which will enable you to do that and a {} button that enables you to format any highlighted code nicely. — PolyGeo, Jun 27 '17 at 11:21
I have an answer but I cannot answer since it is 'on hold'. @utopia: Could you still improve the question: what kind of boundaries: national ones? — juminet, Jun 27 '17 at 12:00
I'd edit the title like this: "How to display international boundaries in a OpenLayers map? " — juminet, Jun 27 '17 at 12:38

score 1 · Accepted Answer · answered Jun 27 '17 at 16:58

You should not mix the default rendering of OpenStreetMap (which is displayed at openstreetmap.org) and the OpenStreetMap database itself. Actually, you can use the OSM data to create your own custom slippy maps, but that's a big work.

One simple way to answer your question is to display your own layer of the boundaries of the world directly in OpenLayers. You can do it by putting a vector layer in your OpenLayers application:

// Add a boundaries layer
var geojsonSource = new ol.source.Vector({
  url: 'yourboundariesdata.geojson',
  format: new ol.format.GeoJSON()
});

var geojsonLayer = new ol.layer.Vector({
  title: 'Boundaries',
  source: geojsonSource
});

map.addLayer(geojsonLayer);

where yourboundariesdata.geojson hold the boundaries data of the world. See this post on how to get such data, or here. You can transform the GIS data (e.g., in shp) to the geojson format using QGIS. If you are only intesrested in the boundaries of a few countries, you can get geojson layer per country at Mapzen here.

Another solution would be to replace the OSM source (in ol.source.OSM()) by another map provider. See https://mc.bbbike.org/mc/ for quickly comparing different map tile providers.

J.

How to display international boundaries in a OpenLayers map?

1 Answers1