npm package: @geostarters/mapstyler-gl
Description: Create Mapbox styles from GeoJson
Author: @geostarters
Latest version: 0.0.5

# @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

```javascript
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][1]
*   [MapStyle][2]
    *   [Parameters][3]
    *   [Examples][4]
    *   [getAsyncGeoJSON][5]
        *   [Parameters][6]
        *   [Examples][7]
    *   [getGeomTypeFromGeoJSON][8]
    *   [getFieldNamesColumnFromGEOJSON][9]
    *   [getImplementedLayerTypes][10]
    *   [getFilterByDefault][11]
        *   [Parameters][12]
        *   [Examples][13]
    *   [generateGeoStatisticsFromField][14]
        *   [Parameters][15]
        *   [Examples][16]
    *   [createStyleLayer][17]
        *   [Parameters][18]
    *   [setStyleFromPreDefinedRamTemperatureHeights][19]
        *   [Parameters][20]
    *   [setStyleFromPreDefinedRamTemperatureInterpolateHeights][21]
        *   [Parameters][22]
    *   [setStyleTextSizeByFactorSize][23]
        *   [Parameters][24]
    *   [setStyleFromPreDefinedRamTemperatureColor][25]
        *   [Parameters][26]
    *   [setStylesPaintFromRanges][27]
        *   [Parameters][28]
        *   [Examples][29]
    *   [setStylebyFactorHeights][30]
        *   [Parameters][31]
        *   [Examples][32]
    *   [getFieldType][33]
        *   [Parameters][34]
        *   [Examples][35]
    *   [getExtendFromGeoJSON][36]
    *   [getHaloStyleColors][37]
    *   [setStylePaintFromUniquesValues][38]
        *   [Parameters][39]
        *   [Examples][40]
*   [BridgeStatics][41]
    *   [Parameters][42]
    *   [Examples][43]
*   [GeoJSONStatistics][44]
    *   [Parameters][45]
    *   [Examples][46]
    *   [getUniqueValues][47]
    *   [getStatsFromRangesColorsGeoJSON][48]
        *   [Parameters][49]
    *   [getColumnFromGEOJSON][50]
        *   [Parameters][51]
    *   [\_getColumFromGEOJSONFilter][52]
        *   [Parameters][53]
*   [CSVStatics][54]
    *   [Parameters][55]
    *   [Examples][56]
    *   [getUniqueValues][57]
    *   [getStatsFromRangesColorsCSV][58]
        *   [Parameters][59]
    *   [getColumFromCSV][60]
        *   [Parameters][61]
*   [ArrayStatics][62]
    *   [Parameters][63]
    *   [Examples][64]
    *   [getUniqueValues][65]
    *   [getBasicsStats][66]
        *   [Parameters][67]
    *   [getStatsFromRangesColorsArray][68]
        *   [Parameters][69]
*   [JsonToMap][70]
    *   [Parameters][71]
    *   [Examples][72]
*   [UtilsStatics][73]
    *   [Examples][74]
*   [Colorizator][75]
    *   [Parameters][76]
    *   [Examples][77]
    *   [getRandomColorFromArray][78]
    *   [getRandomColor][79]
    *   [getColorArrayfromPositionBrewer][80]
        *   [Parameters][81]
    *   [getColorsScaleRanges][82]
        *   [Parameters][83]
    *   [getColorArrayfromSelectedBrewer][84]
        *   [Parameters][85]
    *   [generateHTMLBrewerPalettes][86]
        *   [Parameters][87]
    *   [generateHTMLLegendColor][88]
        *   [Parameters][89]

## version

The version of the project in use as specified in `package.json`,
`CHANGELOG.md`, and the GitHub release.

Type: [string][90]

## MapStyle

A `MapStyle` create a tematic style from GeoJson data, CSV o just an Array.

### Parameters

*   `geoJSON` **[object][91]** GeoJSON data or URL.

### Examples

```javascript
const geo = new MapStyle(geojson);
```

### getAsyncGeoJSON

Returns remote Geojson

#### Parameters

*   `pathGeoJSON` **[string][90]** 
*   `callback` **[function][92]** 

#### Examples

```javascript
MapStyle.getAsyncGeoJSON("https://..").then(functiion(response){})
```

Returns **geojson** `this`

### getGeomTypeFromGeoJSON

Returns geomType from first fetaure geometry in Geojson

Returns **[string][90]** 

### getFieldNamesColumnFromGEOJSON

Returns Array title fields from properties

Returns **[array][93]** 

### getImplementedLayerTypes

Returns object with type MapboxGL layers implemented

Returns **[object][91]** 

### getFilterByDefault

Returns filter null values mapboxGL

#### Parameters

*   `keyField` **[string][90]** 
*   `tematicField` **[string][90]** 

#### Examples

```javascript
MapStyle.getFilterByDefault("temp")
```

Returns **filterExpression** `this`

### generateGeoStatisticsFromField

Return geostatistics object

#### Parameters

*   `tematicField` **[string][90]** 

#### Examples

```javascript
MapStyle.generateGeoStatisticsFromField("temp")
```

Returns **geostatstics** `this`

### createStyleLayer

Create MapBox GL init style layerNamer

#### Parameters

*   `sourceName` **[string][90]** 
*   `layerName` **[string][90]** : theMapbox gl layer ID
*   `keyField` **[string][90]** :The fieldName fromGeoJSON
*   `type` **[string][90]** : tthe geomType see getImplementedLayerTypes function
*   `maxzoom` **[number][94]** 
*   `minzoom` **[number][94]** 
*   `initColor` **[string][90]** 
*   `visualization` **[string][90]** 
*   `factor` **[number][94]** 
*   `SorceName` **[string][90]** : the Mapbox gl source ID

Returns **[object][91]** 

### setStyleFromPreDefinedRamTemperatureHeights

Return predefined style

#### Parameters

*   `tematicField` **[string][90]** 

Returns **[object][91]** 

### setStyleFromPreDefinedRamTemperatureInterpolateHeights

Return predefined style

#### Parameters

*   `tematicField` **[string][90]** 

Returns **[object][91]** 

### setStyleTextSizeByFactorSize

Return factor textsize

#### Parameters

*   `factorSize` **[number][94]** 

Returns **stylePre** 

### setStyleFromPreDefinedRamTemperatureColor

Return predefined style

#### Parameters

*   `tematicField` **[string][90]** 

Returns **[object][91]** 

### setStylesPaintFromRanges

Returns style-color mapboxGL by Ranges

#### Parameters

*   `tematicField` **[string][90]** 
*   `numRanges` **[number][94]** 
*   `colorsPalette` **[object][91]** 
*   `textHaloColor` **[boolean][95]**  (optional, default `false`)

#### Examples

```javascript
MapStyle.setStylesPaintFromRanges("temp",6, "BuGn")
```

Returns **paintStyle** `this`

### setStylebyFactorHeights

Returns style-extrude-heigths mapboxGL by factor \* fieldvalue

#### Parameters

*   `tematicField` **[string][90]** 
*   `factorHeight` **[number][94]** 
*   `factor` **[number][94]** 

#### Examples

```javascript
MapStyle.setStylebyFactorHeights("temp",10)
```

Returns **stylePre** `this`

### getFieldType

Returns field type number or string

#### Parameters

*   `fieldName` **[string][90]** 

#### Examples

```javascript
MapStyle.getFieldType("temp")
```

Returns **[string][90]** `this`

### getExtendFromGeoJSON

Returns BBOX estenc from geojson

Returns **[array][93]** `bbox`

### getHaloStyleColors

Returns Halo colors

Returns **[array][93]** `haloTextColors`

### setStylePaintFromUniquesValues

Returns style-color mapboxGL

#### Parameters

*   `tematicField` **[string][90]** 
*   `initColor` **[string][90]** 
*   `endColor` **[string][90]** 
*   `type` **[string][90]** \`type number or string"

#### Examples

```javascript
MapStyle.setStylePaintFromUniquesValues("comarca","#ffCC00", "#00CCff")
```

Returns **paintStyle** `this`

## BridgeStatics

A `BridgeStatics` object represents a given latitude and longitude coordinates.

### Parameters

*   `arrayColumn` **[Array][93]<[number][94]>** 
*   `lat` **[number][94]** Latitude, measured in degrees.
*   `lon` **[number][94]** Longitude, measured in degrees.

### Examples

```javascript
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][91]** 
*   `keyField` **[string][90]** 
*   `null` **geoJSON** {geoJSON:geoJSON, filedName: keyField, arrayColumn: arrayColumn}

