Raster Playground

Raster Manipulation - Clip, colorize & overlay!
Alternatives To Raster Playground
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
2 days agoHTML
My contributions to the #30DayMapChallenge 2019, a daily challenge focusing on spatial visualizations happening throughout November.
3 years agon,ull
Demonstrate the process of improving BoM heatmaps
2 years ago22apache-2.0R
Scripts, tools and example data for mapping wetland ecosystems using data driven R statistical methods like Random Forests and open source GIS
Raster Playground10
2 years ago28gpl-3.0JavaScript
Raster Manipulation - Clip, colorize & overlay!
5 years ago3HTML
A NodeJS vector tile server with a preview page. Originally a fork of mbtiles-server.
Predictive Soil Mapping5
2 years ago1otherR
a month ago1HTML
OpenGeoHub 2023 Workshop: "Unsupervised classification (clustering) of satellite images"
Landsat Sentinel Fusion5
5 years agomitJupyter Notebook
Complementarity Between Sentinel-1 and Landsat 8 Imagery for Built-Up Mapping in Sub-Saharan Africa
7 years agogpl-3.0HTML
Geographical ETRS-LAEA Grid Based Dasymetric Mapping
5 years ago
Alternatives To Raster Playground
Select To Compare

Alternative Project Comparisons

Netlify Status Stars hacktoberfest Stars

Raster Playground

A color playground for raster maps.

Why we made raster playground?

Raster manipulation (colorisation & clipping of tiles) is computationally heavy operation & not very feasible on the browser (frontend), thus we moved it to backend & then distributed by the CDN.

But this raised another challenge, how do we settle on the color schemes with backend, since the whole pipeline had to be rerun & old tiles purged? Earlier, we could just change the value & reload browser!

This utility helps simulate the color schemes quickly, along with clipping & map-styles you want to apply.


  • [X] Raster color manipulation
  • [X] All state in url
  • [X] Monochromatic tiles URL as an input
  • [ ] Clip as shape (for better visualisation)
    • [X] Shape file through Url
    • [ ] Shape file through uploads (from local system)
    • [X] Format available - TopoJson
    • [ ] More formats required (Geojson etc)
    • [X] Auto fit to shape file location (on file load)
  • [ ] Color selector
    • [X] Add colors
    • [X] Remove colors
    • [ ] Color ordering
    • [X] Alpha color (0 - transparent)
    • [X] Copy color in different format - HEX, RGBA, HSLA (JSON)
    • [ ] Download color format for ASE, GIMP/Inscape color scheme
  • [ ] Mobile version
  • [X] Search bar to search places
  • [X] Go to current location
  • [X] Dark Mode


  1. clone repo and install using -
npm install
  1. How to generate environment variables for development - ref .env.example

Run on local

npm run start

Build project

npm run build

How to use

  • Use chrome for better usability (Because initial stage of development)
  • Add monochromatic tiles URL (XYZ format) eg - https://your-tiles-url/{z}/{x}/{-y}.png
  • Add shape file URL (TopoJSON format)
  • Add some colour pallet to visualise colors on raster map
  • Add alpha (opacity) value (between 0-1)
  • If you get the desired visualisation, you can copy RGBA (JSON) and use it to generate colour tiles from the backend or send the link to your colleague/friends to verify.

How to contribute

Read contribution here


Popular Raster Projects
Popular Mapping Projects
Popular Graphics Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.