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.