2

I want to buffer the location of a person's position when they click the Locate Button Widget.

I modified the Locate Widget in the JavaScript API 4.0 a little bit. I am trying to get the coordinates of the position when you click the button, so that I can create a point geometry to use in a buffer. I have looked around and can't find a firm answer. I saw that you need to use the getCurrentPosition function, but some reason I can't properly implement it in my code. This is what I have so far:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Final Project</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
  <script src="https://js.arcgis.com/4.1/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #legendDiv {
      max-width: 300px;
      background-color: black;
      padding: 8px;
      color: white;
      opacity: 0.85;
    }

    p {
      max-width: 400px;
      background-color: black;
      padding: 15px;
      border: 1px solid white;
      color: white;
      opacity: 0.95;
    }

    #toggle {
      bottom: 20px;
      left: 20px;
      position: absolute;
      z-index: 99;
      max-width: 105px;
      background-color: black;
      border-radius: 8px;
      padding: 10px;
      color: white;
      opacity: 0.85;
    }

    .esri-locate {
      font-size: 18px;
      background-color: white; 
      color: red;
      width: 120px;
      height: 40px;
      padding: 0;
      margin: 0;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
}
    .esri-locate span {
      display: none;
    }

    .esri-locate:after {
      content: 'GeoProcess';
    }


  </style>



  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/widgets/Legend",
      "esri/config",
      "esri/core/urlUtils",
      "esri/widgets/Locate",
      "esri/layers/GraphicsLayer",
      "esri/Graphic",
      "esri/symbols/SimpleFillSymbol",
      "esri/geometry/geometryEngine",
      "dojo/dom-construct",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(
      Map,
      FeatureLayer,
      MapView,
      Legend,
      esriConfig,
      urlUtils,
      Locate,
      GraphicsLayer,
      Graphic,
      SimpleFillSymbol,
      geometryEngine,
      domConstruct,
      dom,
      on) {

      var floodLayer = new FeatureLayer({
        url: "https://igems.doi.gov/arcgis/rest/services/igems_haz/MapServer/0",
        visible: true
      });       

      var volcanoeLayer = new FeatureLayer({
          url: "https://igems.doi.gov/arcgis/rest/services/igems_haz/MapServer/1",
          visible: true
        });    

      var earthquakeLayer = new FeatureLayer({
          url: "https://igems.doi.gov/arcgis/rest/services/igems_haz/MapServer/3",
          visible: true
        });    

      var hurricaneLayer = new FeatureLayer({
          url: "https://igems.doi.gov/arcgis/rest/services/igems_haz/MapServer/5",
          visible: true
        });   

      var wildfireLayer = new FeatureLayer({
          url: "https://igems.doi.gov/arcgis/rest/services/igems_haz/MapServer/10",
          visible: true
        }); 

      var shelterLayer = new FeatureLayer({
          url: "http://gis.fema.gov/REST/services/NSS/FEMA_NSS/MapServer/5",
          visible: false
        }); 

      var gLayer = new GraphicsLayer({});

      var map = new Map({
        basemap: "dark-gray",
        layers: [gLayer, shelterLayer, floodLayer, volcanoeLayer, earthquakeLayer, hurricaneLayer, wildfireLayer]
      });

      var view = new MapView({
        container: "viewDiv",
        center: [-96.050173, 39.216911],
        zoom: 5,
        map: map
      });

      var legend = new Legend({
          view: view,
          layerInfos: [{
              layer: floodLayer,
              title: "Floods"
            },
            {
                 layer: volcanoeLayer,
                 title: "Volcanoes"
            },
            {
                 layer: earthquakeLayer,
                 title: "Earthquakes"
            },
            {
                 layer: hurricaneLayer,
                 title: "Hurricanes"
            },
            {
                 layer: wildfireLayer,
                 title: "Wildfires"
            }]
        }, "legendDiv");

      view.ui.add(legend, "bottom-right");

      var info = domConstruct.create("infoDiv", {
        innerHTML: "<p>This map presents the geospatial locations for current natural hazards events (such as earthquakes, hurricanes, floods, and wildfires) as well as the locations of FEMA shelters. <br> <br> By clicking the button, this application will geocode your location, create a 5-10 mile buffer around that location, and provide directions to the closest shelter.</p>",
      });

      view.ui.add(info, "top-right");

      var shelterTog = dom.byId("shelterToggle");
      var wildfireTog = dom.byId("wildfireToggle");
      var hurricaneTog = dom.byId("hurricaneToggle");
      var earthquakeTog = dom.byId("earthquakeToggle");
      var volcanoeTog = dom.byId("volcanoeToggle");
      var floodTog = dom.byId("floodToggle");

      on(shelterTog, "change", function(){
           shelterLayer.visible = shelterTog.checked;
      });

      on(wildfireTog, "change", function(){
              wildfireLayer.visible = wildfireTog.checked;
      });

      on(hurricaneTog, "change", function(){
              hurricaneLayer.visible = hurricaneTog.checked;
      });

      on(earthquakeTog, "change", function(){
              earthquakeLayer.visible = earthquakeTog.checked;
      });

      on(volcanoeTog, "change", function(){
              volcanoeLayer.visible = volcanoeTog.checked;
      });

      on(floodTog, "change", function(){
              floodLayer.visible = floodTog.checked;
      });

      //Locate Position
      var locateBtn = new Locate({
           view: view,
      });
      locateBtn.startup();

      view.ui.add(locateBtn, {
           position: "top-left",
           index: 0
      });

      //Creat a symbol for buffer
      var fillSymbol = new SimpleFillSymbol({
        color: [227, 139, 79, 0.8],
        outline: {color: [255, 255, 255],
          width: 1
        }
      });

      //Begin geoprocessing
      locateBtn.on("locate", function(geoProcess){
          view.zoom = 15;

          navigator.geolocation.getCurrentPosition(function(position) {
              var pt = new Point ({
                   longitude: position.coords.longitude,
                   latitude: position.coords.latitude
              });

              var buffer = geometryEngine.buffer(pt, 100, "miles");

              var bufferGraphic = new Graphic({
                geometry: buffer,
                symbol: fillSymbol
              });

              gLayer.add(bufferGraphic);

            });
      });
    }); 
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="legendDiv"></div>
  <span id="toggle">
       <input type="checkbox" id="shelterToggle"> Shelters<br>
       <input type="checkbox" id="wildfireToggle" checked> Wildfires<br>
       <input type="checkbox" id="hurricaneToggle" checked> Hurricanes<br>
       <input type="checkbox" id="earthquakeToggle" checked> Earthquakes<br>
       <input type="checkbox" id="volcanoeToggle" checked> Volcanoes<br>
       <input type="checkbox" id="floodToggle" checked> Floods
  </span>
</body>

</html>
1

Your app requires "esri/geometry/Point" so you can instantiate a new Point(). And, according to the documentation, use the method geodesicBuffer() instead of buffer() because of the spatiale reference used on the gps coordinates from the browser (either wgs84 or web mercator)

var buffer = geometryEngine.geodesicBuffer(pt, 100, "miles");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.