Search code examples
openstreetmap

How to generate "highlighted country" maps

How can I generate a map like this using OSM? I want the map to highlight single country and fade others. Also, if the country is small I want to show it on the globe in a small thumbnail.

enter image description here

Solution

  • Oke let’s using JavaScript, because I think there is the biggest variety of libraries. Here I will explain a few approaches creating an interactive webmap.

    1) The first approach is using plain svg:

    You can download or draw with your vector software of choice the base map as svg. Then you could assign every country polygon a unique ID, and inside JS you can access the SVG with a mouseevent like click or mouseover. All the information of the country could be stored outside JS in a .json (easier) or .xml file. With the ID you getting from the SVG event you can get the fitting information from your .json. Maybe that reinvent the wheel, but it’s highly adjustable. But I think if you only want a static maps its simpler if you are using a more complex library.

    2) The second approach is using a library for svg interaction:

    The very popular D3.js or Raphael.js

    3) The third approach is using a thematic webmapping library based on svg:

    Use JQVMAP (former vectormap.js) or the very new austrian project mapmap.js

    4) Use a topographic webmapping library

    Here you can use the open libraries leaflet.js or openlayers.js. With these, the best approach will be, that you add your countries as a .geojson. Geojson is a very nice format that allows you interacting with your countries with the most geographical softwares.

    5) Create und use your own tiles

    This approach is the most performant solution but not the simplest to implement. Here is a very nice tutorial explaining five approaches. But I think the simplest is using TileMill.

    6) Using a mapserver If you are not familiar with mapservers, this should only be considered when you are going to implement an extensive application. Nice Mapservers are Deegree and the popular Geoserver.

    All of these approaches have their pros und cons but I think one of these solutions will fit your needs and I wish you the best successes!