0

I am using the template from the ngx-leaflet tutorial for this example. I am a total beginner to Angular and just barely know leaflet.js, for reference.

I have a large multipolygon geoJSON file that I want to display on a map and eventually add interactivity to. I've saved the file in the assets directory as china_adm1.geojson.

app.component.html looks like: 

<div class="map"
     leaflet
     [leafletOptions]="options"
     [leafletLayers]="china"
     [leafletLayersControl]="layersControl"
>
</div>

and app.component.ts looks like: 

import { Component } from '@angular/core';
import { geoJSON, latLng, tileLayer } from 'leaflet';
import { adm1 } from '../assets/china_adm1';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  china = geoJSON(adm1);

  // Define our base layers so we can reference them multiple times
  googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  options = {
    layers: [ this.googleMaps ],
    zoom: 3, 
    center: latLng(0, 0)
  };

  layersControl = {
    baseLayers: {
      "Google": this.googleMaps,
      "Hybrid": this.googleHybrid
    },
    overlays: {
      "China Polygon": this.china
    }
  };
}

When I run the app with the above code, the Google basemap displays nicely, but the layersControl panel is absent. When I remove the entire overlays portion of the layersControl code, the control panel shows up as expected. There's something I'm missing about loading/displaying the China regions geoJSON. Note that in import { adm1 } from '../assets/china_adm1, I've arbitrarily defined adm1, so maybe that's the issue. I've also tried including this.china in the layers options bside this.googleMaps.

In leaflet.js, it's as simple as L.geoJson(adm1).addTo(map); where I've defined adm1 with 

var adm1 = {"type": "FeatureCollection",
"name": "china_adm1", ...}

in the geojson file. I'm not sure how to properly define and reference the geojson file in ngx-leaflet.

Lauren
  • 1,035
  • 1
  • 14
  • 32
  • It appears that you have to use HTTPclient per [this example](https://stackoverflow.com/questions/49089788/getting-geojson-data-to-leaflet-map-using-ngx-leaflet-httpclient-and-angular2) – Lauren May 22 '18 at 17:22
  • Leaving this marked unanswered because I'm not sure that HTTPClient is the best/only way to load a geojson into an ngx-leaflet app. – Lauren May 22 '18 at 20:40
  • I'd suggest you debug and inspect the objects being placed into the overlays object when you manually define a json object vs when you use the file-loader. I wouldn't be surprised if it's some issue like it's a string and not a parsed JSON object or something. Or, if there's some difference in the JSON structure. Are there any console errors? Did you debug to see what's getting loaded? – reblace May 23 '18 at 13:15

0 Answers0