New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

terriajs-plugin-sample

Package Overview
Dependencies
Maintainers
2
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

terriajs-plugin-sample

A sample terriajs plugin.

  • 0.0.1-alpha.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
49
decreased by-44.94%
Maintainers
2
Weekly downloads
 
Created
Source

TerriaJS sample plugin

This repository implements a sample TerriaJS plugin. The plugin implements a custom tool for drawin an interactive 3D box on the map. It serves as an example for setting up an loading an external plugin library that adds some new functionality to Terria without forking it.

Plugins allow extending Terria in two ways:

  • By adding support for new data formats or APIs through implementing new catalog item types.
  • and extending the UI in limited ways to create custom workflows.

This plugin code utilizes these additional peer dependencies from the TerriaJS library and are pre-requisites for understanding the code:

Additional documentation for developing with terria is available at https://docs.terria.io/. You can also reach us through our discussion forum if you require additional help.

This plugin repository is a work in progress and will be updated as the plugin interfaces evolve. Meanwhile expect breaking changes.

Current status

  • Load external plugins in TerriaJS at build time
  • Support for registering custom data types (aka catalog items)
  • Initial, limited support for extending UI to add custom workflows
  • Testing
  • Linting

Adding the plugin to your terriamap

Clone terriamap

git clone https://github.com/terriajs/terriamap
cd terriamap

Add this plugin as dependency in package.json

yarn add -W 'terriajs-plugin-sample'

Add it to the plugin loader file plugins.ts

const plugins: any[] = [
  import("terriajs-plugin-sample")
];
...
export default plugins;

Note: The file plugins.ts is in the terriamap project root directory.

Now build your terriamap and start the server

# From the terriamap directory run
yarn run gulp dev

Once the server is running visit http://localhost:3001 to load the app. You should see a new plugin button added to the map toolbar on the right hand side. Opening the tool will prompt the user to draw a rectangle on the map, this will place a 3d box of the same dimension on the map. Screenshot of the plugin in action:

Sample plugin

Plugin development workflow

Developing the plugin requires correctly setting up the yarn workspace. Your local directory structure should look something like:

terriamap/
  packages/
  ├── plugin-sample
  └── terriajs

The terriajs and plugin-sample repositories must be checked out under terriamap/packages/ folder

Checkout terriajs and sample-plugin into the packages folder

cd terriamap/
mkdir -p packages
git clone https://github.com/terriajs/terriajs packages/terriajs
git clone https://github.com/terriajs/plugin-sample packages/plugin-sample

Add the plugin package to the yarn workspace settings of your terriamap package.json file.

Edit package.json for terriamap:

  {
  "private": true,
  "workspaces": {
    "packages": [
      "packages/terriajs",
      "packages/cesium",
      "packages/terriajs-server"
      "packages/plugin-sample" // <-- plugin-sample added here
    ],

   ...
   
   "dependencies": {
    "terriajs-plugin-api": "0.0.1-alpha.16",
    "terriajs-plugin-sample": "0.0.1-alpha.8", // <-- plugin-sample version should match the version in packages/plugin-sample/package.json

Build terriamap

From your terriamap folder run:

yarn install
# Starts a terriamap build process that watches for file changes
yarn run gulp watch 

Build plugin-sample

cd terriamap/packages/plugin-sample
# Start a plugin build process that watches for file changes
yarn run watch

Start making make changes to the plugin code, terriamap will automatically rebuild the changes. Note that the page doesn't reload automatically, so you will need to refresh to see the changes.

FAQs

Package last updated on 21 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc