ngx-leaflet / GeoJson / Country Border

Question

We are using Leaflet already on one of our site but now we are migrating to Angular. Now we are trying to reproduce it using Ngx-Leaflet.

But we don't have the country borders...

What we have right now:

In the component.html

    <div class="col col-md-8">
    <div style="height: 700px; padding: 0; width: 100%;" leaflet [(leafletZoom)]="leafletZoom"
        [(leafletCenter)]="leafletCenter" [leafletMaxZoom]="leafletMaxZoom" [leafletMinZoom]="leafletMinZoom"
        [leafletOptions]="leafletOptions"
        [leafletLayers]="leafletLayers">
    </div>
</div>

In the component.ts in the ngOnInit()

        this.leafletZoom = 4;
    this.leafletMaxZoom = 4;
    this.leafletMinZoom = 4;
    this.leafletCenter = latLng([this.lat, this.lng]);

    this.geoJSONsOption = { style: { 'color': '#ff7800', 'weight': 5, 'opacity': 0.65 } };
    this.projectMapJsonService.getProjectMapJson().subscribe((data: any) => {
        this.geoJSONs = data;
        // console.log(this.geoJSONs);
        let defaultBaseLayer = tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        });
        let defaultOverlay = geoJSON(this.geoJSONs, this.geoJSONsOption);
        this.leafletLayers = [
            defaultBaseLayer,
            defaultOverlay
        ];
    });

    this.leafletOptions = {};

The GeoJson is like

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Afghanistan","iso":"AF","label":"1","totalentries":"430","show_on_map":true},"geometry":{"type":"Point","coordinates":["65","33"]}},...

I have difficulties finding how to convert some of the code E.g.

            var countries_options = {
            insets: true,
            style: {
                fillColor: getColor(feature.properties.label),
                weight: 2,
                opacity: 1,
                color: 'white',
                dashArray: '3',
                fillOpacity: 0.7,
                visible: false
            },

            onEachFeature: function (feature2, layer) {

                layer.on({
                    mouseover: function (e) {
                        info.update(feature.properties);
                    },
                    mousemove: function (e) {

                        var popup = L.popup({
                                offset: new L.Point(120, 0),
                                closeButton: false,
                                className: 'popuphomemap'
                            })
                            .setLatLng(e.latlng)
                            .setContent('Click to have the list of the projects')
                            .openOn(homeMap);
                    },

                    mouseout: function () {
                        info.update();
                    },
                    click: function () {
                        info.click(feature.properties);
                    }
                });
            }
        }
L.wt.countries([{
            "level": 0,
            "countries": [cca2]
        }], countries_options).addTo(homeMap);

I would be grateful if somebody can support me or share code with such features.

Answer 1

Here is an example of highlighting European countries using ngx-leaflet that have have different colours depending on the country population.

Get the map reference using onMapReady and then do everything as you would do on vanilla js inside that method. I used a json with the european countries from here.

onMapReady(map: L.Map) {
    function resetHighlight(e) {
      geojson.resetStyle(e.target);
    }

    function getColor(d) {
      return d > 100000000
        ? "#800026"
        : d > 80000000
        ? "#BD0026"
        : d > 50000000
        ? "#E31A1C"
        : d > 10000000
        ? "#FC4E2A"
        : d > 1000000
        ? "#FD8D3C"
        : d > 1000000
        ? "#FEB24C"
        : d > 100000
        ? "#FED976"
        : "blue";
    }

    function style(feature) {
      return {
        weight: 2,
        opacity: 1,
        color: "white",
        dashArray: "3",
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.pop_est)
      };
    }

    function highlightFeature(e) {
      var layer = e.target;

      layer.setStyle({
        weight: 5,
        color: "#666",
        dashArray: "",
        fillOpacity: 0.7
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
    }

    const onEachFeature = (feature, layer) => {
      layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight
      });
    };

    let geojson = L.geoJSON(euCountries, {
      style: style,
      onEachFeature: onEachFeature
    }).addTo(map);

    map.fitBounds(geojson.getBounds());
  }

You can see the ful lexample here

Based on that you can add any additional functionality you wish.