Import the Ellipsis library in a mapbox-gl-js project

with script tags

<!-- Import Mapbox -->
<link
  href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css"
  rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js"></script>
<!-- Import the latest version of the ellipsis library -->
<script src="https://github.com/ellipsis-drive/ellipsis-js-util/releases/download/1.3.3/ellipsis-js-util-1.3.3.js"></script>
<script src="https://github.com/ellipsis-drive/mapboxgljs-package/releases/download/3.1.2/mapboxgljs-ellipsis-3.1.2.js"></script>

with npm npm install mapboxgljs-ellipsis

Add an Ellipsis Drive layer to a mapbox map

Example

import {
	EllipsisVectorLayer,
	EllipsisRasterLayer,
	AsyncEllipsisRasterLayer,
} from 'mapboxgljs-ellipsis';


const map = L.map("map", {
  center: [51.505, -0.09],
  zoom: 13,
});

// Raster layer
new EllipsisRasterLayer({
  pathId,
  timestampId,
  style:styleId,
  token: yourToken,
}).addTo(map);

// Vector layer
new EllipsisVectorLayer({
  pathId,
  token: yourToken,
}).addTo(map);

The timestampId and style are required for raster layers, you can use AsyncEllipsisRasterLayer in order to make use of defaults suggested by the server.

const createEllipsisRasterLayer = async () => {
  const someRaster = await MapboxgljsEllipsis.AsyncEllipsisRasterLayer({
    pathId: "28fb0f5f-e367-4265-b84b-1b8f1a8a6409",
  });
  someRaster.addTo(map);
};

createEllipsisRasterLayer();

Obtaining tokens

To use layers that are not set to public or link sharing you need to pass a token as a parameter. See here for how to obtain such a token.

RasterLayer options

Name	Description
pathId	id of the path
timestampId	id of the timestamp
style	id of the style or an object describing it
token	token of the user

note for the style object, refer to this documentation about it.

VectorLayer options

Name	Description
pathId	Id of the path
timestampId	Id of the timestamp
style	id of the style or an object describing it
onFeatureClick	A function to run on feature click, with as argument the clicked feature
onFeatureHover	A function to run on when the cursor hovers over a feature. With arguments the feature and the event
token	Token of the user
id	a prefix to use in all sources and layers that are added to the map
filter	A property filter to use

onFeatureClick gets passed two parameters: the geojson of the clicked feature and the event.

note for the style object, refer to this documentation about it.

VectorLayer styling

A vectorlayer can add multiple style layers to your mapbox map. To view all added styling, call yourVectorLayer.getLayers(). You can also get and use the source that contains geojson with yourVectorLayer.getSource().

Use the EllipsisApi to view metadata of layers

EllipsisApi.getInfo description

parameters

name	description
pathId	The id of the folder or layer.
user	(Optional) An user object which can contain a token like user: {token: mytoken}

return value It returns JSON, which depends on the type of the specified object.