PngDBMap

A Leaflet layer for visualizing spatial PngDB datasets.

Installation

With yarn or npm

yarn add png-db-map
npm i --save png-db-map

With unpkg

<link rel="stylesheet" href="https://unpkg.com/png-db-map/dist/png-db-map.min.css">
<script src="https://unpkg.com/png-db-map/dist/png-db-map.min.js"></script>

Usage

// Where to put the map element
const mount = '#pdbm';

/**
 * PngDBMap construction is an async process.
 */
const pdbm = await new PngDBMap(mount, {
	fields: {
		primary: 'Category',
		secondary: ['Open', 'Close'],
	},
	
	filter(record, props) {
		return record.Open <= props.time && record.Close > props.time;
	},
	
	palette: {
		office: '#EAE0C4',
		retail: '#FC7441',
        restaurants: '#7FA5A7',
	},
	
	props: {
		time: 940,
	},
});


/**
 * Listen for map events. (Only available if config.marker != false)
 */
pdbm.listen(marker => {
	const { attributes, data, latLng } = marker;
	
	const nextTime = doSomethingWith(data);
	pdbm.update({
		time: nextTime,
	});
});

API

new PngDBMap(mount, config)

mount

Type: String, Default: "body"

A selector for an element to attach the map to.

config.attribution

Type: String

Map attribution string.

config.bounds

Type: Array<Array<Number>[2]>[2]

Bounding box for your map.

config.center

Type: Array<Number>[2], Default: [~42.36,~-71.07]

Center starting point of the map.

config.colored

Type: Boolean, Default: true

Whether the map uses the config.palette or a greyscale.

config.debounce

Type: Number, Default: 200

Debounce length for calling the .listen method.

config.fields.primary

Type: String[required]

The field that will be categorically rendered onto the map.

config.fields.secondary

Type: Array<String>

Any other fields that you would like to fetch and use from your PngDB.

config.filter

Type: Function(Object[,Object]) -> Boolean

A function for filtering out records. The first argument passed to the function is the record in question, the second being the current props.

Note: Since the shader can't access the JS scope, all values used must be from the two arguments passed through and they must be scalar.

config.layers

Type: Object<Boolean>, Default: The unique values of your primary field, all set to true.

This attribute allows you specify which layers/unique values of your primary field are being initially rendered to the map. This can be adjusted throughout the map's lifetime using the .setLayers method.

config.marker

Type: Object|Boolean

If given an object, the properties will be used in place of the default marker properties.

If given true, default marker properties are used, but if given false, then no marker is rendered and the .listen method is made unavailable.

config.marker.color

Type: String, Default: '#EEEEEE'

config.marker.opacity

Type: Number, Default: 0.5

config.marker.radius

Type: Number, Default: 25

config.marker.weight

Type: Number, Default: 2

config.maxZoom

Type: Number, Default: 18

Maximum zoom level for the map.

config.minZoom

Type: Number. Default: 5

Minimum zoom level for the map.

config.path

Type: String, Default: "/data/db/data.json"

The path to where your PngDB .json file is stored.

config.props

Type: Object

Any auxiliary properties that you want to expose to the shader. Used by the .update method.

config.shader.fade

Type: Number, Default: 3

The upper-bound for records-per-pixel which defines the range that determines how opaque a pixel is presented.

config.shader.seed

Type: Number, Default: 100

This value is used to seed the RNG that multiplexes the color values of shared pixels.

config.tiles

Type: String, Default: https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png

The URL to pull the map tiles from.

config.zoom

Type: Number, Default: 13

The starting zoom level once the map is rendered.

PngDBMap.listen(callback)

callback

Type: function([Object])

The .listen method is provided as a hook to listen into the map events firing off. This method is debounced using the config.debounce option, which can either be set to false to turn off, or any other Number in milliseconds.

PngDBMap.setDebounce(debounce)

debounce

Type: Number

The .setDebounce method is for resetting the config.debounce value that was set when instantiating the map.

PngDBMap.setLayers(layers)

layers

Type: Object<Boolean>

The .setLayers method is for toggling on/off layers, each layer being a unique value of your primary field.

PngDBMap.update(props)

props

Type: Object

Pass new props into the map's shader.

Note: all props passed through this method must have been included in the config during construction.

PngDBMap.version

Type: String

The current version of PngDBMap

Related

• Spatial PngDB
• PngDB
• Leaflet