Wednesday, September 13, 2017

Wiring Leaflet, ESRI-leaflet, and Angular for a web map

Be The First To Comment
Basic prototype wiring to map geospatial information using Leaflet, ESRI-leaflet, Angular 4.  There are several nice examples out there, but it is a quick and dirty way of putting all things together and display the map using Angular/Cli.

Step 1. Generate an angular project from angular/cli
                ng new leafletPrototype

Step2. Install all dependencies
a.     Npm install leaflet --save
b.     Nmp install esri-leaflet --save
c.      Npm install @types/leaflet –save

Your pacakage.json will looks like –
"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@types/leaflet": "^1.0.69",
    "core-js": "^2.4.1",
    "esri-leaflet": "^2.1.1",
    "leaflet": "^1.2.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"

Step 3. Configure .angular-cli.json
Add leaflet and esri-leaflet styles and scripts in .angular-cli.json
"styles": [

      "scripts": ["../node_modules/leaflet/dist/leaflet.js",

Step 4. Now, run “ng serve” and see if any errors while importing leaflet libraries.

Thursday, March 3, 2016

Esri Leaflet Dynamic TileLayer Plugin Example

Be The First To Comment
While working in one my Esri-Leaflet based application, I am stumbled on rendering dynamic map layers on tiled basis. Esri leaflet-api does the perfect job on non-tiled layer display but L.esri.DynamicMapLayer, doesn’t provide the tiled dynamic map layers. Looking around I came across the Tiled dynamic layer plugin for esri-leaflet, for displaying the DynamicMapLayer in tiled mode.

Here I have created both non-tiled and tiled DynamicMapLayer version for comparison using plain esri-leaflet and esri-leaflet with plugin.


© 2011 GIS and Remote Sensing Tools, Tips and more .. ToS | Privacy Policy | Sitemap

About Me