title: How to load and display external multipolygon geoJSON file in ngx-leaflet angular app
body: <p>I am using the template from the <a href="https://www.asymmetrik.com/ngx-leaflet-tutorial-angular-cli/" rel="nofollow noreferrer">ngx-leaflet tutorial</a> for this example. I am a total beginner to Angular and just barely know leaflet.js, for reference. </p>
  
  <p>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 <code>assets</code> directory as <code>china_adm1.geojson</code>.</p>
  
  <p><code>app.component.html</code> looks like: </p>
  
  <pre><code>&lt;div class="map"
       leaflet
       [leafletOptions]="options"
       [leafletLayers]="china"
       [leafletLayersControl]="layersControl"
  &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and <code>app.component.ts</code> looks like: </p>
  
  <pre><code>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&amp;x={x}&amp;y={y}&amp;z={z}', {
      maxZoom: 20,
      subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
      detectRetina: true
    });
  
    googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&amp;x={x}&amp;y={y}&amp;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
      }
    };
  }
  </code></pre>
  
  <p>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 <code>overlays</code> 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 <code>import { adm1 } from '../assets/china_adm1</code>, I've arbitrarily defined <code>adm1</code>, so maybe that's the issue. I've also tried including <code>this.china</code> in the layers options bside <code>this.googleMaps</code>.</p>
  
  <p>In leaflet.js, it's as simple as <code>L.geoJson(adm1).addTo(map);</code> where I've defined <code>adm1</code> with </p>
  
  <pre><code>var adm1 = {"type": "FeatureCollection",
  "name": "china_adm1", ...}
  </code></pre>
  
  <p>in the geojson file. I'm not sure how to properly define and reference the geojson file in ngx-leaflet. </p>