charto-3d v0.0.1

Charto

This is an online JavaScript-based GIS platform under heavy development, with these goals:

• No bloat. Keep entire dependencies hierarchy minimal.
• Same applies to devDependencies.

• Use suitable caching, compression, data structures and algorithms.

• Targeting users who could handle desktop GIS software.

• Convention over configuration. Allow, but don't require changing settings.

• Back-end is optional, anything serving static files over HTTP is enough.

• Compute everything client-side when possible.

• Support local file import and export.

• 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:
  1. Compatibility with other goals and tooling.
  2. Size and efficiency. Is the tool actually needed?
  3. Developer ease of use.
  4. Popularity.

• 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

Getting started

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.

Contributing

Adding new files

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.

Adding new external NPM packages

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.

License

The MIT License

Copyright (c) 2017-2018 BusFaster Ltd