I'm incredibly new to GIS, but not to web development.

I have two land cover maps for two islands, which I'm spatializing data on top of for a web app. This data is agnostic of any real location data - I know that certain data points belong on certain land types, but since everything is just images and arrays, I've never needed to worry about long/lat. Up until now I've been using p5.js to build out the maps and the points.

Someone accidentally mentioning GIS triggered a quest to see if there are any JS libraries that deal with data from land use maps. Whether they generate GeoJSON from land use/cover images, or can somehow intake land cover data and display it over top of a live map, I'd love to see if I can future-proof my web app by using real maps instead of screenshots off of Google Earth. "Land cover/use" doesn't seem like it's a frequent tag on these libraries, but I'm new to this world and might be missing something.

Any ideas?

closed as too broad by neogeomat, whyzar, PolyGeo Jul 25 at 20:00

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.


Land use/land cover data is not different from other raster (image) data. It may represent different information than digital elevation models (DEMs) or other gridded data such as temperature or precipitation, but at the end of the day they are still composed by a grid of pixels where each pixel holds a specific value.

If you want to generate vector files (such as GeoJSON or Shapefile) from raster data I'd recommend to do that process before consuming the original data from a web application (using a JS library) and trying to do the conversion on the client. There are multiple options to accomplish this such as desktop programs (e.g. QGIS, ArcGIS) and command line utilities (GDAL). Its up to you to search for an alternative that you are comfortable with. Vector files are represented by different geometries such as points, lines and polygons. In your case you could convert your raster to polygons so that each polygon represents a different land use or land cover.

Regarding JS libraries, there are also many options that can display raster and vector data in your application. Some options are:

Most of this options will provide out of the box tools to display world imagery or basemaps (such as the one from OpenStreet Map) in your application and display your raster/vector data on top of it along with many many other functionalities.

From my perspective, the most straightforward to accomplish what you are looking for would be converting your raster data to vector (polygon) and choosing any of the libraries mention above to display those polygons. One thing to keep in mind is where you will host your data (specially if your land use/land cover images are considerable big) but that is out of the scope of this answer.

  • Technically I don't need even need to display the land cover data except in testing - I'm using it to determine where to place data points. I was mainly worried about converting this data to something like GeoJSON if I don't have real-world coordinates to start with. And, if the app were to be extensible, having an easy way of letting others input land cover maps. Thank you for this extremely detailed answer! – Tinstar Jul 25 at 20:01
  • I misunderstood your question then. If you want to add coordinates to your original land cover images search for georeferencing. – Marcelo Villa Jul 25 at 20:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.