A web mapping application starter based on Angular 2 and Leaflet. This project demo includes basic mapping features:
-
Display base maps from different sources
-
Integrate Font-Awesome
-
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
-
Webpack 2
Support Angular 2.x and Leaflet 1.0 now!
See how it looks at demo page.
Since this project has been reached its initial goal to provide a small and clean code base for Angular 2 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 in very specific purposes), please feel free to submit an issue for dicussion.
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.
If you build and open the app using webpack-dev-server, you will get an geojson not found error when toggling the vector tile layer. It's because external resources are not copied into the memory by webpack-dev-server. Open the public/index.html instead.
This project requires npm (or yarn).
-
Run
npm installoryarn installto install dependencies. -
Run
npm run buildto build the project. -
Open the app at
public/index.html.
-
angular2-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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent