Using Openlayers GeoTIFF sources in a django app

I have a django app with a page that displays OSM through Openlayers, I dynamically add some markers to it and now I also want to display raster overlays from .tif files.

I am struggeling to implement Openlayers GeoTIFF. This is my current testing template, where i am just trying to get any tif file to display. I am using a local copy of the openlayers code here:

{% load static %}    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>       

    <link rel="stylesheet" href="{% static '/css/ol.css' %}">
    <script src="{% static '/js/ol.js' %}"></script>
    <script type="module" src="{% static '/ol/source/GeoTIFF.js' %}"></script>
    <script src="{% static '/js/proj4.js' %}"></script>
    
</head>
<body id="body">   
    <div id="map" style="width: 1000px; height: 500px;"></div>
</body>

<script type="module">        
  const source = new GeoTIFF({
    sources: [
      {
        url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif',
      },
    ],
  });

  const layer = new TileLayer({ source });

  const map = new Map({
    target: 'map',
    layers: [layer],
    view: new View({
      center: [0, 0],
      zoom: 12,
    }),
  });
</script>
</html>

This doesnt work because GeoTIFF.js is trying to import from 'geotiff', which it cant find. I know I probably have to go through the npm install and somehow bundle the dependencies to use GeoTIFF in a template like this but I am a noob and cant seem to wrap my head around that. I tried building a package with vite but couldnt get that to work.

This is my entry file geotiff-entry.js:

import GeoTIFF from 'ol/source/GeoTIFF.js';
export default GeoTIFF;

And this is vite.config.js

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/geotiff-entry.js'),
      name: 'GeoTIFF',
      fileName: () => 'geotiff-bundle.js', // 👈 Force .js output
      formats: ['es'],
    },
    rollupOptions: {
      output: {
        inlineDynamicImports: true,
      },
    },
  },
});

Using the generated geotiff-bundle.js and importing in the template like this:

import Map from 'https://cdn.jsdelivr.net/npm/ol@v10.6.0/Map.js';
import View from 'https://cdn.jsdelivr.net/npm/ol@v10.6.0/View.js';
import TileLayer from 'https://cdn.jsdelivr.net/npm/ol@v10.6.0/layer/WebGLTile.js';
import GeoTIFF from '{% static "js/geotiff-bundle.js" %}';

results in a specifier error in BaseVector.js when trying 'import RBush from 'rbush''. I cant get any further than that

So if anyone has any advice on how to get GeoTIFF implemented with a django app that would really help me out.

Вернуться на верх