LatLong Conversion and a Search Widget

409
2
Jump to solution
06-08-2020 02:38 PM
MatildaOtiede
New Contributor II

Hi All,

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

ArcGIS API for JavaScript Sandbox 

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>

<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,search, gsvc, pt;

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

0 Kudos
1 Solution

Accepted Solutions
ChristianBischof
Esri Contributor

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

0 Kudos
2 Replies
ChristianBischof
Esri Contributor

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

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