---
title: "COG"
description: "Register the cog:// protocol to read and render Cloud Optimized GeoTIFFs in the browser per viewport."
canonical_url: "https://maplibre.mhaibaraai.cn/en/docs/extensions/cog"
---
# COG

> Register the cog:// protocol to read and render Cloud Optimized GeoTIFFs in the browser per viewport.

## Introduction

[maplibre-cog-protocol](https://github.com/geomatico/maplibre-cog-protocol) adds a `cog://` protocol to MapLibre: it reads only the byte ranges a GeoTIFF view needs straight from object storage and decodes them in the browser. After registering it, set the `url` of `MaplibreRasterLayer` to a `cog://` address.

> [!NOTE]
> 
> Requires the optional dependency 
> 
> @geomatico/maplibre-cog-protocol
> 
> . The COG must be in EPSG:3857 (Web Mercator); keep 
> 
> tileSize
> 
>  at 256.

## Register the protocol

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@movk/maplibre'],
  maplibre: {
    protocols: { cog: true }
  }
})
```

```ts [main.ts (Vue + Vite)]
import { registerCogProtocol } from '@movk/maplibre/utils/cog'

registerCogProtocol()
```

## Usage

```vue [CogExample.vue]
<script setup lang="ts">
withDefaults(defineProps<{ opacity?: number }>(), {
  opacity: 1
})
</script>

<template>
  <div class="h-115 w-full overflow-hidden rounded-(--ui-radius) border border-default">
    <MaplibreMap :options="{ style: 'https://tiles.openfreemap.org/styles/positron', center: [1.83369, 41.5937], zoom: 14 }">
      <!-- COG 须为 EPSG:3857；tileSize 保持 256 与协议输出一致 -->
      <MaplibreRasterLayer url="cog://https://labs.geomatico.es/maplibre-cog-protocol/data/image.tif" :opacity="opacity" />
    </MaplibreMap>
  </div>
</template>
```

> [!TIP]
> 
> For single-band data, append a color ramp to the address (for example 
> 
> #color:BrewerSpectral9,1700,2900,c
> 
> ); see the maplibre-cog-protocol docs for the syntax.

## Changelog

See commit history for [src/runtime/utils/cOG.ts](https://github.com/mhaibaraai/movk-maplibre/commits/main/src/runtime/utils/cOG.ts).


## Sitemap

See the full [sitemap](https://maplibre.mhaibaraai.cn/sitemap.md) for all pages.