### Examples

```javascript
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][93]** 

### getStatsFromRangesColorsGeoJSON

Returns stats form RangeNum and colors Array

#### Parameters

*   `numRanges` **[number][94]** : 5
*   `arrayColors` **[Array][93]** : \["#ffddcc", "#ccddee", "#ffff00", "#ccddee", "#ffff00"]

Returns **[object][91]** 

### getColumnFromGEOJSON

Returns array from geojson properties field
Used in the constructor

#### Parameters

*   `keyField` **[string][90]** 
*   `GeoJSON` **[object][91]** 
*   `forceNumber` **[boolean][95]**  (optional, default `false`)
*   `keyFiled` **[string][90]** 
*   `geojson` **[object][91]** 

Returns **[array][93]** `this`

### \_getColumFromGEOJSONFilter

Returns array from geojson properties field, filtered by a value

#### Parameters

*   `keyField` **[string][90]** 
*   `GeoJSON` **[object][91]** 
*   `keyFilter` **[string][90]** //Filter field
*   `valueFilter` **[string][90]** 
*   `keyFiled` **[string][90]** 
*   `geojson` **[object][91]** 

Returns **[array][93]** `this`

## CSVStatics

Generate basic statistics from CSV array.

### Parameters

*   `arrayCSV` **[Array][93]<[number][94]>** 
*   `numCSVColumn` **[number][94]** 
*   `null/null/position` **numCSVColumn** field array CSV

### Examples

```javascript
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][93]** 

