bluehalo / ngx-leaflet Goto Github PK

I'm geting these following erorrs on rollup aot build.

dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (23:21) 'tile
Layer' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (41:22) 'latL
ng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
dist/tmp/app/home/demo/leaflet-d3/ping/ping-demo.component.js (68:31) 'circ
le' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (6:32)
'latLng' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.js (20:21)
 'map' is not exported by 'node_modules/leaflet/dist/leaflet-src.js'
node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/layers/control/leaflet-control-la
yers.wrapper.js (13:31) 'control' is not exported by 'node_modules/leaflet/dist/leaflet-
src.js'

I build my popup text for single marker through a loop. I need to bind click event for each line of my popup text to a function and I've coded something like this lines

uris = uris.concat('<a (click)="showSelected("' + uri.s.value + '")" href="#" >' + uri.s.value + '</a><br>'); 
 L.marker([long, lat], {
                  icon: L.icon({ iconUrl: 'assets/marker-icon.png', shadowUrl: 'assets/marker-shadow.png' })
                }).bindPopup(uris).addTo(this.map);

but showSelected isn't call in any way. Can I perform this or I need to change my logic?

Hi,

I am new to using leaflet and ngx plugin. How can I get the map to fly to a particular location on a button click, which is outside the map. I see the leaflet has a method called "flyTo". How do I do this using this plugin. I am using this in typescript with typings project. Thanks!

Hi,

I am using ngx-leaflet and it builds up somehow when I dont using AOT flag. But as soon as I use AOT flag it is showing me this error.

My module file:

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
...

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

@NgModule({
    ...
    imports: [
       ...,
        LeafletModule.forRoot()
    ],
...
})

export class TaskModule { }

ERROR in Error encountered resolving symbol values statically. Could not resolve @asymmetrik/ngx-leaflet relative to /builds/vernuso/trust/src/app/task/task.module.ts., resolving symbol TaskModule in /builds/vernuso/trust/src/app/task/task.module.ts, resolving symbol TaskModule in /builds/vernuso/trust/src/app/task/task.module.ts, resolving symbol TaskModule in /builds/vernuso/trust/src/app/task/task.module.ts

ERROR in multi ./src/styles.css ./src/css/mapping.css .//quill/dist/quill.core.css .//quill/dist/quill.snow.css .//leaflet/dist/leaflet.css
Module not found: Error: Can't resolve '/builds/vernuso/trust/node_modules/leaflet/dist/leaflet.css' in '/builds/vernuso/trust'
@ multi ./src/styles.css ./src/css/mapping.css .//quill/dist/quill.core.css .//quill/dist/quill.snow.css .//leaflet/dist/leaflet.css

Am I missing anything here? Please help.

I would like to replace my circle marker to pie chart. I made a google search and found something like leaflet.minicharts, cluster markers, etc.Any suggestions?

Hi,

I know it's not the best place to ask, but I have an issue when trying to use an existing library in angular.io

I am using @types/leaflet that defines a type

export namespace Icon {
    interface DefaultIconOptions extends BaseIconOptions {
        imagePath?: string;
    }

    class Default extends Icon<DefaultIconOptions> {
        static imagePath?: string;
        constructor(options?: DefaultIconOptions);
    }
}

Now, I would like to use the following library which extends the Icon behavior: https://www.npmjs.com/package/leaflet-fa-markers
The issue is that it's plain JS and the type is not defined in @types...
node_modules/leaflet-fa-markers/L.Icon.FontAwesome.js

