haoliangyu / ngx-leaflet-starter

A soup of Angular and Leaflet

ngx-leaflet-starter

A web mapping application starter based on Angular X and Leaflet. This project demo includes basic mapping features:

• Display base maps from different sources

• Initialize map based on user's IP address location

• Geocode address and zoom to result location

• Add/remove markers on the map

• Use unofficially typed Leaflet plugin

• Built with Angular CLI

Support Angular 7 and Leaflet 1.3 now!

See how it looks at demo page.

FAQ

Was it named angular2-leaflet-starter?

Yes, but no longer. Angular is evolving rapidly and has moved further from 2.0. This project is renamed to ngx-leaflet-starter, meaning that it will evolve with Angular and stay close to the latest version.

How about new features?

Since this project has been reached its initial goal to provide a small and clean code base for Angular and Leaflet integration, currently there is no plan for new feature development. But I am open to suggestions and PRs. If you think it's beneficial to add something new (not for very specific use cases), please feel free to submit an issue for dicussion.

Oops, this plugin is not typed!?

Most Leaflet plugins are not typed, but it doesn't mean they are not usable. To use them in a TypeScript project, one way is to provide a minimal type declaration file.

In the starter, a minimal type declaration file is created for the Leaflet.VectorGrid. This plugin is used to add the global airport sites (from openflights.org) as a vector tile layer.

How to start?

This project requires npm (or yarn).

1. Run npm install to install dependencies.

2. Run npm run start to set up the dev server.

3. See the app at localhost:4200.

Thanks to these awesome people!

• Rodolphe Eveilleau

• Wolfgang Becker

• Tonia Roddick

Looking for other demos?

• ngx-mapboxgl-starter is an Angular 2 project seed with MapboxGL, a mapping library designed for vector tile.

• boundary.now, a tool to download place boundries from OpenStreetMap, built with Angular2, Material2 and Leaflet.

ngx-leaflet-starter's Issues

Error loading resource: map.service.ts / Error 404

Hi, can you help me out with this?

I am referencing your project to get started with angular 2 and leaflet, but when I try to run it (w/o using webpack) using npm start, the typescript compiler doesn't compile my map.service.ts into its equivalent js file, causing it to throw an error 404. But i don't understand why.

Here's a pic of it ->

I am pretty sure the tile layers portion are perfectly fine and i've added the source reference for leaflet.d.ts.

Here's the error showing on the browser side ->

Thanks a lot

Angular-cli Support? Documentation?

Is there any hope to expect for angular-cli support or proper documentation any time soon?
TIA

Reductant font library

So now this project is importing both font-awesome and glyphicon (introduced by ng2-bootstrap). We should probably stick with one and avoid redundancy.

The search is broken?

When you type something in the search bar on the demo http://haoliangyu.github.io/ngx-leaflet-starter/, the whole page is reloaded... and NYC is automatically reentered in the text input?

Integration of cartoDB.js and layers

Hi - this is perhaps not quite an issue with the library, but rather with integration of cartodb layers.

The issue relates to the usage of the cartodb.js library that's loaded directly into index.html (as used by my seed application)

This is the script :

<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

Using it in map.service.ts is problematic:
import * as cartodb from 'cartodb';

And this is the result:
Module not found: Error: Can't resolve 'cartodb'

Any pointers would be appreciated.

Thanks!

Update to Angular 6

Angular 6 is out and it is time to update the project :-)

Can not get geojson

"Cannot GET /data/airports.geojson↵"

Could you please help me with this

How to Run

I have just started looking into leaflet, TypeScript, and Angular 2, and I am used to being able to run an application by typing "npm start" in the terminal. This does not work for me.

I have already typed in "npm install" and "webpack" but am unsure if that is correct and what to do from there.

Marker Rendering incorrectly

When viewing the Demo App. I noticed that Clicking and adding a Marker caused the icon and Popup to be rendered a bit low and to the right from the spot that was clicked.

What is causing this? I didn't notice an intentional offset anyplace.

Insert a new plugin leaflet

Hi,
i'm new for angular2 and webpack. I have try to insert a plugin for leaflet (leaflet.markercluster), but i have a problem with configuration of this in webpack.config.js. Anyone can help me to understand how to insert the plugin?
thanks in advance

Angular v4

Angular 4.0 is out! I will find time to update this project soon. Also, since the version number of Angular is going to change quickly, I am going to rename this project to angular-leaflet-starter for generality.

Invalid configuration object on webpack-dev-server