### getStatsFromRangesColorsCSV

Returns stats form RangeNum and colors Array

#### Parameters

*   `numRanges` **[number][94]** : 5
*   `arrayColors` **[Array][93]** : \["#ffddcc", "#ccddee", "#ffff00", "#ccddee", "#ffff00"]

Returns **[object][91]** 

### getColumFromCSV

Returns array from csv properties field
Used in the constructor

#### Parameters

*   `numColum` **[string][90]** 
*   `dataCSV` **[array][93]** 
*   `forceToNumber` **[boolean][95]**  (optional, default `false`)

Returns **[array][93]** `this`

## ArrayStatics

Generate basic statistics from Array.

### Parameters

*   `arrayColumn` **[Array][93]** 

### Examples

```javascript
Sample;
const arrayColumn = [2, 3, 4, 3, 3];
const ArrayStatics = new ArrayStatics(arrayColumn);
```

### getUniqueValues

Returns Array Unique Values

Returns **[array][93]** 

### getBasicsStats

Returns basics stats

#### Parameters

*   `decimals` **[number][94]** 

Returns **[object][91]** 

### getStatsFromRangesColorsArray

Returns stats form RangeNum and colors Array

#### Parameters

*   `numRanges` **[number][94]** : 5
*   `arrayColors` **[Array][93]** : \["#ffddcc", "#ccddee", "#ffff00", "#ccddee", "#ffff00"]

Returns **[object][91]** 

## JsonToMap

Parse information from JSON.

### Parameters

*   `Json` **[object][91]** Optional

### Examples

```javascript
Sample;
const jsonToMap = new JsonToMap();
```

## UtilsStatics

A `UtilsStatics` object represents a.

### Examples

```javascript
var utils = new UtilsStatics();
```

## Colorizator

A `Colorizator` object represents a given latitude and longitude coordinates.

### Parameters

*   `lat` **[number][94]** Latitude, measured in degrees.
*   `lon` **[number][94]** Longitude, measured in degrees.

### Examples

```javascript
const color = new Colorizator();
```

### getRandomColorFromArray

Get Random color from Array

Returns **[string][90]** `this`

### getRandomColor

Get Random color hex

Returns **color** `this`

### getColorArrayfromPositionBrewer

Get Chormaarray color from brewer palette

#### Parameters

*   `numRangs` **[number][94]** 
*   `brewerPosition` **[number][94]** 
*   `brewerName` **[string][90]** 

Returns **color** `this`

### getColorsScaleRanges

Get Chormaarray form two colors

#### Parameters

*   `numRangs` **[number][94]** 
*   `colorInit` **[string][90]** 
*   `colorEnd` **[string][90]** 
*   `brewerName` **[string][90]** 

Returns **color** `this`

### getColorArrayfromSelectedBrewer

Get Chormaarray color from brewer palette

