/raster-playground

Raster Manipulation - Clip, colorize & overlay!

Primary LanguageHTMLGNU General Public License v3.0GPL-3.0

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.

Features

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

Installation

clone repo and install using -

npm install

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