# leaflet-geotag-photo

> Leaflet plugin for photo geotagging

Latest version **0.6.2** (published 2017-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install leaflet-geotag-photo
pnpm add leaflet-geotag-photo
yarn add leaflet-geotag-photo
bun add leaflet-geotag-photo
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.2 |
| Published | 2017-07-09 |
| First published | 2016-12-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 73 |
| Author | Bert Spaan |
| Maintainers | nypl_labs |

## Links

- npm: https://www.npmjs.com/package/leaflet-geotag-photo
- Repository: https://github.com/nypl-spacetime/Leaflet.GeotagPhoto
- Homepage: https://github.com/nypl-spacetime/Leaflet.GeotagPhoto#readme
- Issues: https://github.com/nypl-spacetime/Leaflet.GeotagPhoto/issues
- npm.io page: https://npm.io/package/leaflet-geotag-photo

## Dependencies (2)

- [leaflet](https://npm.io/package/leaflet.md) ^1.0.2
- [field-of-view](https://npm.io/package/field-of-view.md) ^0.2.2

## Recent versions

- 0.6.2 (latest) — 2017-07-09
- 0.6.1 — 2017-06-06
- 0.6.0 — 2017-06-05
- 0.5.1 — 2017-05-22
- 0.5.0 — 2017-05-22
- 0.4.1 — 2017-05-08
- 0.4.0 — 2017-05-03
- 0.3.7 — 2017-03-15
- 0.3.6 — 2017-03-10
- 0.3.5 — 2017-03-10
- 0.3.4 — 2017-03-09
- 0.3.3 — 2017-03-09
- 0.3.2 — 2017-03-09
- 0.3.1 — 2016-12-26
- 0.3.0 — 2016-12-26
- … 4 more at https://npm.io/package/leaflet-geotag-photo/versions

## README

# Leaflet.GeotagPhoto

Leaflet plugin for photo geotagging.

Examples:

- [Crosshair mode](http://spacetime.nypl.org/Leaflet.GeotagPhoto/examples/crosshair.html)
- [Camera mode](http://spacetime.nypl.org/Leaflet.GeotagPhoto/examples/camera.html)

[![Screenshot of camera module](screenshots/example.png)](http://spacetime.nypl.org/Leaflet.GeotagPhoto/examples/camera.html)

Leaflet.GeotagPhoto is part of The New York Public Library's [NYC Space/Time Directory](http://spacetime.nypl.org/).

You can also find Leaflet.GeotagPhoto on [Leaflet's plugin page](http://leafletjs.com/plugins.html).

## Usage

Include the following HTML in your page's `<head>` tag:

```html
<link rel="stylesheet" href="https://unpkg.com/leaflet-geotag-photo/dist/Leaflet.GeotagPhoto.css" />
<script src="https://unpkg.com/leaflet-geotag-photo/dist/Leaflet.GeotagPhoto.min.js"></script>
```

The HTML above links to the latest version of Leaflet.GeotagPhoto. In production, you should link to a specific version, to prevent newer versions breaking your application:

```html
<link rel="stylesheet" href="https://unpkg.com/leaflet-geotag-photo@0.5.1/dist/Leaflet.GeotagPhoto.css" />
<script src="https://unpkg.com/leaflet-geotag-photo@0.5.1/dist/Leaflet.GeotagPhoto.min.js"></script>
```

## Modes

### `L.GeotagPhoto.Crosshair`

![Crosshair mode](screenshots/crosshair.jpg)

#### Example

```js
L.geotagPhoto.crosshair().addTo(map)
  .on('input', function (event) {
    var point = this.getCrosshairPoint()
  })
```

#### API

`L.GeotagPhoto.Crosshair` extends [L.Evented](http://leafletjs.com/reference-1.0.0.html#evented).

| Function                            | Description                                     |
|:------------------------------------|:------------------------------------------------|
| `L.geotagPhoto.crosshair(options?)` | Creation                                        |
| `addTo (map)`                       | Add `L.GeotagPhoto.Crosshair` to `map`          |
| `removeFrom (map)`                  | Remove `L.GeotagPhoto.Crosshair` from `map`     |
| `getCrosshairLatLng ()`             | Returns crosshair's [`LatLng`](http://leafletjs.com/reference-1.0.0.html#latlng) |
| `getCrosshairPoint ()`              | Returns crosshair's GeoJSON Point               |

#### Options

| Option          | Type          | Default                                               | Description
|:----------------|:--------------|:------------------------------------------------------|:-------------|
| `crosshairHTML` | `HTML String` | `<img src="../images/crosshair.svg" width="100px" />` | HTML string of crosshair element |

### `L.GeotagPhoto.Camera`

![Camera mode](screenshots/camera.jpg)

#### Example

```js
var cameraPoint = [6.83442, 52.43369]
var targetPoint = [6.83342, 52.43469]

var points = {
  type: 'Feature',
  properties: {
    angle: 20
  },
  geometry: {
    type: 'GeometryCollection',
    geometries: [
      {
        type: 'Point',
        coordinates: cameraPoint
      },
      {
        type: 'Point',
        coordinates: targetPoint
      }
    ]
  }
}

var options = {
  draggable: true
}

L.geotagPhoto.camera(points, options).addTo(map)
  .on('change', function (event) {
    // Get camera field of view
    // See:
    //   https://github.com/nypl-spacetime/field-of-view#output
    var fieldOfView = this.getFieldOfView()
  })
```

#### API

`L.GeotagPhoto.Camera` extends [L.FeatureGroup](http://leafletjs.com/reference-1.0.0.html#featuregroup).

| Function                                  | Description                                     |
|:------------------------------------------|:------------------------------------------------|
| `L.geotagPhoto.camera(feature, options?)` | Creation, `feature` is [input for field-of-view](https://github.com/nypl-spacetime/field-of-view#input) |
| `getFieldOfView ()`                       | Returns [field of view of camera](https://github.com/nypl-spacetime/field-of-view#output) |
| `getCameraLatLng ()`                      | Returns camera's [`LatLng`](http://leafletjs.com/reference-1.0.0.html#latlng) |
| `getTargetLatLng ()`                      | Returns target's [`LatLng`](http://leafletjs.com/reference-1.0.0.html#latlng) |
| `getCameraPoint ()`                       | Returns camera's GeoJSON Point                  |
| `getTargetPoint ()`                       | Returns target's GeoJSON Point                  |
| `getCenter ()`                            | Returns [`LatLng`](http://leafletjs.com/reference-1.0.0.html#latlng) of point halfway camera and target |
| `getBounds ()` | Returns [`LatLngBounds`](http://leafletjs.com/reference-1.0.0.html#latlngbounds) of field of view triangle |
| `centerBounds (bounds)`                   | Moves camera and target so their center lies in the middle of `bounds` |
| `setAngle (angle)`                        | Set angle of view                               |
| `setCameraLatLng (latLng)`                | Set `LatLng` of camera                          |
| `setTargetLatLng (latLng)`                | Set `LatLng` of target                          |
| `setCameraAndTargetLatLng (cameraLatLng, targetLatLng)` | Set `LatLng` of camera and `LatLng` of target |
| `setDraggable (boolean)`                  | Toggle between static or draggable camera       |

#### Options

| Option                | Type      | Default | Description
|:----------------------|:----------|--------:|:----------------------------------------------------------|
| `draggable`           | `Boolean` | `true`  | Whether the camera is draggable with mouse/touch or not   |
| `angleMarker`         | `Boolean` | `true`  | Whether the angle of the field-of-view can be changed with a draggable marker
| `minAngle`            | `Number`  |      5  | Minimum angle of field-of-view
| `maxAngle`            | `Number`  |     120 | Maximum angle of field-of-view
| `cameraIcon`          | [`L.Icon`](http://leafletjs.com/reference-1.0.2.html#icon) | See below    | Camera icon
| `targetIcon`          | [`L.Icon`](http://leafletjs.com/reference-1.0.2.html#icon) | See below    | Target icon
| `angleIcon`          | [`L.Icon`](http://leafletjs.com/reference-1.0.2.html#icon) | See below    | Angle icon
| `outlineStyle`        | [`L.Path options`](http://leafletjs.com/reference-1.0.2.html#path-option) | See below | Style of field-of-view triangle's outline
| `fillStyle`           | [`L.Path options`](http://leafletjs.com/reference-1.0.2.html#path-option) | See below | Style of field-of-view triangle's fill polygon
| `control`             | `Boolean` | `true`  | Whether to show camera control buttons                    |
| `controlCameraImg`    | `String`  | `../images/camera-icon.svg`    | URL to icon displayed in camera control button
| `controlCrosshairImg` | `String`  | `../images/crosshair-icon.svg` | URL to icon displayed in crosshair control button

##### Defaults

```js
const defaults = {
  cameraIcon: L.icon({
    iconUrl: '../images/camera.svg',
    iconSize: [38, 38],
    iconAnchor: [19, 19]
  }),

  targetIcon: L.icon({
    iconUrl: '../images/marker.svg',
    iconSize: [32, 32],
    iconAnchor: [16, 16]
  }),

  angleIcon: L.icon({
    iconUrl: '../images/marker.svg',
    iconSize: [32, 32],
    iconAnchor: [16, 16]
  }),

  outlineStyle: {
    color: 'black',
    opacity: 0.5,
    weight: 2,
    dashArray: '5, 7',
    lineCap: 'round',
    lineJoin: 'round'
  },

  fillStyle: {
    weight: 0,
    fillOpacity: 0.2,
    fillColor: '#3388ff'
  }
}
```

#### Keyboard navigation

- Use `tab` to switch between map, camera and target
  - Use arrow keys to move map, camera or target
- Press `C` to move camera to center of current map view
- Press `M` to center map on current camera position

## Building & Publishing

To build the plugin, run:

    npm run build

The resulting files will be available in the `dist` directory.

To publish the plugin to [npm](https://www.npmjs.com/package/leaflet-geotag-photo) and [unpkg.com](https://unpkg.com/leaflet-geotag-photo), run:

    npm publish

## See also

- http://spacetime.nypl.org/
- https://github.com/nypl-spacetime/field-of-view
- https://github.com/nypl-spacetime/surveyor
- http://turfjs.org/

---
_Source: https://npm.io/package/leaflet-geotag-photo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._