LatLong Conversion and a Search Widget

MatildaOtiede · ‎06-08-2020

Hi All,

The code below without the search widget works and its the sample from the link below

Want to be able to add a searchwidget to the code as shown below. But not quite sure why, i' m unable to see the mapview after adding the search widget.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Project a point</title>

require([
"esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
"esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
"esri/SpatialReference", "esri/widgets/Search", "esri/InfoTemplate", "dojo/dom", "dojo/on",
"dojo/domReady!"
], function(
Map, Search, Graphic, SimpleMarkerSymbol,
GeometryService, ProjectParameters,
SpatialReference, InfoTemplate, dom, on
) {
map = new Map("map", {
basemap: "streets",
center: [-0.14718, 51.51161],
zoom: 17
});

// Search

var search = new Search({
view: view
});
search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
view.ui.add(search, "top-right"); // Add to the map

gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map.on("click", projectToWebMercator);

function projectToWebMercator(evt) {
map.graphics.clear();

var point = evt.mapPoint;
var symbol = new SimpleMarkerSymbol().setStyle("diamond");
var graphic = new Graphic(point, symbol);
var outSR = new SpatialReference(27700);

map.graphics.add(graphic);

gsvc.project([ point ], outSR, function(projectedPoints) {
pt = projectedPoints[0];
graphic.setInfoTemplate(new InfoTemplate("Coordinates",
"<span>X:</span>" + pt.x.toFixed() + "<br>" +
"<span>Y:</span>" + pt.y.toFixed() + "<br>" +
"<input type='button' value='Convert back to LatLong' id='convert'>" +
"<div id='latlong'></div>"));
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
on.once(dom.byId("convert"), "click", projectToLatLong);
});
}

function projectToLatLong() {
var outSR = new SpatialReference(4326);
var params = new ProjectParameters();
params.geometries = [pt.normalize()];
params.outSR = outSR;

gsvc.project(params, function(projectedPoints) {
pt = projectedPoints[0];
dom.byId("latlong").innerHTML = "<span>Latitude: </span> " +
pt.y.toFixed(5) + "<br><span>Longitude:</span>" + pt.x.toFixed(5);
});
}
});
</script>

</head>
<body class="claro">
<b>Click a location on the map to Project from LatLng -> Web Mercator:</b>
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>

Thanks in advance

ChristianBischof · ‎06-09-2020

So basically I guess you're looking for this. But you have to check the Search widget in API 3.32 on you own because I have as well never worked with it. Here is the link to the 3.32 Search Class:

Search | API Reference | ArcGIS API for JavaScript 3.32

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>Project a point</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/3.32/dijit/themes/claro/claro.css"
    />
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/3.32/esri/css/esri.css"
    />
    <style>
      .esriPopup .contentPane span {
        display: inline-block;
        padding: 0 0 0.2em 0;
        width: 6em;
      }
    </style>

    <script src="https://js.arcgis.com/3.32/"></script>
    <script>
      var map, gsvc, pt;

      require([
        "esri/map",
        "esri/dijit/Search",
        "esri/graphic",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService",
        "esri/tasks/ProjectParameters",
        "esri/SpatialReference",
        "esri/InfoTemplate",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!",
      ], function (
        Map,
        Search,
        Graphic,
        SimpleMarkerSymbol,
        GeometryService,
        ProjectParameters,
        SpatialReference,
        InfoTemplate,
        dom,
        on
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-98.445, 46.147],
          zoom: 3,
        });

        var search = new Search({
          map: map,
        }, "search");
        // this is API 4.* code search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
        // this is API 4.* code view.ui.add(search, "top-right"); // Add to the map

        gsvc = new GeometryService(
          "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
        );
        map.on("click", projectToWebMercator);

        function projectToWebMercator(evt) {
          map.graphics.clear();

          var point = evt.mapPoint;
          var symbol = new SimpleMarkerSymbol().setStyle("diamond");
          var graphic = new Graphic(point, symbol);
          var outSR = new SpatialReference(102100);

          map.graphics.add(graphic);

          gsvc.project([point], outSR, function (projectedPoints) {
            pt = projectedPoints[0];
            graphic.setInfoTemplate(
              new InfoTemplate(
                "Coordinates",
                "<span>X:</span>" +
                  pt.x.toFixed() +
                  "<br>" +
                  "<span>Y:</span>" +
                  pt.y.toFixed() +
                  "<br>" +
                  "<input type='button' value='Convert back to LatLong' id='convert'>" +
                  "<div id='latlong'></div>"
              )
            );
            map.infoWindow.setTitle(graphic.getTitle());
            map.infoWindow.setContent(graphic.getContent());
            map.infoWindow.show(
              evt.screenPoint,
              map.getInfoWindowAnchor(evt.screenPoint)
            );
            on.once(dom.byId("convert"), "click", projectToLatLong);
          });
        }

        function projectToLatLong() {
          var outSR = new SpatialReference(4326);
          var params = new ProjectParameters();
          params.geometries = [pt.normalize()];
          params.outSR = outSR;

          gsvc.project(params, function (projectedPoints) {
            pt = projectedPoints[0];
            dom.byId("latlong").innerHTML =
              "<span>Latitude: </span> " +
              pt.y.toFixed(3) +
              "<br><span>Longitude:</span>" +
              pt.x.toFixed(3);
          });
        }
      });
    </script>
  </head>
  <body class="claro">
    <b>Click a location on the map to Project from LatLng -> Web Mercator:</b>
    <div id="map" style="width: 600px; height: 400px; border: 1px solid #000;">
      <div class="" id="search"></div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

