examples/camera.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Camera - Leaflet.GeotagPhoto</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <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>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
    <style>
      body {
        position: absolute;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;

        display: flex;
        font-size: 16px;
        font-family: monospace;
      }

      body, a, a:visited {
        color: black;
      }

      body > * {
        min-width: 200px;
      }

      h1 {
        font-size: 1.5em;
        margin-top: 0;
      }

      h2 {
        font-size: 1em;
      }

      .light {
        font-weight: normal;
      }

      #map-container, #map {
        position: relative;
        height: 100%;
        width: 100%;
      }

      #sidebar {
        width: 600px;
        padding: 1em;
        overflow: auto;
      }

      #slider-container {
        border-width: 2px;
        border-color: rgba(0, 0, 0, 0.5);
        border-style: solid;
        width: 30%;
        left: calc(50% - 15%);
        z-index: 9999;
        position: absolute;
        bottom: 20px;
        margin: 0 auto;
        background-color: white;
        padding: .5em 1em;
        border-radius: 20px;
        display: flex;
      }

      #slider {
        margin: 0 1em;
        padding: 0;
        width: 100%;
      }

      #angle {
        text-align: right;
        width: 4.5em;
      }

      pre {
        margin: 0;
      }

      #sidebar, .hljs {
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <div id="map-container">
      <div id="map">
      </div>
      <div id="slider-container">
        <label for="slider">Angle:</label>
        <input id="slider" type="range" min="1" max="120" step="1" value="20">
        <span id="angle"></span>
      </div>
    </div>
    <div id="sidebar">
      <h1>Leaflet.GeotagPhoto</h1>
      <h2>Mode: Camera <span class="light">(switch to <a href="crosshair.html">Crosshair</a>)</span></h2>
      <p>
        Leaflet plugin for photo geotagging. See <a href="https://github.com/nypl-spacetime/Leaflet.GeotagPhoto">GitHub</a> for details.
      </p>
      <h2>Output:</h2>
      <pre><samp id="output">
      </samp></pre>
    </div>
    <script>
      var map = L.map('map', {
        center: [52.43369, 6.83442],
        zoom: 17,
        minZoom: 6,
        maxZoom: 18
      })

      var baseLayer = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attributions">CARTO</a>'
      }).addTo(map)

      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 geotagPhotoCamera = L.geotagPhoto.camera(points, {
        minAngle: 10
      }).addTo(map)
        .on('change', function (event) {
          updateSidebar()
        })
        .on('input', function (event) {
          updateSidebar()
        })

      var outputElement = document.getElementById('output')
      function updateSidebar() {
        var fieldOfView = geotagPhotoCamera.getFieldOfView()
        outputElement.innerHTML = JSON.stringify(fieldOfView, null, 2)
        hljs.highlightBlock(outputElement)

        var angle = fieldOfView.properties.angle
        slider.value = angle
        angleText.innerHTML = Math.round(angle) + '°'
      }

      var slider = document.getElementById('slider')
      var angleText = document.getElementById('angle')

      function updateAngle() {
        var angle = parseInt(slider.value)
        geotagPhotoCamera.setAngle(angle)
        angleText.innerHTML = angle + '°'
        updateSidebar()
      }

      slider.addEventListener('input', updateAngle)

      // In IE<=11, input event does not work
      slider.addEventListener('change', updateAngle)

      updateSidebar()
      updateAngle()
    </script>
  </body>
</html>