Skip to content

Commit

Permalink
Organize modules
Browse files Browse the repository at this point in the history
  • Loading branch information
ibgreen committed Dec 12, 2020
1 parent 1d40687 commit b8c2995
Show file tree
Hide file tree
Showing 43 changed files with 10,965 additions and 1,774 deletions.
6 changes: 6 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
libs/
dist/
node_modules/
workers/
dist.js
*.min.js
34 changes: 34 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// prettier-ignore
module.exports = {
parserOptions: {
ecmaVersion: 2018
},
plugins: ['react', 'import'],
extends: ['uber-jsx', 'uber-es2015', 'prettier', 'prettier/react', 'plugin:import/errors'],
overrides: [{
files: ['*.spec.js', 'webpack.config.js', '**/bundle/*.js'],
rules: {
'import/no-extraneous-dependencies': 0
}
}],
settings: {
'import/core-modules': [
'@luma.gl/core',
'@luma.gl/constants',
'math.gl',
'@math.gl/web-mercator'
],
react: {
version: 'detect'
}
},
rules: {
'guard-for-in': 0,
'no-inline-comments': 0,
camelcase: 0,
'react/forbid-prop-types': 0,
'react/no-deprecated': 0,
'import/no-unresolved': ['error', {ignore: ['test']}],
'import/no-extraneous-dependencies': 0 // ['error', {devDependencies: false, peerDependencies: true}]
}
};
129 changes: 22 additions & 107 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,109 +1,24 @@
auto-doc/

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
build/
dist/
**/*.min.js
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port
coverage/
test/**/*-failed.png
.nyc_output/
.reify-cache/

*/**/yarn.lock
yarn-error.log
package-lock.json

.vscode/
.project
.idea
.DS_Store
*.zip
*.rar
*.log
.exit_code

# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# Jupyter Notebook
.ipynb_checkpoints
12 changes: 12 additions & 0 deletions .markdownlintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"default": true,
"colors": true,
"header-increment": false,
"line-length": false,
"ul-style": {"style": "sublist"},
"no-trailing-punctuation": {"punctuation": ".,;:"},
"no-duplicate-header": false,
"no-inline-html": false,
"no-hard-tabs": false,
"whitespace": false
}
5 changes: 5 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
workers/
**/dist*/**/*.js
dist.js
*.min.js
*.md
5 changes: 5 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
printWidth: 100
semi: true
singleQuote: true
trailingComma: none
bracketSpacing: false
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2020 Kyle Barron
Copyright (c) 2020 Unfolded, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
130 changes: 1 addition & 129 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,131 +1,3 @@
# basemap-layers

An implementation of a subset of the [Mapbox Style
Specification][mapbox_style_spec] using deck.gl layers.

_A work in progress_.

[mapbox_style_spec]: https://docs.mapbox.com/mapbox-gl-js/style-spec/

## Motivation

Mapbox GL JS is now closed source, and a built-in simple deck.gl solution may be
enough for many applications where the data visualization is more important than
the basemap.

This is not intended to be a full basemap implementation.

## Mapbox Style Spec Primer

The Mapbox Style Specification is a JSON document with two main parts, a `sources` object, and a `layers` array.

The `sources` object describes how to load each source. For example, a
"satellite streets" style might have two sources: one a raster source with
satellite imagery and the other a vector tile source with items to display on
top of the imagery. Such an object might look like:

```json
"sources": {
"vector-source": {
"type": "vector",
"url": "https://example.com/tiles/vector-tiles.json"
},
"satellite-source": {
"type": "raster",
"url": "https://example.com/tiles/satellite-tiles.json"
}
}
```

Here the keys `vector-source` and `satellite-source` describe each source that
can later be referenced from the `layers` object. Each `url` points to a
[TileJSON file][tilejson], which contains metadata describing how to load each
individual tile of the dataset.

[tilejson]: https://github.com/mapbox/tilejson-spec/blob/master/2.2.0/README.md

`layers` contains an array of objects, where each object defines an individual layer to render.

