open-index/open-npm huggingface dataset:
npm package: @multimeric/geo-img
Description: Web components for displaying geotagged images
Author: Google LLC
Latest version: 0.0.1

# geo-img

Web components for displaying geotagged images with interactive maps.

**[Live Demo & Docs](https://multimeric.github.io/geo-img/)**

## Components

### `<geo-img>`

The `<geo-img>` component extracts geotagging information from the image's EXIF metadata and displays the image on an interactive map. You can customize the appearance and behaviour of the component using various attributes and CSS custom properties.

[**Click here for a live demo and API docs**](https://multimeric.github.io/geo-img/?path=/docs/geo-img-component--docs).

### `<view-marker>`

The `<view-marker>` component is used internally by `<geo-img>` to represent the camera's position and field of view on the map. It can also be used independently to display a directional marker.

[**Click here for a live demo and API docs**](https://multimeric.github.io/geo-img/?path=/docs/view-marker-component--docs).

## Installation

### Method 1: Using a Bundler (Recommended)

Install the package and its peer dependencies via npm:

```bash
npm install @multimeric/geo-img lit leaflet ts-exif-parser
```

For typical usage, you can just import the module, which will automatically register the components, allowing you to use them in HTML:

```js
import '@multimeric/geo-img';
```

Then you can use the `<geo-img>` component in your HTML:

```html
<geo-img 
  src="path/to/image.jpg"
  latitude="45.5017"
  longitude="-73.5673"
  bearing="90">
</geo-img>
```

If you need to use the components programmatically, you can import them directly:

```js
import { GeoImg } from '@multimeric/geo-img';
```

### Method 2: Direct Browser Usage via CDN

For quick prototyping or simple HTML pages without a bundler, you can load the UMD build from unpkg. The UMD build includes all necessary CSS bundled within the JavaScript file.

```html
<!DOCTYPE html>
<html>
<body>
  <geo-img src="image.jpg"></geo-img>
  <script src="https://unpkg.com/@multimeric/geo-img/dist/index.umd.js"></script>
</body>
</html>
```

**Note**: Using ESM imports directly in the browser (without a bundler) is not supported.