Create Custom GeoJSON World Map for HighMaps Using QGIS

Posted 4:28 pm by muni & filed under CSS, Highmap, HTML5, JAVASCRIPT, JQUERY, QGIS, Twitter Bootstrap.

In this tutorial we are going to see how to create custom GeoJSON world map for HighMaps using QGIS. HighMaps has generalized version world map, but when you have some custom requirement we need to generate custom GeoJSON from shapefiles (www.naturalearthdata.com).

When we are showing world map in India, we need to show disputed region between India and Pakistan as part of India. When you are showing same world map in Pakistan, you need to show disputed region as part of Pakistan. So here I am generating custom GeoJSON file to show disputed regions as part of India.

Step 1: Download Shapefiles from Naturalearthdata.com

First download shapefile from https://www.naturalearthdata.com/downloads/. I have downloaded 1:50m Cultural Vectors shapefiles.

1. Admin 0 – Countries : Download Countries
2. Admin 0 – Breakaway, disputed areas : Download breakaway and disputed areas

Step 2: Download and Install QGIS

Next go ahead download QGIS from https://qgis.org/en/site/ according to your operating system (Mac, Windows or Linux) and install it.

Step 3: Import ShapeFiles QGIS Editor:

Now extract the downloaded shape-files and import the file that have .shp extension in QGIS editor manually (Data Source Manager -> Vector (add vector layer) -> Vector Dataset) or drag and drop shape-files in layers panel.

Step 4: Merge Multiple Polygons/Features Into Single Polygon/Features Using QGIS:

Next we will remove unwanted disputed polygons in other countries, and only keep disputed regions (polygons/features) between India and Pakistan. Next we will selected all disputed polygons and dissolve it into one big polygon using Vector -> Geoprocessing Tools -> Dissolve option.

Step 4: Merge Two ShapeFiles Using QGIS:

Now next merge the two imported ShapeFile into one Shape file using option Vector -> Data Management Tools -> Merge Vector Layers. Now select both ShapeFiles in input layers by clicking right side button next to input layer txetbox. Finally click on Run in Background button to merge.

Note: While merge this vector shapefiles if you face issue like field datatype mismatch (POP_EST field in layer ne_50m_admin_0_countries has different data type than in other layers (Integer64 instead of Integer)), merge opartion will get aborted. So either you need remove the data fields from both the ShapeFiles or change the datatype in one of the Shapefile.

Step 5: Merge/Dissolve Polygons/Features Into One Polygon Using QGIS

Finally merge India and disputed regions (Polygons) using QGIS. Now enable editing by clicking Toggle Editing, also enable select features by area or click option. Next select two polygons by holding Command key and select Vector -> Geoprocessing Tools -> Dissolve.

It will open popup where check the checkbox of Selected features only option and click on Run in background button in the bottom right corner.

Finally merge the dissolved vector layer and world vector layer into one layer by Vector -> Data Management Tools -> Merge Vector Layers

Step 6: Reproject World Map and Save as GeoJSON Using QGIS

Now reproject world map by pressing Shift + Command + P key, it will open popup where select CRS option. Next in filter textbox type miller, then it will filter miller projection. Now select World Miller Cylindrical projection and click on OK button to reproject.

 +proj=mill +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R_A +datum=WGS84 +units=m +no_defs

Finally save the converted shapefiles as GeoJSON by right click on the shapefile in vector layer panel and select Save as option. Next select format as GeoJSON, CRS as World Miller Cylindrical and select the place where you want save the GeoJSON file by giving name to that.

Step 7: Simplify Shapefile/GeoJSON Polygon Using Mapshaper:

The converted GeoJSON file is more than 5 MB in size, that it will increase the page load time. So we need reduce the converted GeoJSON file size using Mapshaper online tool.

Go to http://mapshaper.org/ site, and drag and drop the GeoJSON file in it. Then using Simplify option on the top right corner of the site to reduce the file size.

Step 8: Draw India with Disputed Regions World Map Using HighMaps:

Create new project called custom-highmap in your project folder, and add index.html file in it. Next copy paste following HTML5 snippet in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cutom World Highmaps</title>
</head>
<body>
    <div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://code.highcharts.com/maps/highmaps.js"></script>

    <script>
        var map = $.getJSON("./data/world-map.geojson");
        var data = $.getJSON("./data/data.json");

        Promise.all([map, data]).then(function (values) {
            var mapData = values[0];
            var data = values[1];

            $('#container').highcharts('Map', {
                legend: {
                    enabled: false
                },
                title: {
                    text: 'World map'
                },
                mapNavigation: {
                    enabled: true
                },
                series: [
                    {
                        name: 'Countries',
                        mapData: mapData,
                    }, 
                    {
                        name: 'Points',
                        type: 'mappoint',
                        data: data
                    }
                ]
                
            });

        });     
    
    </script>
</body>
</html>

Next add data folder in your project root folder to keep data.json and world.geojson file. Create data.json file in data folder and add the following data in it.

[{
    "name": "London",
    "lat": 51.507222,
    "lon": -0.1275
}, {
    "name": "Moscow",
    "lat": 55.7500,
    "lon": 37.6167
}, {
    "name": "Beijing",
    "lat": 39.9167,
    "lon": 116.3833
}, {
    "name": "Washington D.C.",
    "lat": 38.889931,
    "lon": -77.009003
},{
    "name": "Chennai",
    "lat": 13.0827,
    "lon": 80.2707
},{
    "name": "Delhi",
    "lat": 28.7041,
    "lon": 77.1025
},{
    "name": "Bangalore",
    "lat": 12.9716,
    "lon": 77.5946
}]

Finally add hc-transform to support latitude/longitude functionality in world.geojson file like in the below image.

"hc-transform":{ 
    "default":{
        "crs":"+proj=mill +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +R_A +datum=WGS84 +units=m +no_defs"
    }
}

Add hc-transform to geojson file for Highmap to support latitude/longitude functionality for using the Proj4js library to convert between projections