```json
"layers": [
{
"id": "satellite-layer",
"type": "raster",
"source": "satellite-source",
"minzoom": 0,
"maxzoom": 18,
"paint": {"raster-opacity": 1}
},
{
"id": "landuse_residential",
"type": "fill",
"source": "vector-source",
"source-layer": "landuse",
"maxzoom": 8,
"filter": ["==", "class", "residential"],
"paint": {
"fill-color": {
"base": 1,
"stops": [
[9, "hsla(0, 3%, 85%, 0.84)"],
[12, "hsla(35, 57%, 88%, 0.49)"]
]
}
}
},
{
"id": "waterway_river",
"type": "line",
"source": "vector-source",
"source-layer": "waterway",
"filter": ["all", ["==", "class", "river"], ["!=", "brunnel", "tunnel"]],
"layout": {"line-cap": "round"},
"paint": {
"line-color": "#a0c8f0",
"line-width": {"base": 1.2, "stops": [[11, 0.5], [20, 6]]}
}
}
]
```

The above describes a sequence of three layers. Later layers are rendered on top
of earlier layers, so this would show two vector layers on top of a satellite
layer.

Overview of each key:

- `id`: must be unique to each layer
- `type`: one of: `background`, `fill`, `line`, `symbol`, `raster`, `circle`, `fill`,-extrusion `heatmap`, `hillshade`, `sky` (v2 only).
- `source`: must be one of the keys defined in the initial `sources` object. So here each must be either `satellite-source` or `vector-source`.
- `source-layer`: For vector sources, each styling layer is rendered on only a single vector tile layer within the source. So when `source-layer` is `landuse`, the vector tiles provided by the `vector-source` source are expected to contain a layer named `landuse`, and this styling layer will apply only to that layer. This is required for vector sources.
- `minzoom`, `maxzoom`: zoom range for layer. Falls back to source's available zoom range, but can be a narrower range than the source provides
- `filter`: A filter expression that is tested against every object within the vector tile layer.
- `layout`: A layout expression. These are less commonly used, and usually don't have a great equivalent in deck.gl.
- `paint`: Properties used for styling. Each layer type has a list of available paint properties. All properties except `visibility` are prefixed by the layer's type, hence `fill-color` and `line-width`. The value of each paint property can be either a constant value or color, or a styling expression that changes appearance based on zoom.

## Implementation

The simplest approach would be to map each Mapbox layer to a deck.gl layer. Most
Mapbox layers have a deck.gl equivalent:

| Mapbox Layer Type | deck.gl Layer |
| ----------------- | --------------------------- |
| `background` | `BitmapLayer` |
| `fill` | `MVTLayer` (`PolygonLayer`) |
| `line` | `MVTLayer` (`LineLayer`) |
| `symbol` | `IconLayer/TextLayer` |
| `raster` | `BitmapLayer` |
| `circle` | `MVTLayer` ? |
| `fill-extrusion` | `MVTLayer` (`PolygonLayer`) |
| `heatmap` | `HeatmapLayer` |
| `hillshade` | N/A |
| `sky` (v2 only) | N/A |

Mapbox GL JS [exposes a standalone parser][mapbox-style-spec-js] for their style specification. (This is apparently [still open source][mapbox-style-spec-js-license] in v2). This parser is quite helpful, it:

- parses all permissible color descriptions into an rgba array
- Evaluates filter expressions for each GeoJSON `Feature` input
- Evaluates paint expressions given the zoom level

[mapbox-style-spec-js]: https://github.com/mapbox/mapbox-gl-js/blob/main/src/style-spec/README.md
[mapbox-style-spec-js-license]: https://github.com/mapbox/mapbox-gl-js/blob/0063cbd10a97218fb6a0f64c99bf18609b918f4c/src/style-spec/package.json#L11
TBA from RFC
17 changes: 17 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# basemap-layers

> Note that this project has limited goals and scope. It is not intended to be a replacement for commercial basemaps, and it does not provide the level of support that is provided by commercial basemaps. The developer team behind this module certainly welcomes contributors and funding, but we are not currently able to provide the levels of active support for the community as the core deck.gl project.
[deck.gl](https://deck.gl) basemap layers.

The primary export is the `BaseMapLayer` layer, which accepts
- [A vector tile URL]()
- [A style specification]()

## Overview

Renders the desired datasets via a composite deck.gl layer that builds on `MVTTileLayer` or `TerrainLayer`.

## License

MIT License
Loading

0 comments on commit b8c2995

Please sign in to comment.