Share via

can you construct a choropleth map with the following labels

Dye, Lakendra [UCM] 0 Reputation points
2025-02-17T17:36:26.2966667+00:00
  1. Construct a choropleth map with the following labels
  • Equator
  • Prime Meridian
  • Europe
  • Russia & the Near Abroad (Russia and its Periphery)
  • Middle East and North Africa
  • South and East Asia
  • Oceania
  • Sub-Saharan Africa
  • Latin America
  • United States & Canada
  • Antarctica
  • Atlantic Ocean
  • Pacific Ocean
  • Indian Ocean
  • Arctic Ocean
  • Southern Ocean
Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
791 questions

2 answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. rbrundritt 19,216 Reputation points Microsoft Employee
    2025-02-18T17:22:18.08+00:00

    This is a pretty generic question. The answer is YES, you can do that. However, there are a lot of things you need to think through to be able to do this.

    To create a choropleth you need the polygons for these areas. Azure Maps does not provide boundary data for anything other than landmass at the country regions level and below. So, you will need to first find a data set to use. I suspect you can find these online fairly easily in different formats. GeoJSON would be the easiest to use with Azure Maps. For example: https://geojson-maps.kyd.au/

    The next thing you need to consider is the resolution of the data you want to use. The higher the accuracy the data, the larger it becomes. High resolution data could easily be hundreds of megabytes which would be slow for users to download, and slow to render. Given that your data spans the globe, I suspect that users would be viewing the data when zoomed out, so low resolution data should work well for your scenario. If you need the highest accuracy possible, then you will need to either need to convert the data into a more efficient format, like vector tiles, or render it server side and overlay it overtop the map.

    Note that the equator and prime meridian are lines, not areas, so you will either want to use a thick line and color that, or buffer them a bit to create a polygon.

    Once you have the data, it becomes pretty easy to create a choropleth. Simply import the data into a data source, and use a data driven style expression on a polygon layer that looks at some unique property in your data (e.g. name or id) or metric (e.g. revenue) and assign colors as desired. For example: https://samples.azuremaps.com/?sample=create-a-choropleth-map

    0 comments
  2. rbrundritt 19,216 Reputation points Microsoft Employee
    2025-02-20T01:25:06.3866667+00:00

    Looking closer at the data you are looking for, there are certainly a lot of geopolitical things you need to take into consideration for your solution. For example, "Middle East & Africa" has a lot of different groupings of country/regions depending on the view of the world you go by: https://en.wikipedia.org/wiki/Middle_East_and_North_Africa

    I'm assuming this is for some sort of history related map given the ask for "Russia & the Near Abroad (Russia and its Periphery)". https://en.wikipedia.org/wiki/Post-Soviet_states

    I had a few hours today so I took a stab at putting together a data set for you using various open data sets like this one: https://old.datahub.io/dataset/world-boundaries/ I used QGIS to go through and select/merge country/regions and clean things up. QGIS is an open source and a very powerful desktop tool for managing and editing spatial data. Here is the GeoJSON file I generated in medium resolution (15MB file size): https://rbrundritt.azurewebsites.net/Demos/AzureMaps/CustomChoroplethRegions/CustomRegions.geojson

    I created a simple choropleth map using the following code. Since there are a small number of areas I just set the color based on the name of each area rather than doing anything fancy based on some metric. I disabled the base map styles of Azure Maps as they showed boarders and labels that likely don't align with what you are looking for. If you hover over the map with the mouse a popup will display a label for the area.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Choropleth Region Map</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>

    <script>
        var map, datasource, popup;

        function getMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [0, 0],
                zoom: 1,
                view: 'Auto',

                //Using blank style since we don't need any of the base map data (borders, names...).
                style: 'blank',

                //Add authentication details for connecting to Azure Maps.
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: 'Your Azure Maps Key'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Create a popup but leave it closed so we can update it and display it later.
                popup = new atlas.Popup({
                    position: [0, 0]
                });

                //Create a data source and add it to the map.
                datasource = new atlas.source.DataSource();
                map.sources.add(datasource);

                //Create a layer to render the polygon data.
                var polygonLayer = new atlas.layer.PolygonLayer(datasource, null, {
                    //Do a simple match by name to assign color.
                    fillColor: [
                        'match',
                        ['get', 'name'],

                        //Country regions
                        'Antarctica', '#ffffcc',
                        'Europe',  '#ffeda0',
                        'Latin America',  '#fed976',
                        'Middle East and North Africa',  '#feb24c',
                        'Oceania',  '#fd8d3c',
                        'Russia & the Near Abroad',  '#fc4e2a',
                        'South and East Asia',  '#e31a1c',
                        'Sub-Saharan Africa',  '#bd0026',
                        'United States & Canada',  '#800026',

                        //Oceans
                        'Arctic Ocean', '#74a9cf',
                        'Atlantic Ocean', '#3690c0',
                        'Indian Ocean', '#0570b0',
                        'Pacific Ocean', '#045a8d',
                        'Southern Ocean', '#023858',

                        //Default color incase there is any data we haven't assigned a color to.
                        '#FF0000'
                    ],

                    //Removing opacity so that we don't see boards from the base map.
                    fillOpacity: 1
                });
                map.layers.add(polygonLayer);

                //Add a mouse move event to the polygon layer to show a popup with information.
                map.events.add('mousemove', polygonLayer, function (e) {
                    if (e.shapes && e.shapes.length > 0) {
                        var properties = e.shapes[0].getProperties();

                        //Update the content of the popup.
                        popup.setOptions({
                            content: '<div style="padding:10px"><b>' + properties.name + '</b></div>',
                            position: e.position
                        });

                        //Open the popup.
                        popup.open(map);
                    }
                });

                //Add a mouse leave event to the polygon layer to hide the popup.
                map.events.add('mouseleave', polygonLayer, function (e) {
                    popup.close();
                });

                //Add a line layer for the Equator and Prime Meridian.
                var lineLayer = new atlas.layer.LineLayer(datasource, null, {
                    strokeColor: [
                        'match',
                        ['get', 'name'],
                        'Equator', 'yellow',
                        'Prime Meridian', 'green',

                        //Default color.
                        'transparent'
                    ],
                    strokeWidth: 2,

                    //Don't render lines for anything by linestrings.
                    filter: ['==', ['geometry-type'], 'LineString']
                });
                map.layers.add(lineLayer);

                /** 
                 * Currently hiding the below as it displays multiple labels on the map due to multipolygon's and vector tiles.
                 * It might be better to create a set of points for the labels and add that seperately, so there is one label per region.
                 * This would allow for customizing the location of the label.
                 */

                // //Add a symbol layer to display the region names.
                // var symbolLayer = new atlas.layer.SymbolLayer(datasource, null, {
                //     iconOptions: {
                //         //Hide the default image. 
                //         image: 'none'
                //     },
                //     textOptions: {
                //         textField: ['get', 'name'],
                //         size: 12,
                //         color: 'white',
                //         offset: [0, 0.5]
                //     },
                //     //Don't render symbols for anything by polygons.
                //     filter: ['==', ['geometry-type'], 'Polygon']
                // });
                // map.layers.add(symbolLayer);

                //Download a GeoJSON data for the custom regions and add it to the data source.
                datasource.importDataFromUrl('CustomRegions.geojson');

                //Add the line data for Equator and Prime Meridian.
                datasource.importDataFromUrl('EquatorAndPrimeMeridian.geojson');
            });
        }
    </script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        #myMap {
            position: relative;
            height: 100%;
            width: 100%;
            background-color: #ccc; /* Setting a background color for the map. This will show through any areas where there is not data. */
        }
    </style>
</head>
<body onload="getMap()">
    <div id="myMap"></div>
</body>
</html>

    I didn't overlay any labels on the map. I initially just tried adding a symbol layer and letting it add labels based on the polygons, but this got messy as there are a ton of multi-polygons and with vector tiles we ended up seeing a ton of repeating labels. If you want to add labels I recommend creating a simple GeoJSON file of points for where you want the labels to appear and add that as a layer. https://geojson.io is an easy place to create a GeoJSON file by drawing on the map.

    I have a live version of this code running here that you can try out: https://rbrundritt.azurewebsites.net/Demos/AzureMaps/CustomChoroplethRegions

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.