@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
    • Parameters
    • Examples
  • getGeomTypeFromGeoJSON
  • getFieldNamesColumnFromGEOJSON
  • getImplementedLayerTypes
  • getFilterByDefault
    • Parameters
    • Examples
  • generateGeoStatisticsFromField
    • Parameters
    • Examples
  • createStyleLayer
    • Parameters
  • setStyleFromPreDefinedRamTemperatureHeights
    • Parameters
  • setStyleFromPreDefinedRamTemperatureInterpolateHeights
    • Parameters
  • setStyleTextSizeByFactorSize
    • Parameters
  • setStyleFromPreDefinedRamTemperatureColor
    • Parameters
  • setStylesPaintFromRanges
    • Parameters
    • Examples
  • setStylebyFactorHeights
    • Parameters
    • Examples
  • getFieldType
    • Parameters
    • Examples
  • getExtendFromGeoJSON
  • getHaloStyleColors
  • setStylePaintFromUniquesValues
    • Parameters
    • Examples
• BridgeStatics
  • Parameters
  • Examples
• GeoJSONStatistics
  • Parameters
  • Examples
  • getUniqueValues
  • getStatsFromRangesColorsGeoJSON
    • Parameters
  • getColumnFromGEOJSON
    • Parameters
  • _getColumFromGEOJSONFilter
    • Parameters
• CSVStatics
  • Parameters
  • Examples
  • getUniqueValues
  • getStatsFromRangesColorsCSV
    • Parameters
  • getColumFromCSV
    • Parameters
• ArrayStatics
  • Parameters
  • Examples
  • getUniqueValues
  • getBasicsStats
    • Parameters
  • getStatsFromRangesColorsArray
    • Parameters
• JsonToMap
  • Parameters
  • Examples
• UtilsStatics
  • Examples
• Colorizator
  • Parameters
  • Examples
  • getRandomColorFromArray
  • getRandomColor
  • getColorArrayfromPositionBrewer
    • Parameters
  • getColorsScaleRanges
    • Parameters
  • getColorArrayfromSelectedBrewer
    • Parameters
  • generateHTMLBrewerPalettes
    • Parameters
  • generateHTMLLegendColor
    • Parameters

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

• pathGeoJSON string
• callback function

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

• keyField string
• tematicField string

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, default false)

Examples

MapStyle.setStylesPaintFromRanges("temp",6, "BuGn")

Returns paintStyle this

setStylebyFactorHeights

Returns style-extrude-heigths mapboxGL by factor * fieldvalue

Parameters

• tematicField string
• factorHeight number
• factor number

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

• tematicField string
• initColor string
• endColor string
• type string `type number or string"

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

• numRanges number : 5
• arrayColors Array : ["#ffddcc", "#ccddee", "#ffff00", "#ccddee", "#ffff00"]

Returns object

getColumnFromGEOJSON

Returns array from geojson properties field Used in the constructor

Parameters

• keyField string
• GeoJSON object
• forceNumber boolean (optional, default false)
• 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

• arrayCSV Array<number>
• numCSVColumn number
• null/null/position numCSVColumn field array CSV

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

• numRanges number : 5
• arrayColors Array : ["#ffddcc", "#ccddee", "#ffff00", "#ccddee", "#ffff00"]

Returns object

getColumFromCSV

Returns array from csv properties field Used in the constructor

Parameters

• numColum string
• dataCSV array
• forceToNumber boolean (optional, default false)

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

• numRanges number : 5
• arrayColors Array : ["#ffddcc", "#ccddee", "#ffff00", "#ccddee", "#ffff00"]

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

• lat number Latitude, measured in degrees.
• lon number Longitude, measured in degrees.

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

• numRangs number
• brewerPosition number
• brewerName string

Returns color this

getColorsScaleRanges

Get Chormaarray form two colors

Parameters

• numRangs number
• colorInit string
• colorEnd string
• brewerName string

Returns color this

getColorArrayfromSelectedBrewer

Get Chormaarray color from brewer palette

Parameters

• numRangs number
• brewerName string

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

• legendColors array
• legendRanges array
• textTitol string
• classCSS string
• numRang string 8

Returns color this

Version

alpha 0.0.2

License

Reconeixement 4.0 Internacional de Creative Commons (CC-BY 4-0)

More info

Credits

Developed by :

Institut Cartogràfic i Geològic de Catalunya (ICGC) - https://icgc.cat

Àrea d’Innovació i Estratègia Digital - Unitats Geostart