Create a map with Highcharts and OpenStreetMap

Creating a tiled web map with points of interest is a great way to represent data on a map visually. In this tutorial, I will guide you through the process of creating a Chinese tiled web map using Highcharts and OpenStreetMap. I will focus on showcasing the world heritage sites in China obtained from the unesco.org website. You can easily create your own interactive map by following these simple steps.

Let’s get started 🙂

The first step is to get the data. For this tutorial, I use the Chinese world heritage sites data I retrieved from the unesco.org website. The data should include the name, image, and geo-location of each world heritage site. Here is an example of code structure for a single location:

{
  name: "The Great Wall",
  image: "https://whc.unesco.org/uploads/sites/site_438.jpg",
  lon: 116.08333,
  lat: 40.41667
}

Then, I split the data into three layers on the map: cultural, natural, and mixed, based on the classification of the sites, where each dataset has its own color and marker. A red square marker for cultural sites, a green triangle for natural sites, and a blue circle for mixed sites. The data code section looks like this:

{
  type: "mappoint",
  name: "Cultural",
  color: "#DE3163",
  marker: {
    symbol: "square"
  },
  data: [...]
} {
  type: "mappoint",
  name: "Natural",
  color: "#088F8F",
  marker: {
    symbol: "triangle"
  },
  data: [...]
} {
  type: "mappoint",
  name: "mixed",
  color: "#0096FF",
  marker: {
    symbol: "circle"
  },
  data: [...]
}

To visualize the locations on a map, I use Highcharts Maps and the OpenStreetMap for the map tiles. This process is super easy since Highcharts Maps is doing all the work behind the scene, and all I have to do is to add the tiledwebmap.js module to my project and then include the following code snippet:

{
   type: "tiledwebmap",
   name: "Basemap Tiles",
   provider: {
     type: "OpenStreetMap"
   },
   showInLegend: false
 }

This code sets up the map type as tiledwebmap and OpenStreetMap as the provider.

Now that the basic map is set up, it’s time to incorporate the data. Loop through each location in your dataset and add it to the map:

{
  name: "The Great Wall",
  image: "https://whc.unesco.org/uploads/sites/site_438.jpg",
  lon: 116.08333,
  lat: 40.41667
}, {
  name: "Imperial Palaces of the Ming and Qing Dynasties in Beijing and Shenyang",
  image: "https://whc.unesco.org/uploads/sites/site_439.jpg",
  lon: 123.4469444,
  lat: 41.79416667
}, {
  name: "Mogao Caves",
  image: "https://whc.unesco.org/uploads/sites/site_440.jpg",
  lon: 94.81667,
  lat: 40.13333
},

One important tip to add is to focus on a specific area, in this case, China, without clipping the map, regardless of the screen size. To do that, I use the magic option fitToGeometry:

const countryGeometry = geojson.features.find(
  (f) => f.properties.name === "China"
).geometry;…
mapView: {
  fitToGeometry: countryGeometry
},

Now, I am sure that the country of interest is always at the center of the screen.

And that is it. Now, you know how to create a map using Highcharts and OpenStreetMap.
Creating a tiled web map with points of interest is an effective way to visualize data on a map. By combining Highcharts’ maps features with the OpenStreetMap provider, you can easily create interactive maps showcasing world heritage sites or any other points of interest.