npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

leaflet-geotag-photo

v0.6.2

Published

Leaflet plugin for photo geotagging

Downloads

867

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

nypl_labsnypl_labs

Keywords

Readme

Leaflet.GeotagPhoto

Leaflet plugin for photo geotagging.

Examples:

Screenshot of camera module

Leaflet.GeotagPhoto is part of The New York Public Library's NYC Space/Time Directory.

You can also find Leaflet.GeotagPhoto on Leaflet's plugin page.

Usage

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

<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:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/Leaflet.GeotagPhoto.css" />
<script src="https://unpkg.com/[email protected]/dist/Leaflet.GeotagPhoto.min.js"></script>

Modes

L.GeotagPhoto.Crosshair

Crosshair mode

Example

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

API

L.GeotagPhoto.Crosshair extends L.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 | | 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

Example

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.

| Function | Description | |:------------------------------------------|:------------------------------------------------| | L.geotagPhoto.camera(feature, options?) | Creation, feature is input for field-of-view | | getFieldOfView () | Returns field of view of camera | | getCameraLatLng () | Returns camera's LatLng | | getTargetLatLng () | Returns target's LatLng | | getCameraPoint () | Returns camera's GeoJSON Point | | getTargetPoint () | Returns target's GeoJSON Point | | getCenter () | Returns LatLng of point halfway camera and target | | getBounds () | Returns 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 | See below | Camera icon | targetIcon | L.Icon | See below | Target icon | angleIcon | L.Icon | See below | Angle icon | outlineStyle | L.Path options | See below | Style of field-of-view triangle's outline | fillStyle | L.Path options | 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
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 and unpkg.com, 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/