Slides from - Seeing your place in a new way Utilizing Yarn Package Management in a React SPA Map Viewer - a talk I gave at NodeconfEU 2018

1. Seeing your place in a new wayUtilizing Yarn Package a Management in React SPA Map Viewer
by Melissa Lynn Auclaire

2. Thank you!

3. About Me
Software Engineer at Stroly (Product Development Team)
Which means that I (mostly) develop web and mobile apps (Android app)
My goal is to Engineer products which ensure customer success!
Social Media: Also, I tweet sometimes Twitter/IG @kiyomizumia

4. The Idea of Stroly
Stroly:
We are building a mapping platform, which encourages people around the world to express and share
diverse perspectives of their places.
Our Mission:
To help people share the way they see the world.
The Vision:
We see Stroly as a new form of media, and a platform which can help people to share diverse ways of
thinking.
Our role is to change the situation of someone looking at a place with a fixed mindset by allowing that
person to see something about a place that they might not have been able to otherwise.

5. In practical terms:
We make it easy to find, use, and share experiences by allowing users to share contexts via web services and
organize this information in terms of technology.
In the future, we believe the demand for this context, in addition to content will increase as tools like this
are further developed, and our devices enable new forms of expression.

6. Talk Overview
Mapping Basics Stroly Service
Leaflet
Map Creation
Web Map Viewer
Demo
Yarn vs NPM Conclusion
Build Process
Libraries
React Leaflet/Mapbox GL
Future Endeavors

7. Mapping Basics - Leaflet
The mapping backend of Stroly is created with Leaflet
Benefit: Lightweight, portable, FOSS
Vs Openlayers
Lightweight: 170k lines versus 122k lines
Vs ESRI
Vs Google API
Costs money...

8. Leaflet Plugin Architecture
Leaflet Style Editor yarn add leaflet-styleeditor
A plugin for editing icons…
Leaflet Marker Clusters yarn add leaflet.markercluster
A plugin for aggregating point data…
Leaflet Routing Machine yarn add leaflet-routing-machine
A plugin for routing...
LRM Routing Example - Across Ireland!

9. Leaflet Map Object
Leaflet yarn add leaflet
var L = require('leaflet');
var map = L.map('mapid', {options})
.setView([35, 135.75], 13);
L.Map Options
● Center (in [lat lng] order)
● Zoom Range
● Animation
● Pitch and Bearing (Mapbox Leaflet GL)

10. Leaflet Interaction Controls
Controls are map elements used to handle user interaction with the map (HTML elements)
You can create an instance of a control using its constructor method, passing options, and adding to map
Default Controls:
Control.Zoom - visible by default
Control.Attribution - handles citation of map layers, visible by default
Control.Scale - a scale bar
Control.Layers - allows switching background layers and turning overlay layers on and off

11. Leaflet Layers
Leaflet supports both raster and vector layers
Raster Layers: Tile Layers, Images, Video Overlays
Vector Layers: Circle, CircleMarker, Rectangle, SVG (Scalable Vector Graphics),
Polygon, Polyline...
Leaflet Providers plugin: yarn add leaflet-providers
OSM, Thunderforest, Stamen, ESRI, CartoDB etc.

12. Layers & Overlays - Baselayers
Base Layers (Raster Layers)
Basemap Layer - a raster background layer
Tiling - a tile layer, or an individual image (256x256) indexed spatially
Tiles can be added to Layer Groups and Feature Groups
Layer Group and Feature Group
Layer group - Used to group several layers and handle them as one
Feature group - An extended layer group that makes it easier to do the same thing to all its members

13. Layers & Overlays - Basemap (Raster Layers)
Example of an Image Overlay
(A Watershed Moment...)

15. Vector UI Layers
Native Leaflet Vector Layers:
Marker
Popup
Tooltip

16. UI Layers - Marker
Leaflet markers refer to point geometry positioned on a map
var marker = L.marker([35, 135.75], {options});
Custom Icon Plugins - Lots of libraries to use...
L.Awesome-Markers - yarn add leaflet.awesome-markers
L.BeautifyMarker - yarn add leaflet.beautifymarker
L.extramarkers - yarn add leaflet-extra-markers
Leaflet-mapkey-icon - yarn add leaflet-mapkey-icon

17. UI Layers - Popup
A convenient way of displaying a message or modal dialogue
on a map.
Editable - custom CSS, HTML etc.

18. UI Layers - Tooltip
A way to display small texts on top of map layers.
Vector Layers - Shapes
Circle, CircleMarker, Rectangle, Canvas, SVG

19. Vector Layers & Overlays
Polyline
In addition to:
Circle, CircleMarker, Square, Rectangle, SVG etc.
Native Leaflet Vector Layers:
Polyline
Path
Polygon
Winding order

