Optimize and render large datasets

By the end of this guide, you will be able to load a large GeoJSON dataset efficiently by enabling a performance option. This guide assumes you are familiar with adding a layer (see Add a layer).

A very large GeoJSON file—one with many thousands of coordinates—can slow rendering if loaded normally. Re:Earth Visualizer provides a performance option, useAsResource, that handles large GeoJSON data more efficiently. Use this option for GeoJSON with more than about 6,000 features.

Sample code

This example adds a large GeoJSON layer representing the boundary of the Tokyo area, with the performance option turned on.

reearth.yml

id: large-dataset-plugin
name: Large Dataset Plugin
version: 1.0.0
extensions:
  - id: large-dataset
    type: widget
    name: Large Dataset

large-dataset.js

reearth.layers.add({
  type: "simple",
  data: {
    type: "geojson",
    url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/tokyo-boundary.geojson",
    geojson: {
      useAsResource: true,
    },
  },
  polygon: {},
});

reearth.camera.flyTo(
  { lat: 35.68, lng: 139.40, height: 176000 },
  { duration: 2 }
);

Result

The GeoJSON boundary data loads and renders across the Tokyo area. Because useAsResource is turned on, the layer is not styled from the Visualizer side, so it appears in the default color. To change its appearance, define styles in the GeoJSON file itself (see below).

Map data from OpenStreetMap.

How it works

The performance option is set inside the layer’s data block, under a geojson key:

data: {
  type: "geojson",
  url: "https://example.com/large-data.geojson",
  geojson: {
    useAsResource: true,
  },
}

Setting useAsResource: true tells Re:Earth Visualizer to render the GeoJSON in a way optimized for large datasets. It is recommended for GeoJSON with more than about 6,000 features.

Caution

When useAsResource is turned on, you cannot style the layer from the Visualizer side (for example, through polygon, marker, or polyline appearance options). Instead, define styles directly in the GeoJSON file using standard style properties on each feature. For example:

"properties": {
  "stroke": "#fb0404",
  "stroke-width": 2,
  "stroke-opacity": 1
}

Note

The boundary data used in this sample is open government data from Japan’s Ministry of Land, Infrastructure, Transport, and Tourism (MLIT). When using external data, review its terms of use and follow any attribution requirements.

What’s next

• Add a layer: the layer basics this guide builds on
• reearth.layers API reference: the full layer and data object