@geostarters/mapstyler-gl

v0.0.3

Published

2 years ago

Create Mapbox styles from GeoJson

Downloads

0High
0Medium
0Low

icgcgeostarters

sfggeogis

@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"]}}
 */

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@geostarters/mapstyler-gl

Install

Use

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