No Coordinates

AhmadLibda · ‎07-14-2017

I learned that The spatial reference for a map is defined either by the extent passed to the map constructor or by the first layer added to the map.

coordinate system - Set custom spatial reference to base map in arcgis javascript api - Geographic I...

I am new to GIS. So this is my code:

   var govs= new TileLayer({
        url: "http://localhost:6080/arcgis/rest/services/services/MapServer",
        visible: false
    });
    var map = new Map({ });
var view = new MapView({
        container: "viewDiv", // Reference to the scene div created in step 5
        map: map, // Reference to the map object created before the scene
        zoom: 1, // Sets zoom level based on level of detail (LOD)
        center: [86999,99999] // Sets center point of view using longitude,latitude
    });
    map.layers.add(govs);

I get a "Null" for both mapPoint.latitude and longitude when i print them in a popup using the code:

view.on("click", function (event) {
        event.stopPropagation(); // overwrite default click-for-popup behavior
        // Get the coordinates of the click on the view
        var lat = Math.round(event.mapPoint.latitude *1000 )/1000 ;
        var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
        view.popup.open({
            // Set the popup's title to the coordinates of the location
            title: "Reverse geocode: [" + lon + ", " + lat + "]",
            location: event.mapPoint // Set the location of the popup to the clicked location
        });
        view.popup.content = "Hello,, ";
    });

Also, altering "center" in view constructor doesn't seem to affect the starting center point of the map. However, "zoom" works.

I also tried to define "spatial reference" within the view (but no use):

var view = new MapView({
        container: "viewDiv", // Reference to the scene div created in step 5
        map: map, // Reference to the map object created before the scene
        zoom: 1, // Sets zoom level based on level of detail (LOD)
        center: [86999,99999] , // Sets center point of view using longitude,latitude
extent: { // autocasts as new Extent()
            xmin: 75639.85130000021,
            ymin: 70262.05010000058,
            xmax: 108900.84379999992,
            ymax: 111618.54690000042,
            spatialReference: 28191
        }
   });

RobertScheitlin__GISP · ‎07-14-2017

Ahmad,

This works fine for me:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.4</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/TileLayer",
      "esri/geometry/Point",
      "dojo/domReady!"
    ], function(Map, MapView, TileLayer, Point) {

      var layer = new TileLayer({
        url: "http://localhost:6080/arcgis/rest/services/services/MapServer"
      });

      var map = new Map({});

      var pt = new Point({
        x: 86999,
        y: 99999,
        spatialReference: 28191
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 1,
        center: pt
      });
      map.layers.add(layer);

      view.on("click", function (event) {
        event.stopPropagation(); // overwrite default click-for-popup behavior
        // Get the coordinates of the click on the view
        var lat = Math.round(event.mapPoint.y *1000 )/1000 ;
        var lon = Math.round(event.mapPoint.x * 1000) / 1000;
        view.popup.open({
            // Set the popup's title to the coordinates of the location
            title: "Reverse geocode: [" + lon + ", " + lat + "]",
            location: event.mapPoint // Set the location of the popup to the clicked location
        });
        view.popup.content = view.spatialReference.wkid.toString();
    });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎07-14-2017

Ahmad,

Also, altering "center" in view constructor doesn't seem to affect the starting center point of the map

Center: If set in the constructor, this property will be ignored if the viewpoint or extent properties are also set in the constructor.

Because you are setting the extent the center is ignored.

The mapPoint latitude and longitude will be null for a local coordinate system like you are using if you want the mapPoint coordinates you need to use x and y.

AhmadLibda · ‎07-14-2017

I omitted the extent part, still changing the center is not doing anything

RobertScheitlin__GISP · ‎07-14-2017

Have you tried using an actual lat lon cordinates and not your local XY value?

AhmadLibda · ‎07-14-2017

I do not know what you mean by "actual lat lon coordinates" but I tried a wide range of values, and I am always at the same starting point which is the center of my layers.

RobertScheitlin__GISP · ‎07-14-2017

I mean

center: [34.336, 31.49]

These are the WGS 84 lat lon values for

center: [86999,99999]

AhmadLibda · ‎07-14-2017

no use

RobertScheitlin__GISP · ‎07-14-2017

Ahmad,

This works fine for me:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Get started with MapView - Create a 2D map - 4.4</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/TileLayer",
      "esri/geometry/Point",
      "dojo/domReady!"
    ], function(Map, MapView, TileLayer, Point) {

      var layer = new TileLayer({
        url: "http://localhost:6080/arcgis/rest/services/services/MapServer"
      });

      var map = new Map({});

      var pt = new Point({
        x: 86999,
        y: 99999,
        spatialReference: 28191
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 1,
        center: pt
      });
      map.layers.add(layer);

      view.on("click", function (event) {
        event.stopPropagation(); // overwrite default click-for-popup behavior
        // Get the coordinates of the click on the view
        var lat = Math.round(event.mapPoint.y *1000 )/1000 ;
        var lon = Math.round(event.mapPoint.x * 1000) / 1000;
        view.popup.open({
            // Set the popup's title to the coordinates of the location
            title: "Reverse geocode: [" + lon + ", " + lat + "]",
            location: event.mapPoint // Set the location of the popup to the clicked location
        });
        view.popup.content = view.spatialReference.wkid.toString();
    });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AhmadLibda · ‎07-14-2017

Robert,

This works fine for me too

Thanks alot.

RobertScheitlin__GISP · ‎07-15-2017

Ahmad, great don't forget to mark this question as answered then.