Uncaught ReferenceError: L is not defined
amalshehu opened this issue · comments
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 © <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);
});
}
}
}
@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?
Great info, I will check this.
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