CODEWITHSUNDEEP
javascriptleaflet
Mr.Pickles
Mr.Pickles

Reputation: 1

Leaflet for using custom NOT geo-maps

I just started getting familiar with the Leaflet library. I need to figure out how to load large amounts of abstract data into a Leaflet. Not a geo-map.

Let it be a "map" that displays a million digits of Pi in color. It is not so important what it displays. It is important that I have a page that loads some array of bytes in chunks and shows it as colored pixels. Ideally, you need 10x10 chunks. The user goes to the page with the map and sees, for example, 100 chunks, i.e. 10x10 chunks of 10x10 pixels, which represent the PI number. Using the mouse, the user moves left-right and the application requests the pixels not yet loaded from the backend.

Can Leaflet's capabilities solve similar problems? Or plugins written for Leaflet?

In theory, it seems to me that this is possible. But in practice, all guides and documentation are for working with geo-maps or raster large images.

Upvotes: 0

Views: 348

Answers (1)

Seth Lutske
Seth Lutske

Reputation: 10686

Your question is a little generic, but I think what you're talking about is making your own GridLayer. This is leaflet's underlying class for creating a tiled grid of any HTML element you can think of. Whether its a <div> with text in it, or a <canvas>, or whatever you like. I'm not sure what exactly you mean by "a page that loads some array of bytes in chunks and shows it as colored pixels", but that sounds like something that can be done by writing to a canvas using putImageData, and then applied to a GridLayer.

I recommend reading the tutorial on extending leaflet - extending layers. Once you understand this, you'll see that leaflet is built to render zoomable, pannable grids of whatever you want. The links that Ivan Sanchez left are great examples of the crazy stuff you can do with GridLayers (formly called L.TileLayer.Canvas in older leaflet versions)

Upvotes: 1

Related Questions