GeoTIFF is not defined in vue with leaflet

[pinky2070500]

i try to put the tiff on the map but get this error, i use leaflet and vue to build the map. use yii2 to build website homepage. The tiff image is generated from gdal, saved in srouce yii2

This code create gtiff in gdal and yii2, is working. $path = 'projects/gsnc/storage/raster'.'/home'; FileHelper::createDirectory($path); $filePath = Yii::getAlias('@webroot/'.$path.'/features.geojson'); file_put_contents($filePath, json_encode([ 'type' => 'FeatureCollection', 'features' =>$features->all() ])); $shpin = 'projects/gsnc/storage/vector/hcm.shp'; $shpinPath = Yii::getAlias('@webroot/'.$shpin);

    $images = [];
    $message = '';

        $t=time();
        $outputPath = Yii::getAlias('@webroot/'.$path.'/idw_'.$chitieus.'.tif');
        $command = "gdal_grid -l features -zfield {$chitieus} -txe 106.329634 107.047352 -tye 10.33383406820594 11.178401873711785 -a invdistnn:power=2.0:smothing=1.0:radius=500.0:max_points=20:min_points=0:nodata=0.0 -ot Float32 -of GTiff \"{$filePath}\" {$outputPath}";
        $output = null;
        $retval = null;
        exec($command, $output, $retval);
        exec("gdalwarp -overwrite -t_srs EPSG:4326 -cutline $shpinPath -crop_to_cutline -dstalpha -of GTiff {$outputPath} ".Yii::getAlias('@webroot/'.$path.'/idw_'.$chitieus.'_wgs84_'.$t.'.tif'));
        $message.= "$chitieus excecuting...".implode(',', $output)."\n";
        $images[$chitieus] = Yii::getAlias('@web/'.$path.'/idw_'.$chitieus.'_wgs84_'.$t.'.tif');

    $this->data = [
        'features' => Yii::getAlias('@web/'.$path.'/features.geojson'),
        'images' => $images
    ];

    $this->date_from = to_db_date($this->date_from);
    $this->date_to =  to_db_date($this->date_to);
    $this->chitieus =  $chitieus;

    return $this->save();
}

This code in vue idw () { // GeoTIFF file URL. Currently only EPSG:4326 files are supported // Can be null if sourceFunction is GeoTIFF.fromArrayBuffer const url = "http://gsnc.local/projects/gsnc/storage/raster/home/idw_muivi_wgs84_1653559785.tif"; const options = { // See renderer sections below. // One of: L.LeafletGeotiff.rgb, L.LeafletGeotiff.plotty, L.LeafletGeotiff.vectorArrows renderer: null,

    // Use a worker thread for some initial compute (recommended for larger datasets)
    useWorker: false,

    // Optional array specifying the corners of the data, e.g. [[40.712216, -74.22655], [40.773941, -74.12544]].
    // If omitted the image bounds will be read from the geoTIFF file (ModelTiepoint).
    bounds: [],

    // Optional geoTIFF band to read
    band: 0,

    // Optional geoTIFF image to read
    image: 0,

    // Optional clipping polygon, provided as an array of [lat,lon] coordinates.
    // Note that this is the Leaflet [lat,lon] convention, not geoJSON [lon,lat].
    clip: undefined,

    // Optional leaflet pane to add the layer.
    pane: "overlayPane",

    // Optional callback to handle failed URL request or parsing of tif
    onError: null,

    // Optional, override default GeoTIFF function used to load source data
    // Oneof: fromUrl, fromBlob, fromArrayBuffer
    sourceFunction: GeoTIFF.fromUrl(url),

    // Only required if sourceFunction is GeoTIFF.fromArrayBuffer
    arrayBuffer: null,

    // Optional nodata value (integer)
    // (to be ignored by getValueAtLatLng)
    noDataValue: undefined,

    // Optional key to extract nodata value from GeoTIFFImage
    // nested keys can be provided in dot notation, e.g. foo.bar.baz
    // (to be ignored by getValueAtLatLng)
    // this overrides noDataValue, the nodata value should be an integer
    noDataKey: undefined,

    // The block size to use for buffer
    blockSize: 65536,

    // Optional, override default opacity of 1 on the image added to the map
    opacity: 1,

    // Optional, hide imagery while map is moving (may prevent 'flickering' in some browsers)
    clearBeforeMove: false,
  };

// create layer var layer = L.leafletGeotiff(url, options).addTo(map); },

[constantinius]

Hi @pinky2070500

This is not a geotiff.js issue, but more related to leafletGeotiff. Did you follow the instructions on how to import/include the dependencies?

I will close this issue, but you can still comment here if you have further questions.