ChristianBischof · ‎06-09-2020

In your code you are using ArcGIS API 3.32 and you can't require modules from the API 4.* like "esri/widgets/Search". Furthermore the order in the require statement and the function following have to match.

require([
        "esri/map",
        "esri/dijit/Search",
        "esri/graphic",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService",
        "esri/tasks/ProjectParameters",
        "esri/SpatialReference",
        "esri/InfoTemplate",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!",
      ], function (
        Map,
        Search,
        Graphic,
        SimpleMarkerSymbol,
        GeometryService,
        ProjectParameters,
        SpatialReference,
        InfoTemplate,
        dom,
        on
      ) {
//api code
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ChristianBischof · ‎06-09-2020

So basically I guess you're looking for this. But you have to check the Search widget in API 3.32 on you own because I have as well never worked with it. Here is the link to the 3.32 Search Class:

Search | API Reference | ArcGIS API for JavaScript 3.32

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>Project a point</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/3.32/dijit/themes/claro/claro.css"
    />
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/3.32/esri/css/esri.css"
    />
    <style>
      .esriPopup .contentPane span {
        display: inline-block;
        padding: 0 0 0.2em 0;
        width: 6em;
      }
    </style>

    <script src="https://js.arcgis.com/3.32/"></script>
    <script>
      var map, gsvc, pt;

      require([
        "esri/map",
        "esri/dijit/Search",
        "esri/graphic",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService",
        "esri/tasks/ProjectParameters",
        "esri/SpatialReference",
        "esri/InfoTemplate",
        "dojo/dom",
        "dojo/on",
        "dojo/domReady!",
      ], function (
        Map,
        Search,
        Graphic,
        SimpleMarkerSymbol,
        GeometryService,
        ProjectParameters,
        SpatialReference,
        InfoTemplate,
        dom,
        on
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-98.445, 46.147],
          zoom: 3,
        });

        var search = new Search({
          map: map,
        }, "search");
        // this is API 4.* code search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
        // this is API 4.* code view.ui.add(search, "top-right"); // Add to the map

        gsvc = new GeometryService(
          "https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"
        );
        map.on("click", projectToWebMercator);

        function projectToWebMercator(evt) {
          map.graphics.clear();

          var point = evt.mapPoint;
          var symbol = new SimpleMarkerSymbol().setStyle("diamond");
          var graphic = new Graphic(point, symbol);
          var outSR = new SpatialReference(102100);

          map.graphics.add(graphic);

          gsvc.project([point], outSR, function (projectedPoints) {
            pt = projectedPoints[0];
            graphic.setInfoTemplate(
              new InfoTemplate(
                "Coordinates",
                "<span>X:</span>" +
                  pt.x.toFixed() +
                  "<br>" +
                  "<span>Y:</span>" +
                  pt.y.toFixed() +
                  "<br>" +
                  "<input type='button' value='Convert back to LatLong' id='convert'>" +
                  "<div id='latlong'></div>"
              )
            );
            map.infoWindow.setTitle(graphic.getTitle());
            map.infoWindow.setContent(graphic.getContent());
            map.infoWindow.show(
              evt.screenPoint,
              map.getInfoWindowAnchor(evt.screenPoint)
            );
            on.once(dom.byId("convert"), "click", projectToLatLong);
          });
        }

        function projectToLatLong() {
          var outSR = new SpatialReference(4326);
          var params = new ProjectParameters();
          params.geometries = [pt.normalize()];
          params.outSR = outSR;

          gsvc.project(params, function (projectedPoints) {
            pt = projectedPoints[0];
            dom.byId("latlong").innerHTML =
              "<span>Latitude: </span> " +
              pt.y.toFixed(3) +
              "<br><span>Longitude:</span>" +
              pt.x.toFixed(3);
          });
        }
      });
    </script>
  </head>
  <body class="claro">
    <b>Click a location on the map to Project from LatLng -> Web Mercator:</b>
    <div id="map" style="width: 600px; height: 400px; border: 1px solid #000;">
      <div class="" id="search"></div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