Table of Contents

GDAL GIS in Browser (JS GIS | geotoolbox)

]

geotoolbox is javascript tool for geographers. It allows to simply deal with geojson properties (attribute data) and provides several GIS operations useful for thematic cartography.

1. Installation

1.1. In browser

Latest version

<script src="https://cdn.jsdelivr.net/npm/geotoolbox" charset="utf-8"></script>

Pinned version

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]"
  charset="utf-8"
></script>

1.2. In Observable

Latest version

geo = require("geotoolbox");

Pinned version

geo = require("[email protected]");

2. Demo

Find a demo of all functions here.

3. Documentation

3.1. Handle properties

Here we are talking about some easy functions useful to handle attribute data. Example

add allows to add a new field in the attribute table. This function return a new object and do not modify the initial object.

geo.add({
    x: world, // a geojson
    field: "gdppc", // new colname (string)
    expression: "gdp/pop*1000" // a string containing an expression
})

filter allows to filter a geojson from its attribute table.This function return a new object and do not modify the initial object.

geo.filter({
    x: world, // a geojson
    expression: "pop2022 >= 100000" // an expression (string)
})

head allows to get the n top values from a given field.This function return a new object and do not modify the initial object.

geo.head({
    x: world, // a geojson
    field: "gdp", // a colname (string)
    nb: 5 // default:10. Number of features to get. Here, the 5 richest countries.
})

keep allows to select one or several columns to keep in the attribute table. All other columns are deleted. This function return a new object and do not modify the initial object.

geo.keep({
    x: world, // a geojson
    field: ["ISO3", "pop2020"] // colname(s) (string or array of strings)
})

remove allow to remove one or several columns in the attribute table. This function return a new object and do not modify the initial object.

geo.remove({
    x: world, // a geojson
    field: ["tmp", "FID"] // colname(s) (string or array of strings)
})

subset allows to create a subset from an array of values. This function return a new object and do not modify the initial object.

geo.subset({
    x: world, // a geojson
    field: "ISO3", // colname (string)
    selection: ["USA", "CAN", "MEX"], // values to be kept. Here, North american countries
    inverse: false // default: false. If true, all countries except USA, CAN and MEX are kept
})

table allows to get a geojson attribute table.

geo.table(world // a geojson)

tail allows to get the n bottom values from a given field.This function return a new object and do not modify the initial object.

geo.tail({
    x: world, // a geojson
    field: "gdp", // a colname (string)
    nb: 5 // default:10. Number of features to get. Here, the 5 least wealthy countries
})

3.2 Handle geometries

Here we are talking about some easy functions useful for thematic maps, based on topojson, d3geo and jsts.

aggregate allows to merge geometries based on their topology. To merge polygon geometries, see union. Example

geo.aggregate(world) // a geojson

With options, you can compute an aggregate by id.

continents = geo.aggregate(
    world, // a geojson
    {
        id: "continent" // ids
    })

bbox allows to return a geographic bounding box in geojson from a geojson or a n array defining a bounding [[left, bottom], [right, top]]. This function is basend on Jacob Rus code. Example

geo.bbox(world) // a geojson

border allows to extract boundaries from a geojson (polygons). With options, you can get ids and calculate discontinuities. Example

geo.border(world) // a geojson

With options:

geo.border(
    world, // a geojson
    {
        id: "ISO3", // ids
        values: "pop", // values
        type: "abs", // type of discontinuities calculated: rel (relative), abs(absolute) (default:"rel")
        share: 0.8 // share of kept borders (default: null for all)
    })

buffer allows to build a buffer from points, lines or polygones. The distance is in kilimeters.

geo.buffer(geojson, { dist: 1000 }) // 1000 km

The distance value can also be contained in a geojson field (in the properties). In this case, you just have to indicate the name of this field.

geo.buffer(geojson, { dist: "a field" }) // a filed in properties

The merge option allows to merging all the output buffers.

geo.buffer(geojson, { dist: 1000, merge:true })

The clip option prevents the buffers from sticking out of the world outline. Not having coordinates that exceed [-90, 90] in latitude and [-180, 180] in longitude is necessary for the d3.js projection functions to work properly.

geo.buffer(geojson, { dist: 1000, clip:true })

The step option allows to define the precision of the buffer (default:8)

geo.buffer(geojson, { dist: 1000, step:1 })

You can use wgs84=false if your gejson is not in wgs84. In this case, the distance will be given in the map coordinates.

geo.buffer(geojson, { dist: 1000, wgs84:false })

clip allows to clip geometries. Example

geo.clip(geojson1, {clip:geojson2})

With the option reverse:true, you can make a difference operation.

geo.clip(geojson1, {clip:geojson2, reverse: true})

You can also define a buffer in km around the clip.

geo.clip(geojson1, {clip:geojson2, buffer: 100})

centroid allows to compute centroids from polygons. Example

geo.centroid(world) // a geojson (polygons)

By default, the centroid is placed in the largest polygon. But yout can avoid it.

geo.centroid(
    world, // a geojson
    {
        largest: false // largest polygon. true/false (default: true)
    })

Moreover, it may happen that the coordinates of your base map are not in latitudes and longitudes, but already projected. In this case you can use the option planar = true.

geo.centroid(
    world, // a geojson
    {
        largest: false, // largest polygon. true/false (default: true)
        planar: true // if geometries are already projected
    })

coords2geo allows to build a geojson from a table with lat,lng coordinates. Example

geo.coords2geo(
    data, // a json
    {
        lat: "lat" // the field containig latitude coordinates (you can use also `latitude`)
        lng: "lon" // the field containig longitude coordinates (you can use also `longitude`)
    })

This function works also if coordinates are stored in a single field.

geo.coords2geo(
    data, // a json
    {
        coords: "Coordinates" // the field containig coordinates (you can use also `coordinates`)
    })

For an even simpler automatic use, you don't have to specify the name of the variables containing the coordinates. If your data table contains the following fields (lat, latitude, lon,lng, longitude, coords, coordinates, coordinate), they are automatically selected. It is convenient, but for a better control and a faster calculation, it is still better to define yourself where the coordinates are.

geo.coords2geo(data) // a json

Sometimes there can be an unfortunate inversion of the coordinates. In this case you can simply set the reverse option to true.

geo.coords2geo(
    data, // a json
    {
        reverse: true // to reverse latitudes and longitude coordinates
    })

dissolve allows to disolve geometries (multi parts to single parts). Example

geo.dissolve(world) // a geojson

union allows to merge polygon geometries. Example

geo.union(world) // a geojson

With options, you can compute an union by id.

continents = geo.union(
    world, // a geojson
    {
        id: "continent" // ids
    })

simplify allows to simplify geometries preserving topology (topojson.simplify algorithm). Example

geo.simplify(
    world, // a geojson
    {
        k, // factor of simplification (default: 0.5)
        merge: false // true to merge geometries(default: false)
    })

tissot tissot allows to get the Tissot's indicatrix. Example

geo.tissot(20) // step (default; 10)

geolines allows to get the natural geographic lines such as equator, tropics & polar circles. Example

geo.geolines()

3.3 Helpers

featurecollection allows to convert an array of features or an array of geometries to a well formated geosjon. Example

geo.featurecollection(features)

Long's blog

GDAL GIS in Browser (JS GIS)