BrokJSON - The space saving GeoJSON alternative

Installation

Download prefered version:

JavaScript

npm install brokjson

Or download sourcecode and install manually.

Further information:

Python

pip install brokjson

Further information:

PyPi: https://www.pypi.org/project/brokJSON/
Source: https://www.github.com/simonhuwiler/brokJSON_py

Ruby

gem install brokjson

Further information:

Rubygems: https://rubygems.org/gems/brokjson
Source: https://github.com/jimmyasyraf/brokJSON_rb

Other languages

No converter for your prefered language? Write one, it's easy! See Specification.

Example in JavaScript

See full documentation on GitHub.

Convert from BrokJSON to GeoJSON:

brok = require('brokjson');

// Load your BrokJSON
var data = {
  "properties": ["id", "title", "value"],
  "geometries": [{
    "type": "Point",
    "features": [
      [[8.5402, 47.3782], [1, "Datapoint 1", 343]],
      [[8.5637, 47.4504], [1, "Datapoint 2", 14]]
    ]
  }
]};

// Convert your BrokJSON to GeoJSON
const geojson = brok.brok2geo(data);

// Log it
console.log(geojson);Copy to clipboard

Convert from GeoJSON to BrokJSON:

brok = require('brokjson');

// Load your GeoJSON
var data = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "id": 1,
        "title": "Datapoint 1",
        "value": 343
      },
      "geometry": {
        "type": "Point",
        "coordinates": [8.5402, 47.3782]
      }
    }
  ]
};

// Convert your GeoJSON to BrokJSON
const brokdata = brok.geo2brok(data);

// Log it
console.log(brokdata);Copy to clipboard

Example with MapBox GL

The idea behind BrokJSON: RAM is mightier than the bandwidth - better download a manageable BrokJSON and convert it on runtime to GeoJSON than loading a huge GeoJSON. With MapBox GL, this would look like this:

import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import brok from 'brokjson'

// Load your converted BrokJSON-file
import data from './data.brokjson'

// Init Mapbox
mapboxgl.accessToken = '<your access token here>';
map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9'
})

// Load Data after map initialization
map.on('load', () => {

  // Add Data, convert it to GeoJSON!
  map.addSource('data', {
    type: 'geojson',
    data: brok.brok2geo(data)
  })

  // Style Layer
  map.addLayer({
    id: 'data',
    type: 'circle',
    source: 'data',
    paint: {
      'circle-radius': 2,
      'circle-color': '#bada55'
    }
  })
});
Copy to clipboard