I am fairly new to angular2, leaflet and webpack, so I apologize if this is a newbie question.
I cloned the app, ran npm install, npm run build and am able to see the public/index.html. This works fine as long as after each update to the code, I run npm run build and refresh my page. I tried using the webpack-dev-server, but I get the following error (see image below). I would like to debug the code in the browser as I do further development and am not sure how to do that. I'm assuming if the webpack-dev-server was successful, I'd be able to debug by using that. Is this true or is there another way I can debug my code? Primarily, how do I fix the errors that are showing? I've tried adding the webpack-dev-server with 'npm install webpack-dev-server --save-dev', but I still get the same errors. I then uninstalled it, as it seems you do not have that in your packages.js file either.
Thanks for a great starter app!

webpack installation issue

Hi Haoliang,

I try to install your app follow the instruction but some issues ... Could you let me know the full installation instruction?

Thanks in advance,

unable to load map

AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for ConnectionBackend! ; Zone: ; Task: Promise.then ; Value: ViewWrappedError Error: No provider for ConnectionBackend!
at NoProviderError.Error (native)
at NoProviderError.BaseError [as constructor]

Airport layer not working

When toggling it on:

ERROR TypeError: "tile is null"
_tileReady
http://localhost:4200/vendor.js:129379:7invokeTask
http://localhost:4200/polyfills.js:2743:17onInvokeTask
http://localhost:4200/vendor.js:57374:24invokeTask
http://localhost:4200/polyfills.js:2742:17runTask
http://localhost:4200/polyfills.js:2510:28invokeTask
http://localhost:4200/polyfills.js:2818:24invoke
http://localhost:4200/polyfills.js:2807:28timer
http://localhost:4200/polyfills.js:4376:17

App mapcomponent is not a singleton/reusable component

This got me up and running with creating a leaflet-based map component, but it only works on the initial component load. Trying to navigate to another page with an element which uses the same map component just shows a blank. Traced the issue out to angular lifecycle hooks trying to reinitialize the component I think, but still trying to determine if a solution to this issue is even possible.

This issue is technically outside the scope of this project, but I wanted to highlight that this is possibly a limitation of this implementation. If anyone has suggestions which solve this problem, I would gladly implement them into a PR for the base project because this is far simpler than trying to integrate what I've already got using leaflet-core.

How to deal with Leaflet Plugins

Much of leaflet plugins without type declaration file in the DefinitelyTyped repository, such as 'esri-leaflet'.
How can I deal with them,except create declaration file by myself.
Can you give some advice?

Adding leafletjs and d3js with angular-cli. [HELP]

how can I add this on my angular-cli config file? I've added on system config as you've mentioned, but import leaflet is not finding the module on my component.

Plugins

I have an Ionic 1 app with a lot of leaflet plugins used. I want to switch to Ionic 3. I don't know how to implement leaflet plugins and use them. Can you help me?

Error: Cannot find module 'cssnano'

Hi,
While running: npm run build I get the following error:
Error: Cannot find module 'cssnano'
at Function.Module._resolveFilename (module.js:485:15)
at Function.Module._load (module.js:437:25)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object. (/home/storm/dev/ngx-leaflet-starter/webpack/webpack.config.prod.js:63:27)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at requireConfig (/home/storm/dev/ngx-leaflet-starter/node_modules/webpack/bin/convert-argv.js:96:18)
at /home/storm/dev/ngx-leaflet-starter/node_modules/webpack/bin/convert-argv.js:109:17
at Array.forEach (native)
at module.exports (/home/storm/dev/ngx-leaflet-starter/node_modules/webpack/bin/convert-argv.js:107:15)

Can you please assist resolving this issue?
Thanks,
Adi

Module build failed: Error: ENOENT: no such file or directory, open '/leaflet/typings/index.d.ts'

npm -v 3.8.9
node -v v6.1.0
typings -v 1.4.0
webpack -? 1.13.2

No errors or warnings for these...
git clone https://github.com/haoliangyu/angular2-leaflet-starter.git ./leaflet
cd ./leaflet/
 npm install
 typings install
 npm install typings --global

book15:leaflet hank$ webpack
ts-loader: Using [email protected] and /Users/hank/home/hank/js/leaflet/tsconfig.json

WebpackCleanupPlugin: 0 file(s) deleted.
Hash: bed3a602e8119da4033d
Version: webpack 1.13.2
Time: 718ms
     Asset       Size  Chunks             Chunk Names
index.html  261 bytes          [emitted]
    + 2 hidden modules