#### Parameters

*   `numRangs` **[number][94]** 
*   `brewerName` **[string][90]** 

Returns **color** `this`

### generateHTMLBrewerPalettes

Get HTML palete color

#### Parameters

*   `numberPalettes` **[number][94]** //number  of palletes max this.maxBrewerPalettes
*   `numRangs` **[number][94]** //number of colors for each palette max this.maxBrewerPalettes

Returns **color** `this`

### generateHTMLLegendColor

Generate HTML legend palete color

#### Parameters

*   `legendColors` **[array][93]** 
*   `legendRanges` **[array][93]** 
*   `textTitol` **[string][90]** 
*   `classCSS` **[string][90]** 
*   `numRang` **[string][90]** 8

Returns **color** `this`

[1]: #version

[2]: #mapstyle

[3]: #parameters

[4]: #examples

[5]: #getasyncgeojson

[6]: #parameters-1

[7]: #examples-1

[8]: #getgeomtypefromgeojson

[9]: #getfieldnamescolumnfromgeojson

[10]: #getimplementedlayertypes

[11]: #getfilterbydefault

[12]: #parameters-2

[13]: #examples-2

[14]: #generategeostatisticsfromfield

[15]: #parameters-3

[16]: #examples-3

[17]: #createstylelayer

[18]: #parameters-4

[19]: #setstylefrompredefinedramtemperatureheights

[20]: #parameters-5

[21]: #setstylefrompredefinedramtemperatureinterpolateheights

[22]: #parameters-6

[23]: #setstyletextsizebyfactorsize

[24]: #parameters-7

[25]: #setstylefrompredefinedramtemperaturecolor

[26]: #parameters-8

[27]: #setstylespaintfromranges

[28]: #parameters-9

[29]: #examples-4

[30]: #setstylebyfactorheights

[31]: #parameters-10

[32]: #examples-5

[33]: #getfieldtype

[34]: #parameters-11

[35]: #examples-6

[36]: #getextendfromgeojson

[37]: #gethalostylecolors

[38]: #setstylepaintfromuniquesvalues

[39]: #parameters-12

[40]: #examples-7

[41]: #bridgestatics

[42]: #parameters-13

[43]: #examples-8

[44]: #geojsonstatistics

[45]: #parameters-14

[46]: #examples-9

[47]: #getuniquevalues

[48]: #getstatsfromrangescolorsgeojson

[49]: #parameters-15

[50]: #getcolumnfromgeojson

[51]: #parameters-16

[52]: #_getcolumfromgeojsonfilter

[53]: #parameters-17

[54]: #csvstatics

[55]: #parameters-18

[56]: #examples-10

[57]: #getuniquevalues-1

[58]: #getstatsfromrangescolorscsv

[59]: #parameters-19

[60]: #getcolumfromcsv

[61]: #parameters-20

[62]: #arraystatics

[63]: #parameters-21

[64]: #examples-11

[65]: #getuniquevalues-2

[66]: #getbasicsstats

[67]: #parameters-22

[68]: #getstatsfromrangescolorsarray

[69]: #parameters-23

[70]: #jsontomap

[71]: #parameters-24

[72]: #examples-12

[73]: #utilsstatics

[74]: #examples-13

[75]: #colorizator

[76]: #parameters-25

[77]: #examples-14

[78]: #getrandomcolorfromarray

[79]: #getrandomcolor

[80]: #getcolorarrayfrompositionbrewer

[81]: #parameters-26

[82]: #getcolorsscaleranges

[83]: #parameters-27

[84]: #getcolorarrayfromselectedbrewer

[85]: #parameters-28

[86]: #generatehtmlbrewerpalettes

[87]: #parameters-29

[88]: #generatehtmllegendcolor

[89]: #parameters-30

[90]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

[91]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

[92]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

[93]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

[94]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

[95]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean



## Version

```javascript
alpha 0.0.2
```
## License

Reconeixement 4.0 Internacional de Creative Commons
(CC-BY 4-0)

[More info](https://www.icgc.cat/L-ICGC/Informacio-publica/Transparencia/Reutilitzacio-de-la-informacio)

##  Credits            

Developed by :

Institut Cartogràfic i Geològic de Catalunya (ICGC) - https://icgc.cat

Àrea d’Innovació i Estratègia Digital - Unitats Geostart