title: Leaflet w/ leaflet-markercluster in angular 2
body: <p>I'm having difficulty implementing leaflet with leaflet-markercluster plugin using angular 2.  I've gotten it to work in angularJS previously..  I'm pretty new to angular and hoped someone could help me understand what is going wrong.  I'm assuming the javascript namespace conflict with L plays a major role but I'm just not sure how to correct....  </p>
  
  <p>So the map displays and so do single markers.  However, clustered markers are not showing up at all.</p>
  
  <p>Everything is setup using angular-cli and npm.  I had to add the <code>let L = require('leaflet');</code> line to get <code>L.MarkerClusterGroup()</code> to not produce errors on transpile.</p>
  
  <p>Here is what I'm working with:</p>
  
  <pre><code>/// app.component.ts
  import { Component, OnInit } from '@angular/core';
  require('leaflet');
  let L = require('leaflet');
  require('leaflet-markercluster');
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
      getRandomLatLng(map) {
        const bounds = map.getBounds(),
        southWest = bounds.getSouthWest(),
        northEast = bounds.getNorthEast(),
        lngSpan = northEast.lng - southWest.lng,
        latSpan = northEast.lat - southWest.lat;
        return new L.LatLng(
          southWest.lat + latSpan * Math.random(),
          southWest.lng + lngSpan * Math.random());
      }
      ngOnInit() {
  
        const myIcon = L.icon({
            iconUrl: 'assets/images/marker-icon.png',
            shadowUrl: 'assets/images/marker-shadow.png',
  
            iconSize:     [38, 95], // size of the icon
            shadowSize:   [50, 64], // size of the shadow
            iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
            shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
        });
        const mapid = L.map('mapid').setView([51.505, -0.09], 13);
        L.tileLayer (
          'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
          { attribution: 'Test', maxZoom: 18}
        ).addTo(mapid);
  
        let marker = L.marker([51.5, -0.09], {icon: myIcon}).addTo(mapid);
        let markers: any;
        markers = new L.MarkerClusterGroup();
        markers.addLayer(L.marker(this.getRandomLatLng(mapid)), {icon: myIcon});
        markers.addLayer(L.marker(this.getRandomLatLng(mapid), {icon: myIcon}));
        markers.addLayer(L.marker([52.5, -0.09]), {icon: myIcon});
        console.log(markers);
        console.log(marker);
        mapid.addLayerGroup(markers);
        console.log(mapid);
        mapid.setView([52.5, -0.09], 18);
  
  
      }
  }
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>    {
    "name": "mc-test",
    "version": "0.0.0",
    "license": "MIT",
    "angular-cli": {},
    "scripts": {
      "ng": "ng",
      "start": "ng serve",
      "test": "ng test",
      "pree2e": "webdriver-manager update --standalone false --gecko false",
      "e2e": "protractor"
    },
    "private": true,
    "dependencies": {
      "@angular/common": "^2.3.1",
      "@angular/compiler": "^2.3.1",
      "@angular/core": "^2.3.1",
      "@angular/forms": "^2.3.1",
      "@angular/http": "^2.3.1",
      "@angular/platform-browser": "^2.3.1",
      "@angular/platform-browser-dynamic": "^2.3.1",
      "@angular/router": "^3.3.1",
      "@types/leaflet": "^1.0.54",
      "@types/leaflet-markercluster": "^1.0.0",
      "core-js": "^2.4.1",
      "geojson": "^0.4.1",
      "leaflet": "^1.0.2",
      "leaflet-markercluster": "^0.2.0",
      "prunecluster": "^2.0.0-beta.3",
      "rxjs": "^5.0.1",
      "ts-helpers": "^1.1.1",
      "zone.js": "^0.7.2"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^2.3.1",
      "@types/jasmine": "2.5.38",
      "@types/node": "^6.0.42",
      "angular-cli": "1.0.0-beta.28.3",
      "codelyzer": "~2.0.0-beta.1",
      "jasmine-core": "2.5.2",
      "jasmine-spec-reporter": "2.5.0",
      "karma": "1.2.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-remap-istanbul": "^0.2.1",
      "protractor": "~4.0.13",
      "ts-node": "1.2.1",
      "tslint": "^4.3.0",
      "typescript": "~2.0.3"
    }
  }
  </code></pre>
  
  <p>angular-cli.json:</p>
  
  <pre><code>    {
    "project": {
      "version": "1.0.0-beta.28.3",
      "name": "mc-test"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.json",
        "prefix": "app",
        "styles": [
          "styles.css",
          "../node_modules/leaflet/dist/leaflet.css",
          "../node_modules/leaflet-markercluster/MarkerCluster.css",
          "../node_modules/leaflet-markercluster/MarkerCluster.Default.css"
        ],
        "scripts": [
          "../node_modules/leaflet/dist/leaflet.js",
          "../node_modules/leaflet-markercluster/leaflet.markercluster-src.js"
        ],
        "environments": {
          "source": "environments/environment.ts",
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "files": "src/**/*.ts",
        "project": "src/tsconfig.json"
      },
      {
        "files": "e2e/**/*.ts",
        "project": "e2e/tsconfig.json"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "css",
      "prefixInterfaces": false,
      "inline": {
        "style": false,
        "template": false
      },
      "spec": {
        "class": false,
        "component": true,
        "directive": true,
        "module": false,
        "pipe": true,
        "service": true
      }
    }
  }
  </code></pre>