Table of contents • What is Code for History? • Introduction to PWA • Introduction to web map technology • Introduction to Weiwudi • Coming soon • Future issues / improvements 2 日本語 / English
Characteristics • We want to emphasize that for us, information technology is a "means" and not an “objective" • The "objective" is to solve a historical problem, and if necessary, to utilize non-IT means • The first priority is always to solve the problem 32
34 What is PWA? • It is abbreviation of “progressive web app” • Working on offline • Push notification • Can be registered on home screen • No need to be registered on App store • UI/UX like native app Refering to https://www.slideshare.net/i_Pride/pwa-125881791
35 What is PWA? • It is abbreviation of “progressive web app” • Working on offline • Another process named “service worker” runs browser’s background • Service worker retrieves and caches files required for operation before starting • Service worker caches files and data accessed during processing in indexedDB or other database according to processing requests • Push notification • Can be registered on home screen • No need to be registered on App store • UI/UX like native app
38 Projection of web maps – Spherical Mercator Projection • Google invented a map projection method in 2005 to represent a map of the world on the web • It is a kind of Mercator projection, which is characterized by considering the earth as a perfect sphere rather than a rotating ellipsoid • Google discovered that if they use this projection to map the earth, ignoring latitudes above 85.05, where few people live, the map will be in the shape of a square • As a further advantage, Mercator project are suitable for uniform service around the world because of the property that the latitudinal and longitudinal scales coincide in a very small area
39 Specification for delivering a square map as tiles - WMTS • WMTS is a specification that delivers maps around the world, chopped into tiles according to the zoom level • Zoom 0 => 20×20 => 1 tile • Zoom 1 => 21×21 => 4 tiles • Zoom 20 => 220×220 => 1,099,511,627,776 tiles • Providing these tiles with parameters: {z}, {x} and {y} • E.g.: https://example.com/{z}/{x}/{y}.png • In general, the image size of one tile is 256 pixels square (512 pixels in Retina) Cite from https://speakerdeck.com/manaboutcouch/ openstreetmap-for-gis-pros
41 Difficulties in making Web Map PWA • Not only the html, javascript and css to run the PWA, but also the map tile images need to be cached to run the app offline • Caching all of the world's trillion map images is of course impractical • In order to select and cache only the tiles in the range where the app works (or where the user wants to use it), the app author needs to understand the Spherical Mercator coordinates and WMTS specifications, and create and cache a list of necessary tile image URLs
43 How to use Weiwudi (1): Initialize • All details are written in: https://qiita.com/kochizufan/items/b2fe0dffd326f79cf6be • Weiwudi works with Workbox • Serviceworker side: • Frontend JS: importScripts("https://storage.googleapis.com/workbox-cdn/releases/6.0.2/workbox-sw.js"); importScripts("https://cdn.jsdelivr.net/npm/[email protected]/src/weiwudi_sw.js"); // Load Weiwudi import Weiwudi from 'weiwudi'; // Register serviceworker try { // Register service worker await Weiwudi.registerSW('./sw.js', {scope: './'}); ... } catch(e) { // For error cases (E.g. browser doesn't support service worker) ... }
45 • Do bulk download of map tiles: // Fetch all tiles map.addEventListener('proceed', (e) => { // Write some codes for handling event of proceeding to fetch tiles }); map.addEventListener('finish', (e) => { // Write some codes for handling event of finishing to fetch tiles }); map.addEventListener('stop', (e) => { // Write some codes for handling event of stopping to fetch tiles by some errors }); map.addEventListener('canceled', (e) => { // Write some codes for handling event of cancelling to fetch tiles by user }); // Start fetching await map.fetchAll(); How to use Weiwudi (3): Bulk download map tiles
46 • Value of e.parameter • proceed • finish How to use Weiwudi (4): Message objects during bulk download { type: "proceed", // Type of event message: "Proceeding the tile fetching: wmts_map 80% (800 / 1000)", // Event message percent: 80, // % of processed tiles processed: 800, // Number of processed tiles error: 2, // Number of errors(Network errors, etc.) among processed tiles total: 1000, // Number of total tiles mapID: "wmts_map" // Processing map ID } { type: "finish", // Type of event message: "`Fetched all tiles of wmts_map with 2 error cases", // Event message error: 2, // Number of errors among processed tiles total: 1000, // Number of total tiles mapID: "wmts_map" // Processed map ID }
47 • Value of e.parameter • stop • canceled How to use Weiwudi (5): Message objects during bulk download { type: "stop", // Type of event message: "Fetching stopped: wmts_map 800 / 1000", // Event message reason: "...", // Error message from system processed: 800, // Number of processed tiles total: 1000, // Number of total tiles mapID: "wmts_map" // Processed map ID } { type: "canceled", // Type of event message: "Fetching tile of wmts_map is canceled", // Event message mapID: "wmts_map" // Processed map ID }
48 • Get current status of tile cache • Status object How to use Weiwudi (6): Get current status of cache // Get current caching status const status = await map.stats(); { count: 0 // Number of tiles which are cached percent: 0 // % of cached tiles per total tiles size: 0 // Number of tile bytes which are cached total: 8408 // Number of total tiles }
51 • Mbtiles is specification for bulk handling of map tiles • Store all map tile images in SQLite format with x, y, z as key • Mbtiles data are legacies in existing GIS market • …but mainly be used in server side & mobile • Serviceworker which loads mbtiles and extracts it to indexedDB in Weiwudi style is useful • Now developing in sub-branch (sql-wasm) Bulk download using Mbtiles (SQLite)
52 Bulk downloading and extracting web map tiles from mbtiles Serviceworker Web Map API IndexedDB Weiwudi Map Tile Server * Extract images from mbtiles and store them to indexedDB Mbtiles Tile images Tile requests Request mbtiles Mbtiles
53 • Mbtiles is specification for bulk handling of map tiles • Store all map tile images in SQLite format with x, y, z as key • Mbtiles data are legacies in existing GIS market • …but mainly be used in server side & mobile • Serviceworker which loads mbtiles and extracts it to indexedDB in Weiwudi style is useful • Development was almost finished in sub-branch (sql-wasm) • Capability of downloading only one file for whole map data is useful for providing commercial (non-free) map to PWA!!! Bulk download using Mbtiles (SQLite)
55 • Adding the ability to specify the download range as a method argument • Currently, download range is only set in configuration – more flexible range support is needed • Brushing up PWA implementation • We need PWA experts’ help! • Being ready to vector map / 3D map • Recently, vector and 3D map APIs have been at the cutting-edge, and we need to support such specifications • Vector tiles are the same spec with raster tiles, but vector need style information – I have no idea how to support it • 3D tiles – I’m not sure for recent specification • We need vector / 3D GIS experts’ help! Future issues / improvements
kochizufan
murachiakira
coconala_engineer
chiroito
k1low
smasato
sansantech
sugawani
naohachi89
aki_iinuma
fedepaol
poteboy
zenorocha
caitiem20
jponch
eileencodes
tanoku
frogandcode
bryan
ddemaree
denniskardys
jensimmons
mza
philhawksworth