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.

Read More

Compute zonal statistics on area of interest polygon on fly

Draft to compute zonal statistics on area of interest polygon or shape draw on leaflet using PostgreSql and Java -

Geometry extracted from leaflet as GeoJson.

Polygon-
{"type":"Feature","properties":{"desc":null,"image":null},"geometry":{"type":"Polygon","coordinates":[[[-117.103271484375,34.264026473152875],[-117.1142578125,34.14818102254435],[-117.03186035156251,34.10498222546687],[-116.91925048828124,34.14363482031264],[-116.94946289062499,34.25494631082515],[-117.0867919921875,34.252676117101515],[-117.103271484375,34.264026473152875]]]}}


{"type":"Feature","properties":{"desc":null,"image":null},"geometry":{"type":"Polygon","coordinates":[[[-116.86981201171875,34.11407854333859],[-116.86981201171875,34.24132422972854],[-116.71874999999999,34.24132422972854],[-116.71874999999999,34.11407854333859],[-116.86981201171875,34.11407854333859]]]}}

Point-
{"type":"Feature","properties":{"desc":null,"image":null},"geometry":{"type":"Point","coordinates":[-116.9879150390625,34.048108084909835]}}

Area of GeoJson

Select (ST_Area(ST_GeomFromText

('POLYGON ((-117.16918945312501 34.27083595165,-117.1307373046875 34.166363384737892,-117.00988769531251 34.161818161230386,-116.93298339843751 34.239053668516412,-116.98516845703126 34.27083595165,-117.16918945312501 34.27083595165))',4326)))

Zonal statistics for each raster tile -

SELECT rid, (ST_SummaryStats (ST_Clip(rast,ST_GeomFromText('POLYGON ((-117.16918945312501 34.27083595165,-117.1307373046875 34.166363384737892,-117.00988769531251 34.161818161230386,-116.93298339843751 34.239053668516412,-116.98516845703126 34.27083595165,-117.16918945312501 34.27083595165))',4326),true))).*
FROM public.biodiv_ssolnw_wgs84
WHERE ST_Intersects
(rast,ST_GeomFromText
('POLYGON ((-117.16918945312501 34.27083595165,-117.1307373046875 34.166363384737892,-117.00988769531251 34.161818161230386,-116.93298339843751 34.239053668516412,-116.98516845703126 34.27083595165,-117.16918945312501 34.27083595165))',4326))
Group By rid

Read More

Esri Leaflet Dynamic TileLayer Plugin Example

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.

Read More

Leaflet WMS layer custom projection on fly

For most of the WMS mapping applications the Google Web Mercator (GWM) projection is sufficient. The GWM is default standard for web mapping and widley accepted by Bing, Google, OSM, OpenLayers(default), and Leaflets(default). However some mapping application required custom projection other than Google Mercator projection to display data. Then, how to project/re-project the data other than wms's default projection, GWM.

The following snippet shows the WMS layer custom projection in LEAFLET for  Albers equal area and UTM zone 13.

Step 1.

First of all include -
         leaflet.js
         proj4.js
         proj4leaflet.js  in following order.    

     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />  
     <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet-src.js"></script>  
     <script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.0.0/proj4.js"></script>  
     <script src="http://mapserv.utah.gov/cdn/examples/proj4leaflet.js"></script>  

Step 2: Create new Proj4Leaflet CRS

Find your desired custom projection type in http://spatialreference.org/ and punch the the projection variable in the following code snippet.

Read More

Tips to share a leaflet map with multiple ROIs

Do you have a Leaflet map? Yes. Can you panned and and zoomed to a particular event or ROI in the map? Yes. Then, how can you share that map zoomed or centered with ROI/events to your webpage or email as a link? One of the answers may be set the zoom level and set view near the ROI.  Alright, what will you do if you have a map with multiple ROI/events? Do you make multiple maps with multiple zoom level and view? You can, but probably not a good idea to do that. 

The solution comes here, leaflet-hash.js, solves your needs, it is a JavaScript library written by Michael Lawrence Evans, which appends the URL hashes to web pages automatically and the hash changes with Leaflet map on drag or zoom. The hash consists of map zoom level and latitude/longitude of the center of map viewport, everything you need to share the map with focused ROI as link in following simple steps:

Read More

How to display the MesoWest weather stations in Leaflet.js?

Snippet to display MesoWest weather stations in Leaflet.

 //Hold markers group  
 var mesoMarkersGroup=new L.LayerGroup();   
 //Get weather information from Mesowest for the state VA  
 $.getJSON('http://api.mesowest.net/stations?callback=?',  
      {  
           state:'va',                   
           latestobs:1,  
           token:'demoToken'  
      },   
      function (data)   
      {  //Loop through all the weather stations  
        for(var i=0;i<data.STATION.length;i++)  
           {  
            try{  
                 var stn = data.STATION[i];  
                 var dat = stn.OBSERVATIONS;  
                 var stnInfo =stn.NAME.toUpperCase();  
                 var elev=parseInt(stn.ELEVATION);            
                 stnInfo = "<b>Air Temp:&nbsp;</b>"+Math.round(dat.air_temp[1])+"&deg;F"+ "</br><b>Wind Speed:&nbsp;</b>"+Math.round(dat.wind_speed[1]* 1.150)+"MPH"+"</br>  
                 +<b>Wind Direction:&nbsp;</b>"+getCardinalDirection(Math.round(dat.wind_direction[1]))+"</br><b>Relative Humidity:&nbsp;</b>"+dat.relative_humidity[1]+"%"+"</br>  
                 +<b>Elevation:&nbsp;</b>"+elev+"&prime;";       
                 //Add stations into Leaflet markers group  
                 L.marker(L.latLng(stn.LATITUDE,stn.LONGITUDE),{title:stn.NAME.toUpperCase()}).bindPopup(stnInfo).addTo(mesoMarkersGroup);  
            }    
            catch(e)  
            {  
                alert("Error! "+ e);  
            }  
           }   
  })       
 .done(function()  
 {  
 })  
 .fail(function()  
 {       
      alert("Could not access the MesoWest!");  
 });  
 //Add markers group to the Map  
 map.addLayer(mesoMarkersGroup);  

Read More

Leaflet TypeError: t is null

There are may be several reasons for TypeError:t is null, but I solved my problem by changing-

 L.marker(LATITUDE,LONGITUDE).bindPopup("Info").addTo(map);  
 to  
 L.marker(L.latLng(LATITUDE,LONGITUDE)).bindPopup("Info").addTo(map);  

Read More