Using GeoJSON with a Leaflet map to give country borders

Question

Can anyone help me with a leaflet map issue?

I have managed to target a single country (Aruba) that uses coordinates from an object in the same file. when this country is chosen from the dropdown the map fits the boundaries and a styled border appears around the country. I have a Geojson file with all the worlds country borders data but I can't apply it. I have been trying to use AJAX without any joy.

I need a way to do the same as I have for Aruba, for all countries in my dropdown list. It is too much data for a single JS file.

Any help would be hugely appreciated.

I have only added relevant files to this post.

// Add jQuery click event for the dropdown menu button
$(document).ready(function(){
    $("#selCountry").change(function(){
        

        // Target the second map id.
        let mymap2 = L.map('mapid-001').setView([53.5500, 2.4333],6);

        // Use a new token in the boilerplate code to generate a new map for the chosen country.
        var satellite = L.tileLayer('https://api.mapbox.com/styles/v1/jed-boyle/cke2ojbj013x519oqxxyw8ni9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox/streets-v11',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg'

        }).addTo(mymap2);

        let = dark = L.tileLayer('https://api.mapbox.com/styles/v1/jed-boyle/cke43l2xm0sre19lqmkzfrmvv/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'pk.eyJ1IjoiamVkLWJveWxlIiwiYSI6ImNrZHJtbWljbTFmajgycXRhdmh0bGh2azMifQ.tSGyJ-aWbBQcYkovbUBNxg'
        });

        var baseMaps = {
            "satellite": satellite,
            "dark": dark
        };

        L.control.layers(baseMaps).addTo(mymap2);
        
        
        
        // Boundries
            
            let geoData = [{
            "type": "Feature", 
            "properties": { "ADMIN": "Aruba", "ISO_A3": "ABW", "ISO_A2": "AW" }, 
            "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -69.996937628999916, 12.577582098000036 ], [ -69.936390753999945, 12.531724351000051 ], [ -69.924672003999945, 12.519232489000046 ], [ -69.915760870999918, 12.497015692000076 ], [ -69.880197719999842, 12.453558661000045 ], [ -69.876820441999939, 12.427394924000097 ], [ -69.888091600999928, 12.417669989000046 ], [ -69.908802863999938, 12.417792059000107 ], [ -69.930531378999888, 12.425970770000035 ], [ -69.945139126999919, 12.44037506700009 ], [ -69.924672003999945, 12.44037506700009 ], [ -69.924672003999945, 12.447211005000014 ], [ -69.958566860999923, 12.463202216000099 ], [ -70.027658657999922, 12.522935289000088 ], [ -70.048085089999887, 12.531154690000079 ], [ -70.058094855999883, 12.537176825000088 ], [ -70.062408006999874, 12.546820380000057 ], [ -70.060373501999948, 12.556952216000113 ], [ -70.051096157999893, 12.574042059000064 ], [ -70.048736131999931, 12.583726304000024 ], [ -70.052642381999931, 12.600002346000053 ], [ -70.059641079999921, 12.614243882000054 ], [ -70.061105923999975, 12.625392971000068 ], [ -70.048736131999931, 12.632147528000104 ], [ -70.00715084499987, 12.5855166690001 ], [ -69.996937628999916, 12.577582098000036 ] ] ] ] } }
            ]

            let addedGeoJSON = L.geoJSON(geoData , {
                style : function(feature) {
                    return {
                        "color": "blue",
                        "weight": 5,
                        "opacity": 0.65
                    }
                },
            
            onEachFeature: function(feature, layer) {
                if(feature.geometry.type==='MultiPolygon'){
                    layer.bindPopup(feature.geometry.coordinates.join(', '));
                }
            }
            }).addTo(mymap2)

            mymap2.fitBounds(addedGeoJSON.getBounds(), {padding: [10,10]});





        // Add a marker.
        let marker = L.marker([lat, lng]).addTo(mymap2);

        // Add a popup with the county name and country name data.

        countryName = result['data'][0]['countryName']
        continentName = result['data'][0]['continentName']
        marker.bindPopup(capital + "<br>"+ countryName +"<br>" + continentName).openPopup();
        })

    })

#mapid-001 { 
    margin-bottom: 15px;
    height: 100vh;
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>

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

  <title>Simple Sidebar - Start Bootstrap Template</title>
  <!-- Description -->
  <meta name="description" content="AJAX/PHP/CURL/JSON golocation app">
  <!-- Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
  <!-- Bootstrap core CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="libs/css/simple-sidebar.css" rel="stylesheet">
  <link href="libs/css/styles.css" rel="stylesheet">

</head>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <button class="btn btn-primary" id="menu-toggle">Toggle Info Menu</button>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="dropdownSection">
            <!-- <button id="fit">Fit to Kenya</button> -->
                <select id="selCountry">
                                    <option>Choose a Country</option>
                                    <option disabled>_________</option>
                                    <option value="AF">Afghanistan</option>
                                    <option value="AX">Åland Islands</option>
                                    <option value="AL">Albania</option>
                                    <option value="DZ">Algeria</option>
                                    <option value="AS">American Samoa</option>
                                    <option value="AD">Andorra</option>
                                    <option value="AO">Angola</option>
                                    <option value="AI">Anguilla</option>
                                    <option value="AG">Antigua and Barbuda</option>
                                    <option value="AR">Argentina</option>
                                    <option value="AM">Armenia</option>
                                    <option value="AW">Aruba</option>
                                    <option value="AU">Australia</option>
                                    <option value="AT">Austria</option>
                                    <option value="AZ">Azerbaijan</option>
                                    <option value="BH">Bahrain</option>
                                    <option value="BD">Bangladesh</option>
                </select>
            </li>
          </ul>
        </div>
      </nav>
  
      <div id="mapid-001"></div>
      

    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->
  <script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
  <script
  src="http://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
  <script src="libs/js/user-location.js"></script>
  <script src="libs/js/chosen-country.js"></script>
  <script src="libs/js/data-sections.js"></script>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
  <script src="libs/js/layers-control.js"></script>
  
  
  
  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  </script>

</body>

</html>

Answer 1

For adding borders, I have used Vanilla JS, but I guess the same rules apply more or less. For the 'geoData' variable, I think it's only necessary to include the 'geometry' object. As long as you've included all of the keys including 'type' and 'coordinates', then the geoJSON method should be able to ascertain the exact shape and coordinates of each country. Here is what I did.

dropdownButton.addEventListener('change', (event) => {
const countryChoice = event.target.value;
const req = new XMLHttpRequest();
req.open('GET', 'countryBorders.geo.json', true);
req.onload = function() {
    if(req.status == 200) {
        const result = JSON.parse(this.responseText);
        result.features.forEach(feature => {
            if(feature.properties.iso_a2 == countryChoice) {
                let geojsonFeature = feature.geometry;
                let featureStyle = {
                    color: "red",
                    weight: 3
                }

                let border = L.geoJSON(geojsonFeature, {
                    style: featureStyle
                }).addTo(map);
                map.fitBounds(border.getBounds());
            }
        })
    }
}
req.send();
event.preventDefault();

})