### Install and Start Example Source: https://github.com/visgl/loaders.gl/blob/master/examples/website/duckdb-sql/README.md Use these commands to install dependencies and start the example application. ```bash yarn yarn start ``` -------------------------------- ### Install and Start Project Source: https://github.com/visgl/loaders.gl/blob/master/examples/website/point-tile-source/README.md Installs project dependencies and starts the development server. ```bash yarn yarn start ``` -------------------------------- ### Install Dependencies and Start Local Server Source: https://github.com/visgl/loaders.gl/blob/master/examples/website/3d-tiles/README.md Install project dependencies using yarn and then start the local development server. The `yarn start` command bundles the application, while `yarn start-local` provides additional development features. ```bash yarn yarn start-local # or yarn start ``` -------------------------------- ### Install and Run Dependencies Source: https://github.com/visgl/loaders.gl/blob/master/examples/website/textures/README.md Install project dependencies and bundle the application using npm or yarn. Then, start the development server with webpack. ```bash # install dependencies npm install # or yarn # bundle and serve the app with webpack npm start ``` -------------------------------- ### Tileset3D Initialization Example Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tiles/api-reference/tileset-3d.md Example of how to add a Tileset3D to the scene and view it. ```APIDOC ```typescript var tileset = viewer.scene.primitives.add( new Tileset3D({ url: 'http://localhost:8002/tilesets/Seattle/tileset.json' }) ); tileset.readyPromise.then(function (tileset) { // Set the camera to view the newly added tileset viewer.camera.viewBoundingSphere(tileset.boundingSphere, new HeadingPitchRange(0, -0.5, 0)); }); ``` ``` -------------------------------- ### Install Dependencies Source: https://github.com/visgl/loaders.gl/blob/master/AGENTS.md Run this command to install all necessary project dependencies. ```bash yarn install ``` -------------------------------- ### Install @loaders.gl/video Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/video/README.md Install the video module along with the core loaders.gl package. ```bash npm install @loaders.gl/video npm install @loaders.gl/core ``` -------------------------------- ### Install WKTLoader and Core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/wkt/api-reference/wkt-loader.md Install the WKTLoader and the core loaders.gl library using npm. ```bash npm install @loaders.gl/wkt npm install @loaders.gl/core ``` -------------------------------- ### Start Local HTTP Server Source: https://github.com/visgl/loaders.gl/blob/master/modules/flatgeobuf/src/flatgeobuf/3.27.2/README.md Starts the built-in HTTP server for serving local files. This is used to test examples locally. ```bash yarn serve ``` -------------------------------- ### Install Node.js 16 using NVM Source: https://github.com/visgl/loaders.gl/blob/master/docs/developer-guide/dev-env.md Install and switch to Node.js version 16, which is recommended for building and developing loaders.gl. NPM is included with this installation. ```bash nvm install 16 nvm use 16 ``` -------------------------------- ### Install @loaders.gl/polyfills Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/polyfills/api-reference/README.md Install the polyfills module using npm. ```bash npm install @loaders.gl/polyfills ``` -------------------------------- ### Example Usage Source: https://github.com/visgl/loaders.gl/blob/master/modules/3d-tiles/wip/styles/docs/tile-3d-style.md Examples demonstrating how to set style properties using strings or conditional expressions. ```APIDOC @example const style = new Tile3DStyle(); // Override labelOutlineWidth expression with a string style.labelOutlineWidth = '5'; ``` ```APIDOC @example const style = new Tile3DStyle(); // Override labelOutlineWidth expression with a condition style.labelOutlineWidth = { conditions : [ ['${height} > 2', '5'], ['true', '0'] ] }; ``` -------------------------------- ### Install @loaders.gl/images and @loaders.gl/core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/images/README.md Install the necessary loaders.gl packages for image handling. Ensure both the images module and the core module are installed. ```bash npm install @loaders.gl/images npm install @loaders.gl/core ``` -------------------------------- ### Install @loaders.gl/gltf Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/gltf/README.md Install the core GLTF loader and the general loaders.gl core. ```bash npm install @loaders.gl/gltf npm install @loaders.gl/core ``` -------------------------------- ### Install and Run HTTP Server Source: https://github.com/visgl/loaders.gl/blob/master/examples-experimental/gltf-with-raw-webgl/README.md Install the http-server package globally using npm and then run it from the gltf-raw-webgl directory to serve the application. ```bash npm install --global http-server ``` ```bash cd gltf-raw-webgl http-server ``` -------------------------------- ### Install @loaders.gl/obj and @loaders.gl/core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/obj/README.md Install the OBJ loader and the core loaders.gl library using npm. ```bash npm install @loaders.gl/obj npm install @loaders.gl/core ``` -------------------------------- ### Install @loaders.gl/json Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/json/README.md Install the core and JSON modules for loaders.gl. ```bash npm install @loaders.gl/core @loaders.gl/json ``` -------------------------------- ### Install @loaders.gl/pcd and @loaders.gl/core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/pcd/README.md Install the PCD module and the core loaders.gl library using npm. ```bash npm install @loaders.gl/pcd npm install @loaders.gl/core ``` -------------------------------- ### Install Traces Module Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/traces/README.md Install the @loaders.gl/core and @loaders.gl/traces packages using npm. ```bash npm install @loaders.gl/core @loaders.gl/traces ``` -------------------------------- ### Install FlatGeobuf and Core Loaders Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/flatgeobuf/README.md Install the FlatGeobuf loader and the core loaders.gl library to enable FlatGeobuf support. ```bash npm install @loaders.gl/flatgeobuf npm install @loaders.gl/core ``` -------------------------------- ### Install @loaders.gl/xml and @loaders.gl/core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/xml/README.md Install the XML module along with the core loaders.gl library using npm. ```bash npm install @loaders.gl/xml npm install @loaders.gl/core ``` -------------------------------- ### Install GeoTIFF Module Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/geotiff/README.md Install the core and GeoTIFF modules for @loaders.gl. ```bash npm install @loaders.gl/core @loaders.gl/geotiff ``` -------------------------------- ### Tileset3D Usage Example Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tiles/api-reference/tileset-3d-source.md Example of how to instantiate and use the Tileset3D class with a custom source. ```APIDOC ## Tileset3D Usage ### Description This example demonstrates how to create a `Tileset3D` instance, providing a custom `source` and configuring an `onTileLoad` callback. ### Code ```ts import {Tileset3D} from '@loaders.gl/tiles' // Assume 'source' is an instance of a Tileset3DSource implementation // const source = new MyCustomTilesetSource(...); const tileset = new Tileset3D(source, { onTileLoad: tile => console.log(tile.id) }) await tileset.tilesetInitializationPromise ``` ``` -------------------------------- ### Install @loaders.gl/wms and @loaders.gl/core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/wms/README.md Install the WMS module along with the core loaders.gl library using npm. ```bash npm install @loaders.gl/wms npm install @loaders.gl/core ``` -------------------------------- ### Install @loaders.gl/core and @loaders.gl/kml Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/kml/README.md Install the necessary packages for using the KML loader. ```bash npm install @loaders.gl/core @loaders.gl/kml ``` -------------------------------- ### Install @loaders.gl/mvt and @loaders.gl/core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/mvt/README.md Install the MVT module along with the core loaders.gl library to enable MVT functionality. ```bash npm install @loaders.gl/mvt npm install @loaders.gl/core ``` -------------------------------- ### Install I3S and Core Loaders Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/i3s/README.md Install the @loaders.gl/i3s module along with the core loaders.gl package. ```bash npm install @loaders.gl/i3s npm install @loaders.gl/core ``` -------------------------------- ### Install Potree and Core Loaders Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/potree/README.md Install the necessary @loaders.gl/potree and @loaders.gl/core packages using npm. ```bash npm install @loaders.gl/potree npm install @loaders.gl/core ``` -------------------------------- ### Install @loaders.gl/core and @loaders.gl/arrow Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/arrow/README.md Install the necessary packages for using the Arrow module with loaders.gl. ```bash npm install @loaders.gl/core @loaders.gl/arrow ``` -------------------------------- ### Usage Example: Loading from a list of files Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/core/api-reference/load-in-batches.md This example demonstrates how to use `loadInBatches` to load data from multiple files using the OBJLoader. ```APIDOC ## Usage Example: Loading from a list of files ### Description This example shows how to load multiple files using `loadInBatches` and iterate over the resulting batches. ### Code ```typescript import {loadInBatches} from '@loaders.gl/core'; import {OBJLoader} from '@loaders.gl/obj'; async function processFiles() { const file1 = ...; // Assume file1 is a File object or URL const file2 = ...; // Assume file2 is a File object or URL const iteratorPromises = await loadInBatches([file1, file2], OBJLoader); for await (const iterator of iteratorPromises) { for await (const batch of iterator) { // Process each batch console.log(batch); } } } processFiles(); ``` ``` -------------------------------- ### Install @loaders.gl/core and @loaders.gl/bson Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/bson/README.md Install the necessary packages for BSON support. This includes the core loaders.gl library and the specific BSON module. ```bash npm install @loaders.gl/core @loaders.gl/bson ``` -------------------------------- ### Install MLT and Core Loaders Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/mlt/README.md Install the MLT loader and the core loaders.gl package to enable MLT tile loading. ```bash npm install @loaders.gl/mlt npm install @loaders.gl/core ``` -------------------------------- ### Install Apache Arrow JS Source: https://github.com/visgl/loaders.gl/blob/master/docs/arrowjs/get-started/README.md Install the Apache Arrow JS bindings using npm or yarn. ```shell npm install apache-arrow # or yarn add apache-arrow ``` -------------------------------- ### selectSourceSync() Usage Example Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/core/api-reference/select-source.md Example demonstrating how to use selectSourceSync with a list of loaders to select the appropriate source for a given filename. ```APIDOC ## Usage Select a source from a list of provided sources (best effort): ```typescript import {selectSourceSync} from '@loaders.gl/core'; import {PMTilesSourceLoader} from '@loaders.gl/pmtiles'; import {MVTSourceLoader} from '@loaders.gl/csv'; selectSourceSync('filename.pmtiles', [PMTilesSourceLoader, MVTSourceLoader]); // => PMTilesSourceLoader ``` ``` -------------------------------- ### Build Website Source: https://github.com/visgl/loaders.gl/blob/master/AGENTS.md Navigate to the website directory and run these commands to install its dependencies and build the website. ```bash cd website; yarn; yarn build ``` -------------------------------- ### Setup DataDrivenTile3DLayer for Colorization Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/i3s/recipes/attribute-driven-colorization.mdx Configure and use DataDrivenTile3DLayer with the colorizeTile utility to apply attribute-driven colorization to I3S data. Ensure @deck.gl-community/layers is installed. ```bash yarn add @deck.gl-community/layers ``` ```typescript import Map from 'react-map-gl'; import maplibregl from 'maplibre-gl'; import DeckGL from "@deck.gl/react"; import {DataDrivenTile3DLayer, colorizeTile} from '@deck.gl-community/layers'; import {I3SLoader} from "@loaders.gl/i3s"; function renderLayers() { const loadOptions = {i3s: {coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS}}; const colorsByAttribute = { attributeName, minValue: stats.min, maxValue: stats.max, minColor: [146, 146, 252, 255], // #9292FC maxColor: [44, 44, 175, 255], // #2C2CAF mode: 'replace' } const layers = new DataDrivenTile3DLayer({ data: url, loader: I3SLoader, onTilesetLoad: onTilesetLoadHandler, loadOptions, colorsByAttribute, customizeColors: colorizeTile }); return layers; } ``` -------------------------------- ### Load Image and Get Raw Pixel Data Source: https://github.com/visgl/loaders.gl/blob/master/docs/specifications/category-image.md This example demonstrates loading an image using ImageBitmapLoader and then extracting the raw pixel data using getImageData. Import '@loaders.gl/polyfills' if in Node.js. ```typescript import '@loaders.gl/polyfills'; // Only required if loading images under Node.js import {load} from '@loaders.gl/core'; import {ImageBitmapLoader, getImageData} from '@loaders.gl/images'; const image = await load('image.jpeg', ImageBitmapLoader); const imageData = getImageData(image); ``` -------------------------------- ### IndexedArrowTable Methods Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/arrow/api-reference/indexed-arrow-table.md Provides examples of common IndexedArrowTable methods like getRawIndex, get, getTemporaryRow, at, getValue, getChild, slice, filter, sort, concat, find, findIndex, materializeArrowTable, toArray, and iteration. ```typescript indexedTable.getRawIndex(rowIndex); indexedTable.get(rowIndex); indexedTable.getTemporaryRow(rowIndex); indexedTable.at(rowIndex); indexedTable.getValue(rowIndex, columnName); indexedTable.getChild(columnName); indexedTable.slice(begin, end); indexedTable.filter(predicate); indexedTable.sort(compare); indexedTable.concat(...others); indexedTable.find(predicate); indexedTable.findIndex(predicate); indexedTable.materializeArrowTable(); indexedTable.toArray(); for (const row of indexedTable) {} ``` -------------------------------- ### Display Tile Converter Help Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tile-converter/cli-reference/tile-converter.md Run this command to view all available options and usage instructions for the tile-converter CLI. ```bash npx tile-converter --help ``` -------------------------------- ### Install @loaders.gl/textures and @loaders.gl/core Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/textures/README.md Install the necessary loaders.gl packages for texture loading capabilities. Ensure both the textures module and the core module are installed. ```bash npm install @loaders.gl/textures npm install @loaders.gl/core ``` -------------------------------- ### Using fetchFile with RequestInit Options Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/core/api-reference/fetch-file.md Demonstrates how to use fetchFile with standard RequestInit options, similar to the built-in fetch API. This is useful for setting headers or other request configurations. ```typescript import {fetchFile} from '@loaders.gl/core'; const response = await fetchFile(url); // or supply any standard `RequestInit` options expected by `fetch` const response = await fetchFile(url, {headers: {}}); // Now use standard browser Response APIs // Note: headers are case-insensitive const contentLength = response.headers.get('content-length'); const mimeType = response.headers.get('content-type'); const arrayBuffer = await response.arrayBuffer(); ``` -------------------------------- ### Install @loaders.gl/las Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/las/README.md Install the core and LAS modules for @loaders.gl. ```bash npm install @loaders.gl/core @loaders.gl/las ``` -------------------------------- ### Scene Projection Setup Source: https://github.com/visgl/loaders.gl/blob/master/cpp/Model3DTiler/modules/resources/page_template/lasmap_template.html Initializes scene and map projection transformations using proj4 library. ```javascript function setSceneProjection(proj){ sceneProjection = proj; toMap = proj4(sceneProjection, mapProjection); toScene = proj4(mapProjection, sceneProjection); }; ``` -------------------------------- ### Start I3S Server for SLPK File Source: https://github.com/visgl/loaders.gl/blob/master/apps/tile-converter/src/i3s-server/README.md Use this command to start the I3S server for a single SLPK file. The I3sLayerPath should point directly to the .slpk file. ```bash PORT=8080 HTTPS_PORT=4443 I3sLayerPath="../datasets/Rancho_Mesh_mesh_v17_1.slpk" DEBUG=i3s-server:* npx i3s-server ``` -------------------------------- ### Install @loaders.gl/zip Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/zip/README.md Install the @loaders.gl/core and @loaders.gl/zip modules using npm. ```bash npm install @loaders.gl/core @loaders.gl/zip ``` -------------------------------- ### Install GeoPackage Loader Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/geopackage/README.md Install the @loaders.gl/geopackage module using npm. ```bash npm install @loaders.gl/geopackage ``` -------------------------------- ### Start I3S Server Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tile-converter/cli-reference/i3s-server.md Start the I3S HTTP server using `npx i3s-server`. Configure the server using environment variables like `PORT`, `HTTPS_PORT`, and `I3sLayerPath`. ```bash PORT=8080 HTTPS_PORT=4443 I3sLayerPath="./data/NewTileset.slpk" DEBUG=i3s-server:* npx i3s-server ``` -------------------------------- ### Initialize I3SSource and Tileset3D Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tiles/api-reference/i3s-source.md Instantiate I3SSource with the I3S service URL and I3SLoader, then create a Tileset3D instance. Await tilesetInitializationPromise to ensure the tileset is ready. ```typescript import {I3SLoader} from '@loaders.gl/i3s' import {I3SSource, Tileset3D} from '@loaders.gl/tiles' const source = new I3SSource({ url: 'https://tiles.arcgis.com/.../SceneServer/layers/0', loader: I3SLoader }) const tileset = new Tileset3D(source) await tileset.tilesetInitializationPromise ``` -------------------------------- ### Initialize Tileset3D with Options Source: https://github.com/visgl/loaders.gl/blob/master/modules/3d-tiles/wip/tileset-3d-full.md Load a tileset from a URL with custom options such as base screen space error and skip screen space error factor. Ensure the correct import path is used. ```javascript import {Tileset3D} from '^loaders.gl/3d-tiles'; const tileset = new Tileset3D({ url: 'http://localhost:8002/tilesets/Seattle/tileset.json', baseScreenSpaceError: 1024, skipScreenSpaceErrorFactor: 16 }); ``` -------------------------------- ### Build the Tile Converter Bundle Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tile-converter/api-reference/tile-converter-bundle.md Run this command in the tile-converter module directory to generate the 'converter.min.js' bundle. ```bash cd modules/tile-converter yarn build-converter-bundle ``` -------------------------------- ### Install Splats Module Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/splats/README.md Install the @loaders.gl/core and @loaders.gl/splats packages using npm. ```bash npm install @loaders.gl/core @loaders.gl/splats ``` -------------------------------- ### WKTLoader Usage Examples Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/wkt/api-reference/wkt-loader.md Demonstrates how to use the WKTLoader with `parseSync` and `load` functions from `@loaders.gl/core`. ```APIDOC ## WKTLoader Usage ### Description Examples of using `WKTLoader` with `@loaders.gl/core` functions. ### Code Examples #### Synchronous Parsing ```typescript import {WKTLoader} from '@loaders.gl/wkt'; import {parseSync} from '@loaders.gl/core'; const data = parseSync('LINESTRING (30 10, 10 30, 40 40)', WKTLoader); // Expected output: {type: 'LineString', coordinates: [[30, 10], [10, 30], [40, 40]]} ``` #### Asynchronous Loading ```typescript import {WKTLoader} from '@loaders.gl/wkt'; import {load} from '@loaders.gl/core'; const data = await load(url, WKTLoader); ``` ### Supported APIs - `load` - `parse` - `parseSync` ``` -------------------------------- ### Start I3S Server for Converted Dataset Source: https://github.com/visgl/loaders.gl/blob/master/apps/tile-converter/src/i3s-server/README.md Use this command to start the I3S server for a dataset that has been converted from 3DTiles to I3S format. Ensure the I3sLayerPath points to the root of the converted dataset. ```bash PORT=8080 HTTPS_PORT=4443 I3sLayerPath="./data" DEBUG=i3s-server:* npx i3s-server ``` -------------------------------- ### Start Headless Browser Tests on Linux Source: https://github.com/visgl/loaders.gl/blob/master/docs/developer-guide/dev-env.md Configure the display environment and start the X virtual framebuffer for headless browser tests on Linux systems. ```bash export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start ``` -------------------------------- ### Install Excel Loader Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/excel/README.md Install the @loaders.gl/core and @loaders.gl/excel packages using npm. ```bash npm install @loaders.gl/core @loaders.gl/excel ``` -------------------------------- ### View CLI Options Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tile-converter/api-reference/tile-converter-bundle.md Display all available command-line options for the converter script. ```bash node converter.min.js --help ``` -------------------------------- ### Install @loaders.gl/csv Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/csv/README.md Install the CSV module along with the core loaders.gl package. ```bash npm install @loaders.gl/core @loaders.gl/csv ``` -------------------------------- ### Install Apache Arrow with loaders.gl (yarn) Source: https://github.com/visgl/loaders.gl/blob/master/docs/developer-guide/apache-arrow.md Use this command to install the necessary packages for Apache Arrow integration with loaders.gl using yarn. Ensure `apache-arrow` is explicitly installed to manage versions. ```bash yarn add apache-arrow @loaders.gl/core @loaders.gl/arrow ``` -------------------------------- ### Install Apache Arrow with loaders.gl (npm) Source: https://github.com/visgl/loaders.gl/blob/master/docs/developer-guide/apache-arrow.md Use this command to install the necessary packages for Apache Arrow integration with loaders.gl using npm. Ensure `apache-arrow` is explicitly installed to manage versions. ```bash npm install apache-arrow @loaders.gl/core @loaders.gl/arrow # plus any other loaders you use ``` -------------------------------- ### Load Potree Viewer Settings and GUI Source: https://github.com/visgl/loaders.gl/blob/master/cpp/Model3DTiler/modules/resources/page_template/viewer_template.html Loads viewer settings from a URL and initializes the graphical user interface (GUI). This includes setting the language, showing specific menu sections, and toggling the sidebar. ```javascript viewer.loadSettingsFromURL(); viewer.loadGUI(() => { viewer.setLanguage('en'); $("#menu_appearance").next().show(); $("#menu_tools").next().show(); $("#menu_scene").next().show(); viewer.toggleSidebar(); }); ``` -------------------------------- ### initialize() Source: https://github.com/visgl/loaders.gl/blob/master/docs/modules/tiles/api-reference/i3s-source.md Loads the root metadata if it hasn't been loaded already and normalizes the source state, preparing it for use by Tileset3D. ```APIDOC ## initialize() Loads root metadata if needed and normalizes the source state consumed by `Tileset3D`. ```