All Projects → GeoTIFF → georaster-layer-for-leaflet

GeoTIFF / georaster-layer-for-leaflet

Licence: Apache-2.0 license
Display GeoTIFFs and soon other types of raster on your Leaflet Map

Programming Languages

HTML
75241 projects
typescript
32286 projects
shell
77523 projects
javascript
184084 projects - #8 most used programming language
Vue
7211 projects

Projects that are alternatives of or similar to georaster-layer-for-leaflet

GeoArrays.jl
Simple geographical raster interaction built on top of ArchGDAL, GDAL and CoordinateTransformations
Stars: ✭ 42 (-75%)
Mutual labels:  geo, gis, raster, geotiff, georaster
Geotiff.io
Static website for viewing and analyzing GeoTIFF's in the browser
Stars: ✭ 53 (-68.45%)
Mutual labels:  satellite, geospatial, gis, raster, satellite-imagery
geoblaze
Blazing Fast JavaScript Raster Processing Engine
Stars: ✭ 80 (-52.38%)
Mutual labels:  satellite, gis, raster, geotiff, satellite-imagery
Felicette
Satellite imagery for dummies.
Stars: ✭ 1,710 (+917.86%)
Mutual labels:  geospatial, gis, satellite-imagery, geospatial-visualization
GDAL.jl
Thin Julia wrapper for GDAL - Geospatial Data Abstraction Library
Stars: ✭ 78 (-53.57%)
Mutual labels:  satellite, geo, geospatial, raster
localtileserver
🌐 dynamic tile server for visualizing rasters in Jupyter with ipyleaflet or folium
Stars: ✭ 190 (+13.1%)
Mutual labels:  geospatial, gis, raster, satellite-imagery
Proj4.jl
Julia wrapper for the PROJ cartographic projections library
Stars: ✭ 23 (-86.31%)
Mutual labels:  geo, geospatial, gis
Shapefile.jl
Parsing .shp files in Julia
Stars: ✭ 40 (-76.19%)
Mutual labels:  geo, geospatial, gis
mars2d
【Mars2D平台 】主仓库,包含所有开源仓库清单导航
Stars: ✭ 182 (+8.33%)
Mutual labels:  leaflet, gis, webgis
Solaris
CosmiQ Works Geospatial Machine Learning Analysis Toolkit
Stars: ✭ 290 (+72.62%)
Mutual labels:  geo, geospatial, gis
Agentmaps
Make social simulations on interactive maps with Javascript! Agent-based modeling for the web.
Stars: ✭ 822 (+389.29%)
Mutual labels:  leaflet, geospatial, gis
google-maps-at-88-mph
Google Maps keeps old satellite imagery around for a while – this tool collects what's available for a user-specified region in the form of a GIF.
Stars: ✭ 93 (-44.64%)
Mutual labels:  satellite, gis, satellite-imagery
Go Geom
Package geom implements efficient geometry types for geospatial applications.
Stars: ✭ 456 (+171.43%)
Mutual labels:  geo, geospatial, gis
Mapsui
Mapsui is a .NET Map component for WPF, Xamarin.Forms, Xamarin.Android, Xamarin.iOS and UWP
Stars: ✭ 447 (+166.07%)
Mutual labels:  geo, geospatial, gis
Awesome Gis
😎Awesome GIS is a collection of geospatial related sources, including cartographic tools, geoanalysis tools, developer tools, data, conference & communities, news, massive open online course, some amazing map sites, and more.
Stars: ✭ 2,582 (+1436.9%)
Mutual labels:  geo, geospatial, gis
Orb
Types and utilities for working with 2d geometry in Golang
Stars: ✭ 378 (+125%)
Mutual labels:  geo, geospatial, gis
NetCDF.jl
NetCDF support for the julia programming language
Stars: ✭ 102 (-39.29%)
Mutual labels:  geo, geospatial, raster
turf-go
A Go language port of Turf.js
Stars: ✭ 41 (-75.6%)
Mutual labels:  geo, geospatial, gis
GeoJSON.jl
Utilities for working with GeoJSON data in Julia
Stars: ✭ 46 (-72.62%)
Mutual labels:  geo, geospatial, gis
Awesome Geospatial Companies
🌐 List of 500+ geospatial companies (GIS, Earth Observation, UAV, Satellite, Digital Farming, ..)
Stars: ✭ 184 (+9.52%)
Mutual labels:  satellite, geospatial, gis

🇺🇦 "Leaflet was created 11 years ago by Vladimir Agafonkin, an Ukrainian citizen living in Kyiv." - (LeafletJS)


georaster-layer-for-leaflet

Display GeoTIFFs and soon other types of rasters on your Leaflet Map

Install

npm install georaster-layer-for-leaflet

GeoRaster Prerequisite

GeoRasterLayer requires that input be first converted into GeoRaster format. You can install GeoRaster with the following command:

npm install georaster

Load Package via Script Tag

<script src="https://unpkg.com/georaster-layer-for-leaflet/dist/georaster-layer-for-leaflet.min.js">

Usage

new GeoRasterLayer({ georaster }).addTo(map);

Demos

Why

  • Support for nearly all projections, thanks to proj4-fully-loaded and epsg.io
  • Super faster rendering thanks to a simple nearest neighbor interpolation
  • Use of web workers means seamless integration that doesn't block main thread
  • Loads large geotiffs greater than a hundred megabytes
  • Supports custom rendering including custom colors, directional arrows, and context drawing
  • Doesn't depend on WebGL
  • Mask data inside or outside a given geometry

The GeoRasterLayer Class

A custom class for rendering GeoTIFF's (including COG's) on a leaflet map. The layer extends L.GridLayer, see the docs for inherited options and methods.

Usage Example

Source Code: https://github.com/GeoTIFF/georaster-layer-for-leaflet-example/blob/master/main.js

var parse_georaster = require("georaster");

var GeoRasterLayer = require("georaster-layer-for-leaflet");

// initalize leaflet map
var map = L.map('map').setView([0, 0], 5);

// add OpenStreetMap basemap
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var url_to_geotiff_file = "example_4326.tif";

fetch(url_to_geotiff_file)
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => {
    parse_georaster(arrayBuffer).then(georaster => {
      console.log("georaster:", georaster);

      /*
          GeoRasterLayer is an extension of GridLayer,
          which means can use GridLayer options like opacity.

          Just make sure to include the georaster option!

          Optionally set the pixelValuesToColorFn function option to customize
          how values for a pixel are translated to a color.

          http://leafletjs.com/reference-1.2.0.html#gridlayer
      */
      var layer = new GeoRasterLayer({
          georaster: georaster,
          opacity: 0.7,
          pixelValuesToColorFn: values => values[0] === 42 ? '#ffffff' : '#000000',
          resolution: 64 // optional parameter for adjusting display resolution
      });
      layer.addTo(map);

      map.fitBounds(layer.getBounds());

  });
});

Methods

Method Returns Description
updateColors(pixelValuesToColorFn, options) this Causes the tiles to redraw without clearing them first. It uses the updated pixelValuesToColorFn function. You can set a debugLevel specific to this function by passing in an options object with a debugLevel property. For example, you can turn on the console debugs for this method by setting debugLevel = 1 in the options (even if you created the layer with debugLevel = 0).

Advanced Capabilities

Please read about our advanced capabilities including custom context drawing functions, displaying directional arrows, and masking in ADVANCED.md.

More Questions

Check out our Frequently Asked Questions

Videos

Support

Contact the package author, Daniel J. Dufour, at [email protected]

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].