Drag and drop isn’t really anything new. The ability to drag a file across network has been with us for quite some time. Photoshop users are pretty comfortable with dragging elements from one layer to another and anyone using Word has likely done a little dragging and dropping. It’s practically ubiquitous at this point.
Except for within the world of GIS.
When was the last time that you dragged a shapefile onto a map? Never, you say?
Well, my (GIS nerd) friends, prepare for your world to be rocked!
Drag and Drop in Javascript is as easy as…
While developing the ESII Tool, it became clear that our clients would really love the ability to quickly swap out basemaps and possibly use some specialized georeferenced imagery, such as GeoTiffs and shapefiles. The ESII tool has two components; the web-based Project Workspace, where projects are planned, and the iPad app, where data collection is implemented. We wanted to be able to bring the drag and drop function to the Project Workspace, written in Javascript.
The exposure of the FileReader API in HTML5, now well supported by the Big 3 browsers, has allowed for fantastic ports of GIS format converters, including binary format converters. The ESRI Shapefile, and the GeoTiff are perhaps the 2 most staple formats of the GIS world representing vector and raster respectively. To be able to drop these data formats into a web map is indeed a miraculous feat for those of us who have whiled many an hour in the bad old days trying to bring these up on a monochrome CRT. Both the Shapefile and GeoTiff JavaScript libraries were obtained via GitHub.
At the heart of these conversions is support for Typed Arrays in JavaScript or rather, the ability to obtain ‘views’ into binary data. With the shapefile converter for example, the zipped file must first be decompressed (using the JsZip library), the PRJ file is then parsed and a proj4.js conversion function is created, then the DBF and SHP files are parsed (including the important differences in Endianness and any necessary projection functions) and converted to GeoJSON, a human-readable format. From there it’s just tossing the GeoJSON at your mapping API of choice and symbolizing as you like.
Drag and Drop your own file
We’ve provided a sample below for you to try your own drag and drop GIS. The widget will support up to 15 megabytes of geogoodness; the GeoTiff needs to be uncompressed and stored in WGS84, while the shapefile can either be zipped or, simply drop the .shp, .prj, and .dbf files on the map and see what happens!
If you don’t have a shapefile handy, you can download one from the RLIS Discovery site.
Set up an account with ESII and do more Drag and Drop GIS
Now that you’ve read about what we did – and dipped your toes into the water – it’s time to try it for yourself. To get started, go to esiitool.com and sign up for an account. Once you’ve got an account set up, you’ll want to create a Site and a Data Collection Effort in a location that you have specialized georeferenced imagery. It is here, during this stage, that you can drag and drop a geotiff, or shape file onto your map and it will act as a layer that you can turn on or off.
Try it out for yourself.