20. Vector Layers & Overlays - Polyline
On the way there…
[34.996054, 135.759555], [34.995486, 135.759555], [34.995436, 135.756671], [34.989218, 135.756783],
[34.989154, 135.752884], [34.986788, 135.752909], [34.986657, 135.750882]
On the way back…
[34.989133, 135.75084], [34.989144, 135.752894], [34.991456, 135.752881], [34.991488, 135.753142],
[34.993215, 135.753194], [34.99414, 135.753186], [34.994167, 135.756661], [34.994458, 135.756661],
[34.994443,135.759646], [34.996054, 135.759555]

21. Vector Layers &
Overlays
Native Leaflet Vector Layers:
Polyline
Path
Polygon
Winding order

22. Vector Layers & Overlays - Polygon
Two Shinto templates near my home: Higashi Honganji and Nishi Honganji
(East and West Temples of the Original Vow)
Polygon Points - [ [[34.993251, 135.757124], [34.993246, 135.759593],
[34.989558, 135.759622], [34.989531, 135.757206]], [[34.992862, 135.749261],
[34.992855, 135.752758], [34.990436, 135.752848], [34.990302, 135.749311]] ]

23. Vector Layers &
Overlays
Native Leaflet Vector Layers
Marker
Polyline
Path
Polygon
Winding order
Image Copyright Mapbox © 2018, Mapbox Vector Tile Specification https://www.mapbox.com/vector-tiles/specification/

24. Vector Layers &
Overlays -
Winding Order
Counter-clockwise winding cancels clockwise
winding in polygons
Polygons can be expressed as multi-dimensional
arrays to create complex shapes

25. Layers and Overlays - Tiling
Custom Library - Stroly MapMaker
This is a backend service that takes an image and
creates a set of tiles and a map thumbnail image
3 separate scripts:
thumbnailer.py: does only the thumbnail
tiles.py: create the tiles
job.py: is called by the job queue
Tiles are spatially indexed and put back together
on the client-side by Illustmap.js
Steps:
● open the picture at the path given
● generate a thumbnail
● generate tiles
● generate the database from those tiles
● upload both the database and the tiles to S3 and the thumbnails to a
thumbnail bucket

28. Web Mapping Libraries and APIs
Geolocation
KML

29. Geolocation
We use Mapquest and Mapbox APIs for forward address
geocoding
We use Nominatim for reverse geocoding of user location
Using Nominatim for geocoding was seen as an
ethical issue at Stroly
Geocoding occurs on both the client and server side
(using location and navigator.onLine)

30. KML
KML is a file format used to store and display geographic data (Open Geospatial Consortium since 2008)
You can create KML files to pinpoint locations, add image and video overlays etc.
Leaflet-omnivore Plugin yarn add leaflet-omnivore
Plug-in to load GeoJSON, GPX, KML, CSV, WKT, TopoJSON data *
The main reason to use KML is to store and retrieve data on a server
Reference: https://developers.google.com/kml/documentation/kmlreference

31. Stroly Service
Web Map Viewer
Web Map Editor
Single Page Application - Static HTML UI Design
Mapping (Demo)

32. An Example - Stroly.com
On Stroly, maps are organized on the Stroly homepage as a series
of thumbnails
Clicking on any of these thumbnails opens a Web Map Viewer for
that particular map, which shows your current position
Users can also use a geolocation feature to find maps around them
The sorting order of the maps can be changed
Most Recent
Popular
Smallest to Largest
Largest to Smallest
Users can pan and zoom the analog maps and compare their
position on them to a real world map
Map rights and attributions are owned by users - Stroly provides the
platform

33. Maps & Boards
Maps - Stroly users can create and organize maps by uploading an image and
plotting points for that image on a map
Boards are a way of organizing a group of maps according to a particular theme
Boards allow users to share their interests with friends and create collections of
themed maps

34. Web Map Viewer
An SPA for viewing maps (deployed to Amazon S3)
We use Amazon Cloudfront for our Content Delivery Network
Hermes (Mapping Engine) - Collects events from map usage:
● Geolocation changed
● Map Changed
● Opened info for a landmark
Illustmap
A wrapper library written in TypeScript to represent illustrated maps
(The Stand Alone viewer only depends on Illustmap directly)

35. Web Map Viewer - Screenshot

36. Web Map Viewer - Points of Interest (POI)

37. Web Map Viewer - Board View

38. Web Map Viewer - Landmarks

39. Web Map Editor

40. Plot points on a visual map -
At least 3 points are needed to form a single triangle
(An approximate location can be attained on a drawn map, relative to a programmatic one)
More points mean more accuracy!
Landmarks and POI (Points of Interest)
Can also be added as an optional mapping layer...
Web Map Editor - Use Cases

41. Web Map Editor - Use Cases

42. Web Map Editor - Plotting Points

43. Web Map Editor - Mapping

44. Web Map Editor - Landmarks

45. Demo

46. Other examples of
Leaflet
Shortlist of other companies using Leaflet
Major Services
Foursquare
Craigslist
StreetEasy
Citi-data
News
New York Times
The Boston Globe
The Guardian
The Wall Street Journal
Government
NASA / USGS etc.

47. Server-side Infrastructure
Stroly Database (RDS)
Batch Processing vs. Lambda Processing
Stroly Analytics
Map Tiling Mechanism