ERROR in ./public_src/libs.ts
Module build failed: Error: ENOENT: no such file or directory, open '/Users/hank/home/hank/js/leaflet/typings/index.d.ts'
    at Error (native)
    at Object.fs.openSync (fs.js:634:18)
    at Object.fs.readFileSync (fs.js:502:33)
    at /Users/hank/home/hank/js/leaflet/node_modules/ts-loader/index.js:193:22
    at Array.forEach (native)
    at ensureTypeScriptInstance (/Users/hank/home/hank/js/leaflet/node_modules/ts-loader/index.js:190:17)
    at Object.loader (/Users/hank/home/hank/js/leaflet/node_modules/ts-loader/index.js:375:14)

ERROR in ./public_src/bootstrap.ts
Module build failed: TypeError: Cannot read property 'getEmitOutput' of null
    at Object.loader (/Users/hank/home/hank/js/leaflet/node_modules/ts-loader/index.js:410:33)
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

Issue #5 asks "Did you install the type definition files by running tsd install? " But that is not part of the installation instructions? In any case I get "tsd not found".

There is more we need to know to get rolling here. I will see what I can learn about typings.

I have : /leaflet/public_src/typings/require.d.ts instead of "index.d.ts"

Solution: run "typings install"

how to use leaflet.TileLayer.WMTS plugin

can you give me an example of how to use the wmts plugin? this plugin can be installed from npm. npm install leaflet-tilelayer-wmts. after installed, how to use it?

Updates?

Are there any plans to update this to LeafLet 1.0?
Is it going to be beneficial at all to move this project to use Angular-CLI?
Are there any plans to add more features/components?

I contribute to a project called SmartCleanWater and we use Python and Django. I have suggested to my team to move on to something like React or Angular, and this repo seems like a very good start.

rxjs dependency problem

When running npm install the following warnings appear:

├─┬ UNMET PEER DEPENDENCY [email protected]

npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of [email protected] but none was installed.

Then when when running webpack the following errors (related to the warning above) occur:

ERROR in /Users/franciscoojeda/code/angular2-leaflet-starter/node_modules/rxjs/operator/mergeMap.d.ts
(56,40): error TS1138: Parameter declaration expected.

ERROR in /Users/franciscoojeda/code/angular2-leaflet-starter/node_modules/rxjs/operator/mergeMap.d.ts
(56,44): error TS1005: ';' expected.

... many more of these errors here

These are the node and npm versions:

node -v
v6.2.1

npm -v
3.9.3

How can I get "npm install" to build the project?

Thanks

Integrate angular2-leaflet

I'm new in working with angular 2 and I want to integrate angular2-leaflet in my application based on ng2-bootstrap template (https://github.com/valor-software/ng2-bootstrap) ,
so how To integrate this module ??

Webpack 2 support

Is it planned to migrate to webpack2?

ERROR in Path must be a string. Received undefined

After running webpack i get this error in CMD:
"ERROR in Path must be a string. Received undefined"

The same text is also in the pulbic/index.html file

How to fix this?

Adding some features

Hi ,

Great Package for starters! If I click on the airports and I want to show a popup with some information. Can you give some guidance?

Thanks
Mrinal

How to use this library

Hi. I am new to Angular 2/4. I am trying to use this lib but I can't figure out how to. Sounds dump but, well am a noob right now. Any help :|

I follow all the basic instructions to setup the project

But it is not running yet, after i run webpack it throws me a shitload of errors where it is not possible to find name: ....

here a few of them:
`ERROR in /Users/Sylvan/Sites/angular2-leaflet-starter/node_modules/angular2/src/common/directives/ng_class.d.ts
(72,35): error TS2304: Cannot find name 'Set'.

ERROR in /Users/Sylvan/Sites/angular2-leaflet-starter/node_modules/angular2/src/common/pipes/async_pipe.d.ts
(25,38): error TS2304: Cannot find name 'Promise'.

ERROR in /Users/Sylvan/Sites/angular2-leaflet-starter/node_modules/angular2/src/http/url_search_params.d.ts
(11,16): error TS2304: Cannot find name 'Map'.

ERROR in /Users/Sylvan/Sites/angular2-leaflet-starter/node_modules/angular2/src/http/headers.d.ts
(43,59): error TS2304: Cannot find name 'Map'.

ERROR in /Users/Sylvan/Sites/angular2-leaflet-starter/node_modules/angular2/src/core/linker/dynamic_component_loader.d.ts
(59,148): error TS2304: Cannot find name 'Promise'`

Grey Tiles

Hi. I'm trying to use this as an example and put this into a project I'm working on.

Generally....what are some of the possible issues when all the tiles aren't rendering and are staying grey? Some load some don't.

Cannot read property 'on' of undefined

