examples/index.html

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Leaflet.BlurredLocation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=AIzaSyDWgc7p4WWFsO3y0MTe50vF4l4NUPcPuwE"></script>
    <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="http://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>
        <p><button class="btn btn-primary" onclick="blurredLocation.geocodeWithBrowser(true);">
          <div id="ldi-geocode-button">          
            Get my location
          </div>

        </button></p>
      </label>
      <br/>

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

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

      <hr />

      <p> 
        <button class="btn btn-primary" onclick="blurredLocation.displayLocation();">Show Location</button>
      </p>
      <hr />

      <p id="scale">
      </p>

      <p id="scale_blurry">
      </p>

      <h4><b>By place name</b></h4>
      <p><input id="placenameInput" type="text" class="form-control" /></p>

      <p>
        <h4><b>By entering co-ordinates</b></h4>
        <div class="row">
          <div class="col-md-6">
            <p><input id="lat" type="text" class="form-control" placeholder="Latitude"></p>
          </div>
          <div class="col-md-6">
            <p><input id="lng" type="text" class="form-control" placeholder="Longitude"></p>
          </div>
        </div>
      </p>

      <h4><b>By dragging the map</b></h4>

      <h4><b>Scale</h4></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 />
      <input editable="false" id="placenameDisplay" type="text" class="form-control" />

    </div>

    <script>

      var options = {
        InterfaceOptions: {
          latId: 'lat',
          lngId: 'lng'
        },
        AddScaleDisplay: true ,
        AddBlurryScale: true
      }

      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');

    </script>
  </body>
</html>