diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts index 2edae135f0..be8700437e 100644 --- a/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/index.ts @@ -1,6 +1,7 @@ import { PluginType } from "../constants"; import { myPlugin } from "./custom/myPlugin"; +import { addGeojson } from "./layers/add-geojson"; import { header } from "./ui/header"; import { responsivePanel } from "./ui/responsivePanel"; import { sidebar } from "./ui/sidebar"; @@ -22,7 +23,12 @@ export const presetPlugins: PresetPlugins = [ }, { id: "ui", - title: "UI", + title: "User Interface", plugins: [responsivePanel, sidebar, header, uiExtensionMessenger] + }, + { + id: "layers", + title: "Layers", + plugins: [addGeojson] } ]; diff --git a/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts new file mode 100644 index 0000000000..28608b6db0 --- /dev/null +++ b/web/src/beta/features/PluginPlayground/Plugins/presets/layers/add-geojson.ts @@ -0,0 +1,113 @@ +import { FileType, PluginType } from "../../constants"; + +const yamlFile: FileType = { + id: "layers-add-geojson-reearth-yml", + title: "reearth.yml", + sourceCode: `id: layers-add-geojson-plugin +name: Add GeoJSON +version: 1.0.0 +extensions: + - id: layers-add-geojson + type: widget + name: Add Geojson + description: Add Geojson + widgetLayout: + defaultLocation: + zone: outer + section: left + area: top + `, + disableEdit: true, + disableDelete: true +}; + +const widgetFile: FileType = { + id: "layers-add-geojson", + title: "layers-add-geojson.js", + sourceCode: `// Example of adding a layer with GeoJSON data + +// Define the GeoJSON inline +const layerGeojsonInline = { + type: "simple", // Required + data: { + type: "geojson", // Write the data format + value: { + // Ensure that "value" contains GeoJSON + type: "FeatureCollection", + features: [ + { + type: "Feature", + properties: {}, + geometry: { + type: "Polygon", + coordinates: [ + [ + [-97.52842673316115, 28.604966534790364], + [-97.52842673316115, 10.990084521105842], + [-82.13620852840572, 10.990084521105842], + [-82.13620852840572, 28.604966534790364], + [-97.52842673316115, 28.604966534790364], + ], + ], + }, + }, + { + type: "Feature", + properties: {}, + geometry: { + coordinates: [ + [-96.37001899616324, 41.04652707558762], + [-79.17331346249145, 40.45826161216959], + ], + type: "LineString", + }, + }, + { + type: "Feature", + properties: {}, + geometry: { + coordinates: [-111.99963039093615, 19.881084591317787], + type: "Point", + }, + }, + ], + }, + }, + // Settings for the feature style. This statement is required even if no style is set. + polygon: {}, + polyline: {}, + marker: {}, +}; + +// Difine the GeoJSON with URL +const layerGeojsonFromUrl = { + type: "simple", + data: { + type: "geojson", + // URL of GeoJSON file + url: "https://reearth.github.io/visualizer-plugin-sample-data/public/geojson/sample_polygon_polyline_marker.geojson", + }, + polygon: { + fillColor: 'red' + }, + polyline: { + strokeColor: 'red' + }, + marker: { + imageColor: 'red' + }, +}; + +// Add the inline GeoJSON layer to Re:Earth +reearth.layers.add(layerGeojsonInline); + +// Add the GeoJSON layer from the URL to Re:Earth +reearth.layers.add(layerGeojsonFromUrl); +` +}; + +export const addGeojson: PluginType = { + id: "add-geojson", + title: "Add GeoJSON", + files: [widgetFile, yamlFile] +};