Hi.
If I integrated toolbar component, I get the error that
"Cannot read property 'on' of undefined",
I used "rxjs:5.1.5" and "zone.js:0.7.6",
thanks.

Airport layer not working

HELLO,

The airport layer is not working

Need help for integrating leaflet plugin

Hello,
I'm learning Angular and I'm using your implementation as a sandbox. I'm trying to add leaflet-editable to the project. However, it seems there are conflicts between leaflet and leaflet-editable.

I added leaflet-editable to npm dependencies and the following typings: "leaflet-editable": "github:DefinitelyTyped/DefinitelyTyped/leaflet-editable/leaflet-editable.d.ts"

It throws me errors like:
ERROR in E:\Steven\Documents\Angular\angular2-leaflet\typings\globals\leaflet-editable\index.d.ts
(41,21): error TS2315: Type 'LayerGroup' is not generic.

ERROR in E:\Steven\Documents\Angular\angular2-leaflet\typings\globals\leaflet-editable\index.d.ts
(46,25): error TS2315: Type 'LayerGroup' is not generic.

ERROR in E:\Steven\Documents\Angular\angular2-leaflet\typings\globals\leaflet-editable\index.d.ts
(90,39): error TS2503: Cannot find namespace 'Mixin'.

Anyone can help me?

Thank you very much!

marker icon offset

It has been reported that the added marker is not exactly at where the user clicks. Need more investigation on the reason.

Error: DI Error

Hye..

i have no idea about this error... i integrate your code with my project to display using core ui and encounter this issues...i copied your code exactly and do some changes to match with my code..
can u help me to solve it..

ReferenceError: L is not defined Angular 2 RC.5

I'm trying to use with Angle 2 RC5. I'm using angular-cli and what I did was:

$ npm install --save leaflet
$ npm install --save-dev @types/leaflet

