Uncaught ReferenceError: L is not defined

[amalshehu]

I'm using leaflet-dvf in my angular 2 project.

I tried to integrate leaflet-dvf in my angular 2 application.

I added its scripts on index.html

index.html

         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/css/dvf.css" />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-dvf/0.3.1/leaflet-dvf.markers.js"></script>

map.component.ts

    import { MapService } from '../../map.service';
    import { Component } from '@angular/core';
    import { Observer } from 'rxjs/Observer';
    
    
    @Component({
      moduleId: module.id,
      selector: 'map-demo',
      templateUrl: './map.component.html',
      styleUrls: ['map.component.css']
    })
    export class MapDemoComponent {
      mapInstance: any;
      coords: any = [];
      mapData: any;
      // Open Street Map Definition
      LAYER_OSM = {
        id: 'openstreetmap',
        name: 'Open Street Map',
        enabled: true,
        layer: L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
          maxZoom: 18,
          attribution: `Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>
                        contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
                        Imagery © <a href="http://mapbox.com">Mapbox</a>`,
          mapId: 'id',
          subdomains: ['a', 'b', 'c', 'd'],
          token: 'token'
        })
      };
    
      // Values to bind to Leaflet Directive
      layersControlOptions = {
        position: 'bottomright'
      };
      baseLayers = {
        'Open Street Map': this.LAYER_OSM.layer
      };
      options = {
        zoom: 10,
        center: L.latLng([40.4859372, -111.8768695])
      };
      constructor() {
       
      onMapReady(map: L.Map) {
        this.mapInstance = map;
      }
      generateCord(data: any) {
            var circle = L.circle([item.Latitude, item.Longitude], {
              color: 'rgb(63, 61, 61)',
              fillColor: fillColor,
              fillOpacity: 0.8,
              radius: item.PRODUCTION
            }).bindTooltip(item.USER_NAME + `(${item.User_Classification}) `)
              .addTo(this.mapInstance);
           let dvf:any = L as any;
           let barChartMarker = dvf.BarChartMarker(new L.LatLng(40.4859372, -111.8768695), options)
             .addTo(this.mapInstance);
          });
        }
      }
    }

But I'm getting the following error

[sfairgrieve]

@amalshehu One thing to try is to use either leaflet-dvf.js or leaflet-dvf.markers.js, not both. leaflet-dvf.js has everything in leaflet-dvf.markers.js, so you don't need both, and importing both usually causes issues. If you just want the Leaflet DVF markers and nothing else, use leaflet-dvf.markers.js. I assume you're importing Leaflet as well?

[amalshehu]

Great info, I will check this.

[ravithb]

This issue happens if leaflet.js is not included before leaflet-dvs.js. I managed to resolve it by adding leaflet.js to the angular.cli.json before leaflet-dvf.js