JavaScript in 2019

It's been five-and-a-half years since I last blogged about making maps in a browser using JavaScript. It's cool that my old Syriac Places demo still works. Yay for web standards. A lot of things have changed in the meanwhile and this is my first chance to acknowledge those changes.

I've been writing JavaScript every other day at work for the past 3 weeks, building a web app to give Sales and sales-supporting teams at Mapbox insight into our imagery basemap. It's HTML and mostly Vanilla JS and has been a fun exercise. Since it's for internal customers only I can use new browser and JavaScript features.

Mapbox GL JS, the JavaScript mapping library that's maintained by my coworkers, is the closest thing to a framework in my app. My current project is the first in which I've used Mapbox GL JS. I'd like to point out some features and aspects of the framework that I find especially notable:

  • Good Examples: https://docs.mapbox.com/mapbox-gl-js/examples/, I cribbed heavily from these.
  • Handy map drawing abstraction. I have a GeoJSON Source defined in my script. When I remove the features from the source, they disappear from the map. When I add features to the source, they appear on the map. So quickly that .
  • Expressions: In several parts of its API, Mapbox GL JS can evaluate Lisp-like expressions composed of JavaScript arrays. ["+", 4, ["*", 3, 2]] evaluates to 4 + (3 * 2), or 10. In addition to the standard JavaScript operators, the namespace of GL JS expressions operators contains feature property and map attribute getters. Advantages of using JavaScript objects instead of conventional Lisp (like Snuggs): developers get syntax highlighting help when writing expressions, and can use JavaScript to build expressions.

Turf

  • In my app I'm creating features on the fly derived from the intersections of features in my map layers. I'm using Turf for the first time ever. Turf is fast. Like Fiona, Rasterio, and Shapely, Turf's functions take and return GeoJSON-like objects. I like it a lot. Thanks, Morgan Herlocker.

JavaScript

  • I'm also using ES6 features for the first time ever. Arrow functions are like Scheme's lambda expressions, and Python's lambda forms. Here I'm sorting features by a date, descending order, without needing to type "function" or "return". Handy.

    features.sort((a, b) => b.properties.render_date - a.properties.render_date)

it's cool that my old Syriac Places demo still works: http://sgillies.github.io/syriaca/. Yay for web standards.