Grid json client for `Leaflet` and `Google Maps`.


1.0.74 years ago4 years agoMinified + gzip package size for @carto/zera in KB



Grid json client for Leaflet and Google Maps.

Installing zera

yarn add @carto/zera


zera uses jest for executing the unit tests located under the __test__ folder and karma with headless chrome for running the tests located under the test folder.

By default you need to be able to run headless chrome on your machine. But you can also edit the karma.config.js file and change the browser.

Running the thests

yarn test


zera uses webpack to generate an umd bundle located under the dist folder.

yarn build


new zera.Interactive([map], [gridUrl])

Creates a new zera object.

map is a reference to the native google|leaflet map and gridUrl is a string pointing to the grid.json url server.

const map = L.map('map').setView([42, -0.08], 5);
const gridUrl = 'https://carto.com/map_id/1/{z}/{x}/{y}.grid.json';
const interactivity = new zera.Interactive(map, '');

zera.on(event, callback)

Attaches event listeners to map events. Only a single listener can be attached for every event type. There are only three possible events:

  • on: Fired when the user clicks or moves the mouse over a feature. You can distinguish between them using event.type property.
  • off: Fired when the user clicks or moves the mouse off from a feature.
  • error Fired when there was an error getting the grid.json for a interaction.
    • This includes CARTO-429 limit error.
zera.on('on', event => {
    popup.setContent(`<h5>${event.data.name}</h5> <h6> ${event.type} </h6>`);


Removes an event listener.



Removes all the interactivity and callbacks.


If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.