48. Stroly Database (RDS)
PostgreSQL + PostGIS (sqlite for mobile) database is is hosted on AWS RDS
We use PostGIS shapes for bounding box contains functions on maps (SRID 4326)
RDS Uses Data Replication for several availability zones in AWS (US-East)
How does this process work?
Complex geoprocessing and tile creations is done with both AWS Batch
processes and via AWS Lambda

49. Batch Processing vs Lambda Processing
Image processing for thumbnails and tiles is performed by AWS lambda by default on ods3.illustmap.org
Cutoff point for image processing time is 15 min, after which processing is done under AWS Batch (job is added to
batch queue)
The biggest map on Stroly is 270 million pixels, and takes 5-6 minutes to process completely since moving to
US-East availability zone
>15 min?
YES
NO
ods3.illustmap.org Update RDS
Tables
AWS Batch
AWS Lambda
Begin in Lambda Queue
Processing Time

50. Stroly Analytics
Analytics Dashboard - We collect metrics on users and maps!
Map views - how many times a map has been viewed...
Landmarks - engagement for points of interest...
Users - number of users per day, time of day, location...
Language - User language configuration settings...
Operating System - Desktop, mobile etc...
Used For:
Geoprocessing
Application service improvements
Breadcrumbs and location tracking / stream collection
Stroly’s data collection is GDPR compliant and described in the Stroly Privacy Policy

51. Map Tiling Mechanism
Tiles are created are 256 x 256 pixels per tile (40mpx 6000x7000 max)
The server creates both map tiles and thumbnail tiles (128x128 and
1024x1024) for a map, as well as board thumbnails using job.py in the
lambda queue
Server then uses matplotlib.pyplot and os.walk on the server side image
directory to make the map thumbnails
Map tiles and thumbnails are created from the original image with PIL
at 75 (default) compression quality, spatially indexed and reconstructed on the client side by Illustmap
Other Node tiling libraries: Tile Mill, Tile Oven (fork of Tile Mill) etc.
Tile Mill: yarn add tile-mill
Tile Oven : git clone https://github.com/florianf/tileoven.git && cd tileoven && yarn

52. Yarn Build Process
Yarn Build Process and Workflow
Yarn Libraries
Yarn vs. NPM

53. Yarn Build Process and Workflow
Yarn -> Web Map Viewer -> Illustmap -> Leaflet
Install dependencies:
yarn
Build library:
yarn build
Run tests:
yarn test
Recompile on change:
yarn dev
Build
Illustmap (UI)
Leaflet
(Mapping Backend)
Stroly Map Viewer
git+ssh
git+ssh
Custom Leaflet supports rotation on mobile
(Illustmap contains custom Leaflet)

54. Yarn Libraries
We are using 610 yarn packages in Illustmap at --depth=0. (Leaflet uses 506 for comparison)
Illustmap Yarn Tests via the Chai and Jest testing frameworks, which includes tests for KML validation and
logistics (regression) testing
We also use wicked-good-xpath (the fastest xpath validator in the west) for KML validation as well as point
is-in-boundary tests for logistical testing
wgxpath plugin: yarn add wicked-good-xpath
Various other libraries….

55. Yarn vs NPM
Yarn vs NPM
Linting via TSLint + Security
(sha512 encryption) + Speed
(Illustmap Linter for CI/CD)
Other useful Yarn features:
Auto-generation of log files
License checks
Download packages offline (deterministic installation)
NPM Audit for
Leaflet
NPM Audit for
Beefy JS

56. Future Undertakings & Conclusion
React Leaflet
Mapbox GL JS

57. React Leaflet
We are considering adding React components
To Leaflet to do more rendering on the client side
Whether we are doing SSR now is debatable…

58. Mapbox GL JS
Mapbox GL JS is a JavaScript library that uses WebGL to
render interactive maps from vector tiles and Mapbox styles.
Mapbox Studio - (Like photoshop for maps!)
Mapbox has the advantage of using pitch and bearing
to visualize a map, has support for React components

59. 12 maps that changed the world -
https://www.theatlantic.com/international/archive/2013/12/12-maps-that-changed-the-world/282666/
How to set up Leaflet in NPM -
https://makerlog.org/posts/leaflet-basics
Shortlist of companies which use Leaflet -
https://github.com/Leaflet/Leaflet/issues/400
Links and Resources

60. Smartphone Icon made by Smashicons from https://www.flaticon.com/authors/smashicons
Customer Icon and Eye Icon made by Freepik from http://www.freepik.com
Website Icon made by Darius Dan from https://www.flaticon.com/authors/darius-dan
Map Icon made by Pixel Buddha from https://www.flaticon.com/authors/pixel-buddha
Mapbox Vector Tile Specification - Winding Order Diagram from https://www.mapbox.com/vector-tiles/specification/
Tiles Icon made by tim2101 from https://www.flaticon.com/authors/tim2101
Attributions

61. Thank you!
Follow me on Twitter / Instagram: @kiyomizumia
I will be posting my slides on slideshare for links and references