ReferenceError: L is not defined
    at new MapService (http://localhost:4200/main.bundle.js:66441:32)
    at DebugAppView._View_MainViewComponent_Host0.createInternal (MainViewComponent.ngfactory.js:20:26)
    at DebugAppView.AppView.create (http://localhost:4200/main.bundle.js:60438:21)
    at DebugAppView.create (http://localhost:4200/main.bundle.js:60651:44)
    at ComponentFactory.create (http://localhost:4200/main.bundle.js:43429:36)
    at ViewContainerRef_.createComponent (http://localhost:4200/main.bundle.js:43998:45)
    at RouterOutlet.activate (http://localhost:4200/main.bundle.js:51268:40)
    at ActivateRoutes.placeComponentIntoOutlet (http://localhost:4200/main.bundle.js:15482:16)
    at ActivateRoutes.activateRoutes (http://localhost:4200/main.bundle.js:15459:22)
    at http://localhost:4200/main.bundle.js:15421:19

Sorry, I know this is not an issue of his example but you have any tips for this error?
Thks.

Refresh of Angular app on every mouse move (the pointermove event)

Hello! First I would like to thank you for the package, it does a great job!
Now about the issue - I've noticed that whenever map is loaded in the application as a regular component, all other component are reloaded with every mouse move. The reason is that the map package is applying the pointermove, pointerup, pointerdown and pointercancel events to the <body> tag, so something is triggered and the Angular app is refreshed.

Steps to recreate:

1. Create and register the following component

import {Component} from "@angular/core";

@Component({
    selector: "test",
    template: `<h1>{{componentValue}}</h1>`
})
export class TestComponent {
    _componentValue: String = 'lalala';
    constructor() { }
    set componentValue(value) {}
    get componentValue() {
        console.log('Somebody is getting the value');
        return this._componentValue;
    }
}

2. Add it somewhere in the app.component.html

3. Load the app and see that on every mouse move the TestComponent is redrawn (the get componentValue() is called)

4. If we remove the map, nothing happend on the mouse move.

I am afraid that this could be the issue with the map itself, maybe you've encountered such problem before?

Is it possible to create a custom map type?

Is it also possible to create a custom tiled map? It would be great than for sure this is the best !

basic help

I am very new to npm, webpack, tsd, etc. I tried npm install npm -g, npm install tsd -g, npm install webpack-dev-server -g, and even threw in a npm init, and a npm install webpack. I get the error: cannot find module 'webpack' when I try runing webpack-dev-server. I've looked at documentation for all the above. Please help.

cannot display airports layer

Hello,

First of all, thanks for sharing this starter. It's super helpful!

I'm running into an issue when clicking on the airport button:

Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for 'x' in 756
TypeError: Cannot use 'in' operator to search for 'x' in 756

I've clone the project and ran npm install && npm run build. Am I missing something?

Thanks again and best regards

Add tests (angular compliant)

Angular projects bootstrapped with angular-cli are initialized with basic jasmine tests. You really should add some tests examples in this example project to show people how to test their leaflet/angular application. It can be really tricky to check the map or tool states...

Application doesn't work with Leaflet 1.0

Hi,
could you update leaflet library to version 1.0?

Sep 27, 2016 — Leaflet 1.0, the fastest, most stable and polished Leaflet release ever, is finally out

Airport layer for other layers

Hello,

The airport geojson doesnt work for other maps. Any reason why?

Thank YOU!

Cannot read property 'slice' of undefined

hi,

i want to take geojson function to put into my project. when i integrate that function with my module i get this error

here is my map.service.ts

import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import { Map } from 'leaflet';
import * as L from 'leaflet.vectorgrid';

@Injectable()
export class MapService{
  public map: Map;
  private vtLayer: any;

  constructor(private http: Http){}

  toggleGeoJson() {
      if (this.vtLayer) {
          this.map.removeLayer(this.vtLayer);
          delete this.vtLayer;
      } else {
          this.http.get("./app/components/maps/data/airports.geojson")
              .map(res => res.json())
              .subscribe(result => {
                  this.vtLayer = L.vectorGrid.slicer(result);
                  this.vtLayer.addTo(this.map);
              });
      }
    }
}

map.components.ts

import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
import { MapService } from './map.service';

import 'leaflet-map';

@Component({
  encapsulation: ViewEncapsulation.None,
  selector: 'maps',
  templateUrl: './app/components/maps/maps.component.html',
  styleUrls: [ './app/components/maps/maps.components.css' ],
  providers: [MapService]
})
export class MapsComponent {

  geoJsonLayeradded: boolean;

  constructor(private _elementRef:ElementRef, private mapService: MapService ) {
  }

  ngOnInit(): void {
    console.log('map component');
  }

  toggleGeoJson(){
      this.geoJsonLayeradded = !this.geoJsonLayeradded;
      this.mapService.toggleGeoJson();
  }

  ngAfterViewInit() {
    let el = this._elementRef.nativeElement.querySelector('.leaflet-maps');

    L.Icon.Default.imagePath = 'image/';

    var map = L.map(el).setView([3.1561, 101.7140], 13);

    L.tileLayer('https://gios.jupem.gov.my/tms/gios-streets/{z}/{x}/{y}@2x.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    var drawnItems = new L.FeatureGroup();
       map.addLayer(drawnItems);
       var drawControl = new L.Control.Draw({
           edit: {
               featureGroup: drawnItems
           },
       });
       map.addControl(drawControl);

    map.on('draw:created', function (e) {
    map.addLayer(e.layer);
  });

    // L.marker([51.5, -0.09]).addTo(map)
    //   .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    //   .openPopup();

  }
}

map.html

<ba-card title="Leaflet Maps">
      <div class="leaflet-maps"></div>
      <button (click)="toggleGeoJson()">get geoJson<button>
    </ba-card>

any suggestion how to solve it??

add component to bindPopup or L.popup

Is there any way to add a custom component to bindpopup or L.popup ?
Thanks you

Blank Map Problem

Thank you for creating this starter project. It's been very helpful.

I've created a leaflet module from your code for my Angular2 project and have it displayed with the RouterOutlet using my side navigation. The issue I'm having is in two parts:

1. When I navigate to the leaflet map page and navigate away and come back I would like the map to remember the position and not re-initialize every time. I have not found a way to do this yet.

2. When I navigate away from the leaflet page and then return the map layer is completely blank except for the Navigation and Marker components. The only way I can get the map to show up again is if I pick a different base map. The map then shows up again.

Thank you!

Can't start app

Hi

I have a problem relate to start application , webpack can't build .

ERROR in /home/rikeisoft/Tài liệu/angular2/angular2-leaflet-starter-master/public_src/libs.ts (5,8): error TS2656: Exported external package typings file '/home/rikeisoft/Tài liệu/angular2/angular2-leaflet-starter-master/node_modules/zone.js/dist/zone.js.d.ts' is not a module. Please contact the package author to update the package definition.

How to integrate with KML in leaflet-plugins?

Hi @haoliangyu thank you for this starter guide, it was a great help with my project. I am trying to integrate with the KML plugin in leaflet-plugins but I'm not having much luck. I tried following your plugin guide but it didn't seem to work for the structure of this plugin.

Do you have any guidance or advice?

How to bind an Angular2 component to DivIcon

I'm curious how you can make a L.Marker into a component.
It'd be really powerful to control the dom but I can't figure out a way to inject component loader in there.