GIS and Remote Sensing Tools, Tips and more ..

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-...

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],...

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.

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/l...

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:

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)+...

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);