Sign upLogin

publiclab/leaflet-blurred-location

View on GitHub
Star
examples/index.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Leaflet.BlurredLocation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>


    <script src="../dist/Leaflet.BlurredLocation.js"></script>
    <script src="../node_modules/leaflet/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <link href="../dist/Leaflet.BlurredLocation.css" rel="stylesheet">
    <!-- https://github.com/seiyria/bootstrap-slider -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/bootstrap-slider.js" integrity="sha256-0w/fZPAdu72g2CGIv9Ha8Lp9qXAjls4R2QmMJ5B2Qb4=" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/gh/makinacorpus/Leaflet.Spin/example/spin/dist/spin.min.js"></script>

    <script src="https://cdn.jsdelivr.net/gh/makinacorpus/Leaflet.Spin/leaflet.spin.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.2.0/css/bootstrap-slider.min.css" />
  </head>

  <body>

    <div class="container" >

      <h1>Leaflet BlurredLocation <small>| by <a href="https://publiclab.org">Public Lab</a></small></h1>

      <p>This library is designed to allow locations to be input but with a degree of "blur" -- obscuring exact location in cases where some privacy is needed. Locations are represented as latitude and longitude, but truncated to a precision as indicated by the highlighted region on the map shown. <a href="https://github.com/publiclab/leaflet-blurred-location">Leaflet.BlurredLocation</a> is open source, and was created as part of a <a href="http://summerofcode.withgoogle.com">Google Summer of Code project</a> by <a href="https://github.com/mridulnagpal">Mridul Nagpal</a>.</p>

      <hr />

      <h3>Enter a location</h3>

      <label>
        <input id="obscureLocation" type="checkbox" checked onchange='blurredLocation.setBlurred(document.getElementById("obscureLocation").checked);'>
        Blur my location
      </label>

      <p>
        <label>
          <input id="scaleDisplay" type="checkbox" checked onchange='blurredLocation.toggleScales(blurredLocation.addScaleToListener, "scale", document.getElementById("scaleDisplay").checked);' checked>
          Show scale in km
        </label>

        <label>
          <input id="blurryScale" type="checkbox" checked onchange='blurredLocation.toggleScales(blurredLocation.displayBlurryScale, "blurry_scale", document.getElementById("blurryScale").checked);' checked>
          Show estimated blurry scale
        </label>
      </p>

      <hr />

      <h3>A. By auto-geocoding your location</h3>
      <p>
        <label>
        <button class="btn btn-primary" onclick="blurredLocation.geocodeWithBrowser(true);">
          <div id="ldi-geocode-button">          
            <i class="fa fa-crosshairs"></i> Find me
          </div>
        </button>
      </label>
      </p>

      <h3>B. By searching for a place name</b></h3>
      <p><input id="placenameInput" type="text" class="form-control" /></p>

      <h3>C. By entering co-ordinates <small>- these will also update as you drag/zoom the map</small></h3>

      <p>
        <label>
          Latitude
          <input id="lat" type="text" class="form-control form-control-inline" />
        </label>
        <label>
          Latitude
          <input id="lng" type="text" class="form-control form-control-inline" />
        </label>
      </p>

      <h3>D. By dragging the map</b></h3>

      <p>
        <b>Scale</b> 
        <span id="scale"></span> 
        <span id="scale_blurry"></span>
      </p>

      <div class="slidecontainer" style="border-bottom: 2px solid #ccc;">
        <p style="display: inline">Country</p>
        <p style="display: inline; float: right">Building</p>
        <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="5" data-slider-max="18" data-slider-step="1" data-slider-value="6" style="width: 100%"/>
      </div>

      <div id="map" class="leaflet-map" style="width: 100%; height: 400px;"></div>

      <br />
      <p>
        <label>
          Placename
          <input id="placenameDisplay" type="text" class="form-control" data-preventOverwrite="false" />
        </label>
      </p>

    </div>


    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOLUQngEmJv0_zcG1xkGq-CXIPpLQY8iQ&libraries=places"></script>
    <script>

        var options = {
          InterfaceOptions: {
            latId: 'lat',
            lngId: 'lng',
            placenameDisplayOnError: 'Location error'
          },
          AddScaleDisplay: true ,
          AddBlurryScale: true,
          precisionTable: {'-2': 2, '-1': 3, '0': 6, '1': 10, '2': 13, '3': 16}
        }

        var blurredLocation = new BlurredLocation(options);

        blurredLocation.panMapToGeocodedLocation("placenameInput");

        var changeZoom = function() {
          var zoom = slider.getValue();
          blurredLocation.map.setZoom(zoom);
        }

        var slider = $('#ex1').slider()
          .on('slide', changeZoom)
          .data('slider');

        blurredLocation.map.on('zoomend', function() {
          let zoom = blurredLocation.map.getZoom();
          $('#ex1').slider('setValue', zoom);
        })
        
    </script>
  </body>
</html>