png-db-map v0.3.3
PngDBMap
A Leaflet layer for visualizing spatial PngDB datasets.
Installation
With yarn or npm
yarn add png-db-map
npm i --save png-db-mapWith 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: Stringrequired
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