Examples

The Plugin Playground includes a set of ready-made example Plugins you can open, run, and modify directly in your browser. They are the best way to see working Plugins and learn from real code.

Open the Plugin Playground, then select a preset from the Plugins panel to load its code and run it. The examples are grouped below into the same categories you see in the Playground.

You can open any preset, then use the Share button to copy a link to it, or the Export button to download it as a .zip. Very large presets cannot be shared by link and are export-only.

User Interface

Build custom interfaces—including panels, navigation, popups, and dialogs—with reearth.ui and related APIs.

• Responsive Panel: a panel widget where users can add and delete list items
• Sidebar: a collapsible sidebar with a search bar and menu items
• Header: a fixed top navigation bar with logo and menu links
• Popup: opening, closing, repositioning, and messaging with a popup window (also uses reearth.popup)
• Modal Window: showing a modal dialog and closing it on a message from the modal (uses reearth.modal)

Data

Passing data between a Plugin, its UI, and Visualizer, and storing data on the client.

• Messenger Between Extension and Visualizer: capture map click coordinates and fly the camera there (uses reearth.viewer, reearth.extension)
• Messenger Between Extensions: two-way messaging between two widget extensions in one Plugin (uses reearth.extension)
• Extension Property: read property values from the reearth.yml schema and display them (uses reearth.extension)
• Client Storage: a light/dark theme selector that persists the user’s choice (uses reearth.data)

Viewer & Scene Settings

Controlling the scene environment and reading viewer state with reearth.viewer.

• Enable Shadow Style: toggle scene shadow rendering with a switch
• Enable Terrain: toggle Cesium World Terrain and depth testing with a switch
• Take Screenshot: capture the current 3D view as a downloadable PNG
• Mouse Events: display the latitude, longitude, and height of a clicked point
• Get Current Location: get the device’s location and fly the camera there (also uses reearth.camera)

Manage Layer

Adding and controlling data layers of many formats with reearth.layers.

• Add GeoJSON: GeoJSON layers inline and from a URL, with markers, polygons, and polylines
• Add Large GeoJSON: large GeoJSON files using the useAsResource performance flag
• Add CZML: a CZML layer as a data URI and from a URL
• Add KML: a KML layer as a data URI and from a URL
• Add CSV: a CSV layer from a URL, mapping lat/lng columns to markers
• Add 3D Tiles: a 3D Tiles layer with basic color and PBR style options
• Add Photogrammetric 3D Model: a photogrammetric 3D Tiles dataset
• Add Point Cloud: a point cloud dataset in 3D Tiles format
• Add OSM 3D Tiles: OpenStreetMap buildings via the built-in osm-buildings type
• Add WMS: a WMS tile layer from a remote server
• Add Google Photorealistic 3D Tiles: Google’s photorealistic tiles (requires a Google Maps API key)
• Hide, Fly To, Delete Layer: per-layer show/hide, fly-to, and delete controls (also uses reearth.camera)
• Override Layer Data: update a polygon’s geometry in place on demand
• Show Selected Feature Information: display a selected feature’s properties on selection
• Add Infobox to Show All Properties: an infobox that lists all of a feature’s properties
• Add Infobox to Show Specific Properties: an infobox showing a chosen subset of properties
• Add Infobox to Show Rich Blocks: an infobox with text, image, markdown, and video blocks

Manage Layer Style

Styling layers, from shared properties to conditional and feature-based rules.

• Layer Styling Examples: the same styling applied across GeoJSON, CZML, KML, and CSV
• Feature Style 3D Tiles: color, PBR, shadows, highlight, and wireframe on 3D Tiles
• Feature Style 3D Model: animated GLTF models with styling, driven by the timeline (also uses reearth.timeline)
• Override Style: switch a layer between two height-based color gradients on demand
• Style With Condition: a conditional color expression mapping height ranges to shades
• Filter Features by Style: show or hide markers based on a property condition

Camera

Moving and controlling the camera with reearth.camera.

• Zoom In Out: buttons that zoom the camera in and out
• Camera Rotation: continuously rotate the camera around its target
• Camera Position: track the live camera position and apply new values manually

Timeline

Controlling time-based playback and animating data with reearth.timeline.

• Playback Control: play/pause, speed, and range-type controls with a live clock
• Time Driven Features: a CZML polygon that extrudes to different heights over time (also uses reearth.layers)
• Time Driven Path: a 3D train model animated along a route using time-sampled positions (also uses reearth.layers)