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

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": [

        "styles.scss",

        "../node_modules/leaflet/dist/leaflet.css",

        "../node_modules/leaflet-draw/dist/leaflet.draw.css"

      ],

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

        "../node_modules/esri-leaflet/dist/esri-leaflet.js"

      ],

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

Step 5. Then create a leaflet map component and add leaflet codes 

import { Component, OnInit } from '@angular/core';

declare const L:any;

@Component({

selector: 'ecol-viewer-climatemap',

templateUrl: './climatemap.component.html',

styleUrls: ['./climatemap.component.scss']

})

export class ClimatemapComponent implements OnInit {

leafletTestText = 'Leaflet and Esri-leaflet prototype with Angular 4';

constructor() {

}

ngOnInit() {

const osmUrl = '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

const osm = new L.TileLayer(osmUrl, {minZoom: 3 , maxZoom: 12});

const map = L.map('leafletmap', {

zoomControl: false,

center: L.latLng(35.29, -112),

zoom: 5,

minZoom: 4,

maxZoom: 12

});

L.esri.basemapLayer("Gray").addTo(map);

const andreas = L.tileLayer.wms('//fs.bioe.orst.edu:6443/arcgis/services/SoCal_SEVA/biodiv_ssolnw/ImageServer/WMSServer', {

layers: '0',

format: 'image/png',

transparent: true,

}).addTo(map);

}

}

Check out in Github - https://github.com/alamsal/LeafletAngular4

Angular , esri-leaflet , Leaflet