leaflet maps add raster

[Xristos Xristoou]

i want to add a raster file in the leaflet map,after from searching i find this example where is that i need i think georaster-layer-for-leaflet-example.

the code look simple 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.osm.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!
          http://leafletjs.com/reference-1.2.0.html#gridlayer
      */
      var layer = new GeoRasterLayer({
          georaster: georaster,
          opacity: 0.7
      });
      layer.addTo(map);

      map.fitBounds(layer.getBounds());

  });
});

error :

GeoTIFF: Object
bundle.js:16 Fetch API cannot load file:///C:/Users/username/Downloads/georaster-layer-for-leaflet-example-master/example_4326.tif. URL scheme must be "http" or "https" for CORS request.
1.georaster @ bundle.js:16
bundle.js:16 Uncaught (in promise) TypeError: Failed to fetch
    at Object.1.georaster (bundle.js:16)
    at s (bundle.js:1)
    at e (bundle.js:1)
    at bundle.js:1

any idea how to fix it ?

[Luke Mason]

It looks like bundle.js isn’t able to load your tif from the file system.  It can only use http or https.  Load the file onto a website, change the url and try again.

 

Regards,

 

Luke Mason

Report & Web Developer

 

Ctrack Australia Pty Ltd

Tel: 1300 729 333 

Email: lu...@ctrack.com.au • Website: www.ctrack.com.au 

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.