This is an online JavaScript-based GIS platform under heavy development, with these goals:
Small, efficient and MIT-licensed.
- No bloat. Keep entire
dependencies
hierarchy minimal. - Same applies to
devDependencies
. - Use suitable caching, compression, data structures and algorithms.
Easy to use.
- Targeting users who could handle desktop GIS software.
- Convention over configuration. Allow, but don't require changing settings.
No need to install, register or login.
- Back-end is optional, anything serving static files over HTTP is enough.
- Compute everything client-side when possible.
- Support local file import and export.
Easy to extend or use parts in other projects.
- Aggressively split everything into general-purpose NPM packages.
- Simplest possible monorepo structure allows heavy overall customization for specific projects.
- Keep all parts small and documented.
- Tooling choice criteria:
- Compatibility with other goals and tooling.
- Size and efficiency. Is the tool actually needed?
- Developer ease of use.
- Popularity.
Latest and greatest technologies (as of Q1 2018).
- ES6 syntax, statically typed using TypeScript.
- mobx-state-tree and classy-mst for easy state management without boilerplate.
- Leaflet maps with vector tiles and WebGL rendering.
- PhosphorJS and phosphor-float-area for easy UI customization by end users.
- SystemJS and cbuild for ES6 imports and bundling without backend requirements.
- dgrid for one tree grid widget with all the bells and whistles, because there's still no suitably licensed alternative.
- React for easy custom UI components.
Click on the goals to see what they mean in practice.
This is a single repository containing several Charto packages. It follows the alle
model, with packages under packages/node_modules
.
Most devDependencies
are only in the top-level package.json
.
Contents:
Package | NPM | Description |
---|---|---|
cgeo | Geographic data types | |
cgeo-calc | computational geometry algorithms for cgeo types | |
cgeo-cpak | cpak import/export for cgeo types | |
cgeo-wkb | WKB import/export for cgeo types | |
cgeo-wkt | WKT export for cgeo types | |
charto-3d | Small WebGL helper library | |
charto-leaflet | Useful classes for Leaflet | |
charto-model | Geodata model using mobx-state-tree | |
charto-render | Geodata renderer | |
geotree | Geodata storage | |
mst-dstore | dstore implementation backed by mobx-state-tree | |
phosphor-dgrid | Full-featured Dojo-based grid widget for PhosphorJS | |
phosphor-leaflet | Leaflet widget for PhosphorJS |
git clone https://github.com/charto/charto.git
cd charto
npm install
npm run build
npm start
Then navigate to: http://localhost:8080/
The frontend uses SystemJS.
It works directly from the public directory of any HTTP server.
With an IDE that supports compileOnSave
(eg. atom-typescript
or
TypeScript for VS Code)
the frontend page always stays up to date while editing TypeScript source code.
Source code file extensions should always be .ts
or .tsx
or the compiler
may ignore the code, breaking references to it from elsewhere.
Files containing classes or types intended as part of the public API, should
be referenced in the package's index.ts
like this:
export { MyClass } from './MyClass';
The corresponding file may be named MyClass.ts
or MyClass.tsx
.
According to alle,
packages are installed in the repository top-level node_modules
directory.
Since the project uses TypeScript, usually you also want to install typings. For example:
npm install --save react-leaflet
npm install --save @types/react-leaflet
Next, you should use the package. Easiest way is to add somewhere:
export * from 'react-leaflet';
Exporting the package contents causes it to be used in transpiled JSON. If you use a TypeScript IDE, saving the file will already have transpiled it. Otherwise re-build the frontend from the command line:
npm run build:frontend
Now, config-npm.js
needs updating so SystemJS can find files in the new
package. Creating a production bundle updates it automatically. Run the commands:
cd bundler
npm install
cd ..
npm run bundle
Now that the bundler is installed, next time the first 3 commands
(cd
and npm install
) are not needed.
It's important that the new package is somehow used in the code, or the bundler will still ignore it and not update the necessary config paths.
This also bundles the software for production, meaning that reloading the page
in a browser will load the bundle instead of any more recent changes.
To fix that, delete or rename dist/bundle.js
.
Copyright (c) 2017-2018 BusFaster Ltd