L.Icon.FontAwesome = L.Icon.extend({

	options: {
		popupAnchor: [0, -50]
	},

	createIcon: function () {

		var div = document.createElement('div');
...

So far, I've imported js and css in .angular-cli.json, but can't figure out how to import it in my service... So far I've imported the js lib

import 'leaflet-fa-markers';
//...
        let marker = new L.Marker([ lat, lng], {
          icon: L.icon.fontAwesome({
            iconClasses: 'fa fa-info-circle', // you _could_ add other icon classes, not tested.
            markerColor: '#00a9ce',
            iconColor: '#FFF'
          }),
          draggable: true});

But I get the error:

src/app/_services/canimap.service.ts (99,24): Property 'fontAwesome' does not exist on type '(options: IconOptions) => Icon<IconOptions>'.

Hello! How can I change leaflet options and reload map?
My code
public options = {
layers: [
//L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
L.tileLayer('assets/img/{z}/'+this.floor+' [www.imagesplitter.net]-{y}-{x}.jpeg', { maxZoom: 3, attribution: '...' })
],
zoom: 1,
center: L.latLng([ 46.879966, -121.726909 ]),
crs: L.CRS.Simple
};

Button
<button (click)="next()" style="position: absolute; right: 50px;">Next

Button event
public next(){
this.floor += 1;
this.options.layers = [
//L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
L.tileLayer('assets/img/{z}/'+this.floor+' [www.imagesplitter.net]-{y}-{x}.jpeg', { maxZoom: 3, attribution: '...' })
];
}
Can you help, please?

Hi,

Could someone show me how I go about using the Leaflet.Coordinates plugin with ngx-leaflet?
https://github.com/MrMufflon/Leaflet.Coordinates

Thanks

Hello,

I tried installing your component following the documentation steps.
Did the three npm installs:
npm install leaflet npm install @asymmetrik/ngx-leaflet npm install @types/leaflet

After importing the module in the app module I get the following error :
node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/core/leafl‌​et.directive.d.ts (2,37): Module '"leaflet"' has no exported member 'MapOptions'

I tried editing the leafl‌​et.directive.d.ts changing the options attribute to :any just to see if it would work but I got other errors afterwards

Is there a specific step I'm missing ? Or a specific Angular Version to use ?
I'm using Angular 4.2.5 with AOT but no webpack

I wrote a tileserver which serves a huge image in tiles in different zoom levels.
I is possible switch leaflet to pixel mode in this plugin?

In https://github.com/Asymmetrik/angular2-leaflet#inject-leafletdirective-into-your-component, the variable leafletDriective is misspelled.

i want to get coordinates on map click.
TIA

Hey there!

Great work you are putting into this! It's very appreciated!

I wanted to ask if somone can give me some directions on how I would be able to use the Leaflet.Path.Transform plugin together with ngx-leaflet.

I know from the readme, that I can get a reference to the L.Map instance. However, the Leaflet.Path.Transform extends the functionality for the Polyline type (Polyline_options in specific) to make it dragable and scalable. I am not sure how I would be able to extend this type provided by ngx-leaflet.

Any help is appreciated.

Kindly, Matthias

In app.module.ts I've impored LeafletModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { LeafletModule } from '@asymmetrik/ngx-leaflet';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LeafletModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

But when I run the app I get this error:

ERROR in /Users/matija/Documents/Projects/truewether/frontend/node_modules/@asymmetrik/ngx-leaflet/dist/leaflet/core/leaflet.directive.d.ts (2,37): Module '"leaflet"' has no exported member 'MapOptions'.

webpack: Failed to compile.

It's Angular 4 project. Created with CLI.
Any other info I should provide?

Hi,

It's unclear in the current version of the package and README how to add a marker to the map.

You state

4. Configure Leaflet to use the correct URLs as customer marker images

let layer= L.marker([ 46.879966, -121.726909 ], {
 	icon: L.icon({
 		iconSize: [ 25, 41 ],
 		iconAnchor: [ 13, 0 ],
 		iconUrl: '2273e3d8ad9264b7daa5bdbf8e6b47f8.png',
 		shadowUrl: '44a526eed258222515aa21eaffd14a96.png'
 	})
 });

but where do i add this layer in the directive parameters?

I tryed everything, but nothing works, and I went in the demo forlder but the example of marker is too much complicated for a starting point.

Leaflet way was to do something like L.marker([50.5, 30.5]).addTo(map); and it's added.

Can you please clarify this in the documentation or make an example with marker, popup and tooltip as they are widely used around?

Thank you

Please have a look below code :

import { Component } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  // baseLayers = [ L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18 }) ];
  // center = L.latLng([ 46.879966, -121.726909 ]);
  // fitBounds = L.latLngBounds([ [20.5937,78.9629], [40.774, -74.125] ]);
  // layers = [
  //   marker = 
  // ]

  getDefaultMapPosition(){
    return { lat: -33.868699, lng: 151.209147 }; //canberra,Australia ->   -35.281979, 149.128814
  }

  options = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 13,
    center: L.latLng(this.getDefaultMapPosition().lat, this.getDefaultMapPosition().lng)
  };
  layersControl = {
    baseLayers: {
      'Open Street Map': L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
      'Open Cycle Map': L.tileLayer('http://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    },
    overlays: {
      'Big Circle': L.circle([46.95, -122], { radius: 5000 }),
      'Big Square': L.polygon([[46.8, -121.55], [46.9, -121.55], [46.9, -121.7], [46.8, -121.7]])
    }
  }
  defaultMarkericon = L.icon({
    iconUrl: '/assets/fevicon/map-icon.png',
    iconSize: [23, 23], // size of the icon   
  });
  layers = [
    L.circle([46.95, -122], { radius: 5000 }),
    L.polygon([[46.8, -121.85], [46.92, -121.92], [46.87, -121.8]]),
    L.marker([46.879966, -121.726909],{ icon: this.defaultMarkericon,draggable:true }),
  ];

  
}

It would be appreciate if you help me asap.

Your installation instructions are missing the following instructions:

Modify app.module.ts

1. Add the following import:
   import { LeafletModule } from '@asymmetrik/angular2-leaflet';

2. Add the following to @NgModule:
   imports: [
   ...
   LeafletModule,

I have tried to use leaflet.markercluster with angular2-leaflet and @angular/cli.

I have tried this:

import * as L from 'leaflet';

import 'leaflet.markercluster';

but using any of the markercluster extensions produce a "ng build" compile error saying they are not found on type "typeof L". Any suggestions?

Hi

I am trying to get leaflet plugins (leaflet-webgl-plugin) to get to work with angular 2 and leaflet. But unsuccessful. Any ideas?

http://ursudio.com/webgl-heatmap-leaflet/

Hi,

My understanding is that with leaflet's recent move to es6 imports (http://leafletjs.com/2017/06/27/leaflet-1.1.0.html), that we could potentially not have to include the entire leaflet library in our builds. I have confirmed that I can indeed now do :

import { Map } from 'leaflet';

But I haven't confirmed yet that if I update everything, I would get a more compact leaflet build. And obviously I then want to use this wonderful library, and my understanding is that if any lib does a :

import * as L from 'leaflet';

we won't see any of those size reductions. Thoughts?

app.module.ts
import {LeafletModule} from "@asymmetrik/angular2-leaflet";
@NgModule({
providers: [],
imports: [NgxChartsModule, BrowserModule, FormsModule, LeafletModule],
declarations: [AppComponent, LeafletMapComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

ERROR in LeafletModule is not an NgModule

Hello.

I would like to use this module with angular universal.
However, the following error occurred.

> node dist/server.js

/Users/cse_t_kutsuna/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:226
var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;
                                                                                     ^

ReferenceError: window is not defined
    at /Users/me/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:226:86
    at version (/Users/me/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:6:65)
    at Object.<anonymous> (/Users/me/git/study/blah-map/node_modules/leaflet/dist/leaflet-src.js:9:2)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node dist/server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2017-07-25T06_32_11_130Z-debug.log

I tried using isPlatformBrowser with client only but leafletOptions parse error appears

Is there any good solution?

I have used Angular Cli to generate a new project. I have also used quite a few node_modules for my application such as angularfire2, bootstrap, jQuery.

I tried to add leaflet according to the documentation, but unfortunately I don't get the map rendered:

In my project, I have created a folder in src/app called 'map' and have created a module under that called 'leaflet'. In my leaflet.component.ts, I have the below codes:

import { Component, OnInit } from '@angular/core';
import { GlobalService } from '../shared-service/global.service';

@Component({
selector: 'app-leaflet',
templateUrl: './leaflet.component.html',
styleUrls: ['./leaflet.component.css']
})
export class LeafletComponent implements OnInit {
zoom: number;
center: L.LatLng;
fitBounds: L.LatLngBounds;
constructor() {
}
ngOnInit() {
}
}
In the leaflet.component.html, I have the below code:
<div leaflet style="height: 300px;"
[leafletCenter]="center"
[leafletFitBounds]="fitBounds">
</div>

Also in my app.module.ts, I have imported the LeafletModule.

Am I missing something?

Hi, I've built an application using ng-cli
Ive followed the directions on the README and am trying to drop your demo module into my existing app
Im getting the following error:
ERROR in [default] //trunk/node_modules/@asymmetrik/angular2-leaflet/dist/leaflet/core/leaflet.directive.d.ts:1:0
Cannot find type definition file for 'leaflet'.

Any suggestions.

I was using this library just fine, now I updated and I'm having problems with the typings. When I compile or do ng serve I get this:

ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (583,56): ',' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (583,65): ',' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (583,77): ',' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (583,104): Expression expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (583,117): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (584,24): ',' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (584,54): Expression expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (585,16): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (585,36): '(' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (586,17): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (587,23): ',' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (587,44): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (588,14): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (589,16): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (590,16): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (591,21): ',' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (591,61): ';' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (593,13): Expression expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (593,33): '(' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (1409,45): ',' expected.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (594,5): Unused label.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (583,79): The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (583,87): Property 'MultiLineString' does not exist on type 'typeof "/Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/geo...'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (584,5): Cannot find name 'constructor'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (584,17): Cannot find name 'latlngs'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (584,26): 'LatLngExpression' only refers to a type, but is being used as a value here.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (584,46): Cannot find name 'options'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (584,56): 'PolylineOptions' only refers to a type, but is being used as a value here.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (585,5): Cannot find name 'toGeoJSON'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (585,26): Property 'Feature' does not exist on type 'typeof "/Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/geo...'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (586,5): Cannot find name 'getLatLngs'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (587,5): Cannot find name 'setLatLngs'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (587,16): Cannot find name 'latlngs'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (587,25): 'LatLngExpression' only refers to a type, but is being used as a value here.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (588,5): Cannot find name 'isEmpty'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (588,16): Cannot find name 'boolean'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (589,5): Cannot find name 'getCenter'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (590,5): Cannot find name 'getBounds'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (591,5): Cannot find name 'addLatLng'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (591,15): Cannot find name 'latlng'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (591,23): 'LatLngExpression' only refers to a type, but is being used as a value here.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (591,42): 'LatLngExpression' only refers to a type, but is being used as a value here.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (593,5): Cannot find name 'feature'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (593,23): Property 'Feature' does not exist on type 'typeof "/Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/geo...'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (594,14): 'PolylineOptions' only refers to a type, but is being used as a value here.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (597,83): Generic type 'Polyline<T, geojson, LineString>' requires 3 type argument(s).
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (599,30): Generic type 'Polyline<T, geojson, LineString>' requires 3 type argument(s).
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (1422,27): Generic type 'Icon<T, IconOptions>' requires 2 type argument(s).
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (1428,45): Generic type 'Icon<T, IconOptions>' requires 2 type argument(s).
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (1439,30): Generic type 'Icon<T, IconOptions>' requires 2 type argument(s).
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (1446,12): Generic type 'Icon<T, IconOptions>' requires 2 type argument(s).
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index.d.ts (1463,19): Generic type 'Icon<T, IconOptions>' requires 2 type argument(s).
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@asymmetrik/ngx-leaflet-draw/dist/leaflet-draw/core/leaflet-draw.directive.d.ts (7,28): Namespace '"/Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index".Control' has no exported member 'Draw'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@asymmetrik/ngx-leaflet-draw/dist/leaflet-draw/core/leaflet-draw.directive.d.ts (9,28): Namespace '"/Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index".Control' has no exported member 'DrawConstructorOptions'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@asymmetrik/ngx-leaflet-draw/dist/leaflet-draw/core/leaflet-draw.directive.d.ts (16,46): Namespace '"/Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index".Control' has no exported member 'DrawConstructorOptions'.
ERROR in /Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@asymmetrik/ngx-leaflet-draw/dist/leaflet-draw/core/leaflet-draw.directive.d.ts (16,81): Namespace '"/Users/facundomedica/Documents/Proyectos/Angular/apperto-admin-v3/node_modules/@types/leaflet/index".Control' has no exported member 'DrawConstructorOptions'.

In my package.json I have this:

    "@asymmetrik/ngx-leaflet": "^2.4.0",
    "@asymmetrik/ngx-leaflet-draw": "^2.6.0",
    "@types/leaflet": "^1.2.0",
    "@types/leaflet-draw": "^0.4.8",
    "leaflet": "^1.2.0",
    "leaflet-draw": "^0.4.12",

Environment:
"@asymmetrik/ngx-leaflet": "^2.5.0",
"@types/leaflet": "^1.2.1",
"leaflet": "^1.2.0"

When navigate out of a map, en error is rising :

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'off' of null
TypeError: Cannot read property 'off' of null
at NewClass.removeLayer (leaflet-src.js:4855)
at leaflet-control-layers.wrapper.js:39
at DefaultKeyValueDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultKeyValueDiffer.forEachRemovedItem (core.es5.js:7642)
at LeafletControlLayersWrapper.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyChanges (leaflet-control-layers.wrapper.js:38)
at LeafletControlLayersWrapper.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyBaseLayerChanges (leaflet-control-layers.wrapper.js:18)
at LeafletLayersControlDirective.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.directive.js.LeafletLayersControlDirective.updateLayers (leaflet-control-layers.directive.js:71)
at LeafletLayersControlDirective.set [as layersControlConfig] (leaflet-control-layers.directive.js:43)
at LeafletLayersControlDirective.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.directive.js.LeafletLayersControlDirective.ngOnDestroy (leaflet-control-layers.directive.js:58)
at callProviderLifecycles (core.es5.js:11208)
at callElementProvidersLifecycles (core.es5.js:11177)
at NewClass.removeLayer (leaflet-src.js:4855)
at leaflet-control-layers.wrapper.js:39
at DefaultKeyValueDiffer.webpackJsonp.../../../core/@angular/core.es5.js.DefaultKeyValueDiffer.forEachRemovedItem (core.es5.js:7642)
at LeafletControlLayersWrapper.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyChanges (leaflet-control-layers.wrapper.js:38)
at LeafletControlLayersWrapper.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js.LeafletControlLayersWrapper.applyBaseLayerChanges (leaflet-control-layers.wrapper.js:18)
at LeafletLayersControlDirective.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.directive.js.LeafletLayersControlDirective.updateLayers (leaflet-control-layers.directive.js:71)
at LeafletLayersControlDirective.set [as layersControlConfig] (leaflet-control-layers.directive.js:43)
at LeafletLayersControlDirective.webpackJsonp.../../../../@asymmetrik/ngx-leaflet/dist/leaflet/layers/control/leaflet-control-layers.directive.js.LeafletLayersControlDirective.ngOnDestroy (leaflet-control-layers.directive.js:58)
at callProviderLifecycles (core.es5.js:11208)
at callElementProvidersLifecycles (core.es5.js:11177)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at zone.js:873
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:503)
at invokeTask (zone.js:1540)

From debugging, it reproduced only when I got [leafletLayersControl].
leaflet-control-layers.wrapper.js is trying to remove layer with currentValue = null... (line 39)

Is there any workaround or its a bug to fix?

Thanks

## Issue: I add the leaflet into angualr2 from the official tutorial and I change the coordinate to Melbourne.after i initiate the angular2, the map is not joined together
## Environment
Ubuntu:14.04,angular2,

It is what happen?Who can tell me

I'm not sure how different it would be to resolve the marker issue with Angular-CLI, as it uses Webpack, but doesn't have the same configuration. Have you tried this with Angular-CLI?

Hello.

When trying to use this component in angular project, there appears following problem: map is shown as separated square pieces covering random screen space (as st the screenshot below).

The LeafletModule is imported in the work module as it is described in README. The component itself has been taken from the Basic Map Setup as is.

The markup of the app is built on the Bootstrap grid base. Leaflet is located within a col-md-.. div, but goes out of its scope.

So, what can cause such a problem?

Thank you

I want to get coordinates from the map based on the mouse position. I don't see a way to do this in the docs, is there a way I could achieve this ?

I'm creating a dashboard with draggable maps. The fact is that when i drag a new map, the dashboard refreshes and the old map dissapears, i just can see the markers in the first map, and the recently created map doesn't loads anything. The first map works when i refresh the page (F5) but the second doesn't appears... and something that i noticed is that when I zoom in the second map, the zoom affects the first map... Do you have any Idea on what's going on?? how can I use multiple maps in the same page? How can I reload the coordinates from options or my entire map??

I'm uploading some pictures to clarify

In this picture, you can see my map working correctly

This is what happens when I add another map, both maps seems not to be present

When I refresh the entire page, the first map loads, please check the map markers, they are correctly positioned in this picture

I zoomed a bit in the second map and guess what? The first map got zoom and my markers changed their location...

I've been trying to use esri-leaflet with angular2-leaflet and Angular CLI but without success.

I've installed esri-leaflet 2.0.8 and types/esri-leaflet 2.0.0 packages.
I added
import 'esri-leaflet';
to my map component and in the onMapReady function added
L.esri.basemapLayer("Topographic").addTo(map);

ng build compiles without any errors, but during runtime L.esri is undefined.

Any ideas?

i've tried a number of things .. is it supported?

if not, where should I add this and PR?

Thank you so much for putting this out there. I was hoping you had some guidance on how to implement onEachFeature. I cannot seem to get a click event on each feature of the layer. Any advice?

PS C:\Users\xxxx\Documents\angular2-leaflet> gulp dev
[11:45:27] Using gulpfile ~\Documents\angular2-leaflet\gulpfile.js
[11:45:27] Starting 'dev'...
[11:45:27] Starting 'validate-ts'...
[11:45:28] Finished 'validate-ts' after 847 ms
[11:45:28] Starting 'webpack-dev-server'...
[11:45:28] Starting 'watch-ts'...
[11:45:28] Finished 'watch-ts' after 27 ms
[11:45:28] [webpack] http://localhost:9000/webpack-dev-server/index.html
ts-loader: Using [email protected]
ts-loader: Using [email protected]
Hash: 3c13ce2d5cf40dab683c
Version: webpack 2.3.2
Time: 205ms
Asset Size Chunks Chunk Names
application.js 360 bytes 0 [emitted] application
vendor.js 6.28 kB 1 [emitted] vendor

ERROR in error TS18002: The 'files' list in config file 'tsconfig.json' is empty.

ERROR in ./src/demo/main.ts
Module build failed: error while parsing tsconfig.json

ERROR in error TS18002: The 'files' list in config file 'tsconfig.json' is empty.

ERROR in ./src/demo/vendor.ts
Module build failed: error while parsing tsconfig.json
webpack: Failed to compile.

Is there any possibility to render with the html content of a popup? For example to implement data binding (ngFor ,ngIf,ngmodel). I want to implement a form for every marker popup,and I don't know how to take the values of the form

This looks really great so far, and the instructions are so nice and clean, but they exclude the fact that anyone starting with this project (especially using the angular cli), will also need to add that final step of including the global css in their .angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/leaflet/dist/leaflet.css"
      ],

Hello!
I want to include heatmap plugin for leaflet in my angular 2 project http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html
But i don't now how.
Can you help me with my problem&

I have an Angular 4+ project setted up with angular cli. I installed the modules with yarn but importing '@asymmetrik/ngx-leaflet.module in my app.module is not working.

I see that the name of the module has been changed recently, maybe something is wrong there?

The tile layer config is incorrectly mapping wms to xyz and defaulting to wms

I'm trying to add a GeoJSON layer, but not work?

in component.html
...
leaflet style="height: 400px;"
[leafletOptions]="options"
[leafletPanOptions]="panOptions"
[leafletZoomOptions]="zoomOptions"
[leafletZoomPanOptions]="zoomPanOptions"
[leafletFitBoundsOptions]="fitBoundsOptions"
[leafletZoom]="zoom"
[leafletCenter]="center"
[leafletBaseLayers]="baseLayers"
[leafletLayersControlOptions]="layersControlOptions"
[leafletLayers]="layers"
(leafletMapReady)="initMap($event)">

in component.ts
...
this.layers = [L.geoJSON(this.geodata)];

Thanks.

I am trying to add the Leaflet Routing Machine control in my Angular 4 project but I am not sure how to do it. I tried declaring the route I wanted in the template and then binding to the "[leafletLayersControl]" but that didn't seem to work.

Hi

i have this error if anyoine can help me

localhost:3000/@asymmetrik/angular2-leaflet Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:30 Error: Fetch error: 404 Not Found
Instantiating http://localhost:3000/@asymmetrik/angular2-leaflet
Loading http://localhost:3000/app/mobile-content/mobile-content.module.js
Loading http://localhost:3000/app/app.module.js
Loading http://localhost:3000/app/main.js
Loading app
at fetch.js:37
at ZoneDelegate.invoke (zone.js:391)
at Zone.run (zone.js:141)
at zone.js:818
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:584)

Usage of Leaflet v0.7.x vs v1.0.x is not in documentation as far as I can see. Should this be obvious? BTW, thanks for doing this. I'm excited to get into it.

When trying to use external non-typed library (leaflet-contextmenu) i get this error:

Uncaught Error: Leaflet must be loaded first
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :21:10)
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), :25:3)
at eval ()
at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
at Object.../../../../script-loader/index.js!../../../../leaflet-contextmenu/dist/leaflet.contextmenu.js (leaflet.contextmenu.js?f1d1:1)
at webpack_require (bootstrap 4e7a92c…:54)
at Object.5 (scripts.bundle.js:37)
at webpack_require (bootstrap 4e7a92c…:54)
at webpackJsonpCallback (bootstrap 4e7a92c…:25)
at scripts.bundle.js:1

I've added this module to my Angular v4.3.6 application.
When I add LeafletModule.forRoot() to my imports in app.modules.ts and recompile I get lots of errors in /node_modules/@types/leaflet/index.d.ts
The first few are:

• /node_modules/@types/leaflet/index.d.ts (583,56): ',' expected.
• /node_modules/@types/leaflet/index.d.ts (583,104): Expression expected.
• /node_modules/@types/leaflet/index.d.ts (585,36): '(' expected.

When I open this file in my IDE (WebStorm v2017.2.3) it also reports these errors.
Mostly TS1005 and TS1109.

I also downloaded the zip from github of the dev and master branch and I can run the demos.
In my application, I don't use gulp, so I assume I need to reconfigure something.
I run ng serve to compile and run my application.

I tried Googling but couldn't find a solution.
I already excluded my node_modules in my tsconfig.json
Other specs:

• Window10
• nmp v4.3.0
• node v6.9.5
• tsc v1.0.3.0

Any help is much appreciated.

I want to use several base layers which have different projections.
So when I switch a base layer the map projection should change and the vector layer should re-get its data sending the new map projection.
Is this possible? How can I add the projection to the base layer object and is a change event emitted when the base layer is changed and will it also broadcast the projection?

im trying to integrate angular2-leaflet with my application using electron and already copy exactly your code into my repository but map doesnt appear even it do not show any error...pls help me

Hello,

I have a question:
Is it possible to access marker HTML or apply CSS classes to a marker? I want to be sure, before I would rewrite all my gmaps code to leaflet. Thanks!

Object structure
var marker ={
"lat":78.99,
"lng":-23.44,
"value": 252
}