/dotgis-carto-vl

CARTO VL React components

Primary LanguageTypeScript

dotgis-carto-vl

CARTO VL React components

npm version TypeScript

example-thumb

Getting Started

npm install @dotgis/carto-vl --save

SQLLayer

Creates a new CARTO VL SQL layer fetching data from a CARTO account

Properties

  • mapInstance: object The Mapbox map instance
  • basemapId : string The basemap style
  • name : string Layer name
  • query : string SQL query to the CARTO account (must include 'cartodb_id' & 'the_geom_webmercator' fields)
  • fields : array The fields to get the 'viewport features'. All the fields you include here must appear in the 'query' property string
  • user : string The CARTO account user name
  • apiKey : string The CARTO account API Key
  • color (Default: 'rgba(0, 255, 0, .1)'): string Could be: hexadecimal, hsl, hsla, hsv, hsva, namedColor, rgb or rgba
  • strokeColor (Default: 'rgb(0, 255, 0)'): string Stroke/border color of points and polygons, not applicable to lines
  • width (Default: 1): number Fill diameter of points, thickness of lines, not applicable to polygon
  • strokeWidth (Default: 1): number Stroke width of points and polygons, not applicable to lines
  • filter (Default: ''): number Filter features by removing from rendering and interactivity all the features that don't pass the test
  • minzoom (Default: 1): number Minimum zoom level for which tiles are available, as in the TileJSON spec
  • maxzoom (Default: 22): number Maximum zoom level for which tiles are available, as in the TileJSON spec. Data from tiles at the maxzoom are used when displaying the map at higher zoom level
  • visible (Default: true): boolean Fill diameter of points, thickness of lines, not applicable to polygon
  • onLoaded : (message: string) => void The 'loaded' event will be fired when all the layers are loaded (and their 'loaded' events are fired
  • featureClick : (event: any, coords: Coords) => void featureClick events are fired when the user clicks on features. The list of features behind the cursor is provided
  • featureEnter : (event: any, coords: Coords) => void featureEnter events are fired when the user moves the cursor and the movement implies that a non-previously hovered feature (as reported by featureHover or featureLeave) is now under the cursor. The list of features that are now behind the cursor and that weren't before is provided
  • featureLeave : (event: any) => void featureLeave events are fired when the user moves the cursor and the movement implies that a previously hovered feature (as reported by featureHover or featureEnter) is no longer behind the cursor. The list of features that are no longer behind the cursor and that were before is provided
  • onInitialViewportFeatures : (event: any) => void Generates a list of features in the viewport (on loaded). For each feature, the properties specified as arguments to this expression will be available. Filtered features will not be present in the list. This expression cannot be used for rendering
  • histogramVariables : DynamicVariables (See 'histogramVariables' const above) Executing 'viewportHistogram' method from CARTO VL. The component accepts a prop called like that, passing the 'definition' object following 'DynamicVariables type. At the same time, the 'props' object must be passed, with the name of the extracting features data methods as 'definition.method' value. Internally, the component is reading the full constant and creating dynamically CARTO VL Viz variables and adding new properties at DynamicProps interface (see types.ts) as component methods. Please always follow the histogramVariables' structure; 'histogramVariables.props' accepts 'n' methods, as long as 'histogramVariables.definition' (that is an array of objects) contains a 'name' for the variable name, an expression for the CARTO VL Viz expression and a 'method' (string) like the 'histogramVariables.props'.
  • mathVariables : DynamicVariables (See 'histogramVariables' constant above & follow the histogramVariables explanation) Executing math viewport calculations methods from CARTO VL (viewportSum, viewportAvg, viewportMax...)
  • globalVariables : DynamicVariables (See 'histogramVariables' constant above & follow the histogramVariables explanation) Executing global histogram viewport extracting methods from CARTO VL (globalHistogram)
  • labels : (Default: labels: { layout: { textSize: 16, textFont: ["Open Sans Regular", "Arial Unicode MS Regular"], textLetterSpacing: 0, textMaxWidth: 10, textTransform: 'none' }, paint: { textColor: "#000000" } }): Labels` Adding pure Mapbox GL JS labelling methods. Required props are: field (rendered label) -string-, maxzoom & minzoom (zoom range to show or hide the labels layer) -number-