@geostarters/mapstyler-gl
Sytle GeoJSON data using Mapbox GL style
Obtains basic geostatistics from GeoJSON and CVS files
Install
npm install @geostarters/mapstyler-gl --save
Use
import {MapStyle} from "@geostarters/mapstyler-gl/dist/mapstylergl";
const geoJSON = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: { temp: 2 , value: "in" },
geometry: {
type: "Point",
coordinates: [2.33184814453125, 41.76926321969369],
},
},
{
type: "Feature",
properties: { temp: 3, value: "in" },
geometry: {
type: "Point",
coordinates: [2.2686767578125, 41.78014491449217],
},
},
{
type: "Feature",
properties: { temp: 8, value: "out" },
geometry: {
type: "Point",
coordinates: [2.006378173828125, 41.707266387090684],
},
},
],
};
const mapStyle = new MapStyle(geoJSON);
console.info(mapStyle.getFieldNamesColumnFromGEOJSON());
// [{name: 'temp', type: 'number'}, {name: 'value', type: 'string'}]
const layerStyle= mapStyle.createStyleLayer("name_source","name_layer","temp","cicle","#ff0000");
console.info(JSON.stringnify(layerStyle));
/*
{"id":"name_layer","style":{"id":"name_layer","source":"name_source","interactive":true,"type":"circle","minzoom":2,"maxzoom":18,"paint":{"circle-color":"#ff0000","circle-radius":["interpolate",["exponential",1],["zoom"],1,0.5,10,2]},"filter":["!=",["typeof",["get","temp"]],"null"]}}
*/
Table of Contents
- version
-
MapStyle
- Parameters
- Examples
- getAsyncGeoJSON
- getGeomTypeFromGeoJSON
- getFieldNamesColumnFromGEOJSON
- getImplementedLayerTypes
- getFilterByDefault
- generateGeoStatisticsFromField
- createStyleLayer
- setStyleFromPreDefinedRamTemperatureHeights
- setStyleFromPreDefinedRamTemperatureInterpolateHeights
- setStyleTextSizeByFactorSize
- setStyleFromPreDefinedRamTemperatureColor
- setStylesPaintFromRanges
- setStylebyFactorHeights
- getFieldType
- getExtendFromGeoJSON
- getHaloStyleColors
- setStylePaintFromUniquesValues
- BridgeStatics
- GeoJSONStatistics
- CSVStatics
- ArrayStatics
- JsonToMap
- UtilsStatics
- Colorizator
version
The version of the project in use as specified in package.json
,
CHANGELOG.md
, and the GitHub release.
Type: string
MapStyle
A MapStyle
create a tematic style from GeoJson data, CSV o just an Array.
Parameters
-
geoJSON
object GeoJSON data or URL.
Examples
const geo = new MapStyle(geojson);
getAsyncGeoJSON
Returns remote Geojson
Parameters
Examples
MapStyle.getAsyncGeoJSON("https://..").then(functiion(response){})
Returns geojson this
getGeomTypeFromGeoJSON
Returns geomType from first fetaure geometry in Geojson
Returns string
getFieldNamesColumnFromGEOJSON
Returns Array title fields from properties
Returns array
getImplementedLayerTypes
Returns object with type MapboxGL layers implemented
Returns object
getFilterByDefault
Returns filter null values mapboxGL
Parameters
Examples
MapStyle.getFilterByDefault("temp")
Returns filterExpression this
generateGeoStatisticsFromField
Return geostatistics object
Parameters
-
tematicField
string
Examples
MapStyle.generateGeoStatisticsFromField("temp")
Returns geostatstics this
createStyleLayer
Create MapBox GL init style layerNamer
Parameters
-
sourceName
string -
layerName
string : theMapbox gl layer ID -
keyField
string :The fieldName fromGeoJSON -
type
string : tthe geomType see getImplementedLayerTypes function -
maxzoom
number -
minzoom
number -
initColor
string -
visualization
string -
factor
number -
SorceName
string : the Mapbox gl source ID
Returns object
setStyleFromPreDefinedRamTemperatureHeights
Return predefined style
Parameters
-
tematicField
string
Returns object
setStyleFromPreDefinedRamTemperatureInterpolateHeights
Return predefined style
Parameters
-
tematicField
string
Returns object
setStyleTextSizeByFactorSize
Return factor textsize
Parameters
-
factorSize
number
Returns stylePre
setStyleFromPreDefinedRamTemperatureColor
Return predefined style
Parameters
-
tematicField
string
Returns object
setStylesPaintFromRanges
Returns style-color mapboxGL by Ranges
Parameters
-
tematicField
string -
numRanges
number -
colorsPalette
object -
textHaloColor
boolean (optional, defaultfalse
)
Examples
MapStyle.setStylesPaintFromRanges("temp",6, "BuGn")
Returns paintStyle this
setStylebyFactorHeights
Returns style-extrude-heigths mapboxGL by factor * fieldvalue
Parameters
Examples
MapStyle.setStylebyFactorHeights("temp",10)
Returns stylePre this
getFieldType
Returns field type number or string
Parameters
-
fieldName
string
Examples
MapStyle.getFieldType("temp")
Returns string this
getExtendFromGeoJSON
Returns BBOX estenc from geojson
Returns array bbox
getHaloStyleColors
Returns Halo colors
Returns array haloTextColors
setStylePaintFromUniquesValues
Returns style-color mapboxGL
Parameters
Examples
MapStyle.setStylePaintFromUniquesValues("comarca","#ffCC00", "#00CCff")
Returns paintStyle this
BridgeStatics
A BridgeStatics
object represents a given latitude and longitude coordinates.
Parameters
-
arrayColumn
Array<number> -
lat
number Latitude, measured in degrees. -
lon
number Longitude, measured in degrees.
Examples
var ll = new BridgeStatics(42.10376, 1.84584);
GeoJSONStatistics
Return basic stats from a GeoJson data a title field from geojson properties.
Parameters
-
geoJSON
object -
keyField
string -
null
geoJSON {geoJSON:geoJSON, filedName: keyField, arrayColumn: arrayColumn}
Examples
const keyField = "temp";
const geoJSON = {"type": "FeatureCollection", "features": [{ "type": "Feature", "properties": {"temp": 2 }, "geometry": {"type": "Point", "coordinates": [2.33184814453125, 41.76926321969369] }}, { "type": "Feature", "properties": {"temp": 2 }, "geometry": {"type": "Point", "coordinates": [2.2686767578125, 41.78014491449217] }}, { "type": "Feature", "properties": {"temp": 5 }, "geometry": {"type": "Point", "coordinates": [2.2703933715820312, 41.725717979972345] }}, { "type": "Feature", "properties": {"temp": "" }, "geometry": {"type": "Point", "coordinates": [2.346096038818359, 41.74698199279457] }}, { "type": "Feature", "properties": {"temp": 1 }, "geometry": {"type": "Point", "coordinates": [2.137527465820312, 41.929868314485795] }}, { "type": "Feature", "properties": {"temp": 8 }, "geometry": {"type": "Point", "coordinates": [2.006378173828125, 41.707266387090684] }}] };
const geoSattics= new GeoJSONStatics(geoJSON, keyField)
getUniqueValues
Returns Array Unique Values
Returns array
getStatsFromRangesColorsGeoJSON
Returns stats form RangeNum and colors Array
Parameters
Returns object
getColumnFromGEOJSON
Returns array from geojson properties field Used in the constructor
Parameters
-
keyField
string -
GeoJSON
object -
forceNumber
boolean (optional, defaultfalse
) -
keyFiled
string -
geojson
object
Returns array this
_getColumFromGEOJSONFilter
Returns array from geojson properties field, filtered by a value
Parameters
-
keyField
string -
GeoJSON
object -
keyFilter
string //Filter field -
valueFilter
string -
keyFiled
string -
geojson
object
Returns array this
CSVStatics
Generate basic statistics from CSV array.
Parameters
Examples
Sample;
const arrayCSV = [
[2, 3, 4, 3, 3],
[5, 6, 6, 4, 4],
[1, 8, 1, 5, 7]
];
const numCSVColumn = 1;
const csvStatics = new CSVStatics(arrayCSV, numCSVColumn);
getUniqueValues
Returns Array Unique Values
Returns array
getStatsFromRangesColorsCSV
Returns stats form RangeNum and colors Array
Parameters
Returns object
getColumFromCSV
Returns array from csv properties field Used in the constructor
Parameters
Returns array this
ArrayStatics
Generate basic statistics from Array.
Parameters
-
arrayColumn
Array
Examples
Sample;
const arrayColumn = [2, 3, 4, 3, 3];
const ArrayStatics = new ArrayStatics(arrayColumn);
getUniqueValues
Returns Array Unique Values
Returns array
getBasicsStats
Returns basics stats
Parameters
-
decimals
number
Returns object
getStatsFromRangesColorsArray
Returns stats form RangeNum and colors Array
Parameters
Returns object
JsonToMap
Parse information from JSON.
Parameters
-
Json
object Optional
Examples
Sample;
const jsonToMap = new JsonToMap();
UtilsStatics
A UtilsStatics
object represents a.
Examples
var utils = new UtilsStatics();
Colorizator
A Colorizator
object represents a given latitude and longitude coordinates.
Parameters
Examples
const color = new Colorizator();
getRandomColorFromArray
Get Random color from Array
Returns string this
getRandomColor
Get Random color hex
Returns color this
getColorArrayfromPositionBrewer
Get Chormaarray color from brewer palette
Parameters
Returns color this
getColorsScaleRanges
Get Chormaarray form two colors
Parameters
Returns color this
getColorArrayfromSelectedBrewer
Get Chormaarray color from brewer palette
Parameters
Returns color this
generateHTMLBrewerPalettes
Get HTML palete color
Parameters
-
numberPalettes
number //number of palletes max this.maxBrewerPalettes -
numRangs
number //number of colors for each palette max this.maxBrewerPalettes
Returns color this
generateHTMLLegendColor
Generate HTML legend palete color
Parameters
Returns color this
Version
alpha 0.0.2
License
Reconeixement 4.0 Internacional de Creative Commons (CC-BY 4-0)
Credits
Developed by :
Institut Cartogràfic i Geològic de Catalunya (ICGC) - https://icgc.cat
Àrea d’Innovació i Estratègia Digital - Unitats Geostart