topic Re: Adding points to a map problem in ArcGIS JavaScript Maps SDK Questions

Adding points to a map problem

sailiTang — Thu, 12 Sep 2013 12:57:35 GMT

Hi,

I have a problem on the code for adding points to my dynamic map. The following code will be run when map is loaded. This code is to add some points to the map. Please see the red and bold part of the code. For the testing, I define two points using constant coordinates, it works and I can see the two points on my map. But when I changed geometryService.project(points1, map.spatialReference, function (results) to geometryService.project(multipoint.points, map.spatialReference, function (results), it didnâ??t work and the points werenâ??t shown. strPoints value is from VB.NET code. I changed pointsâ?? coordinates to string in VB.NET, pass to javascript, changed back to pointsâ?? coordinates in js and add these points to multipoint. I believe that passing the values is successful but why I cannot show the points? I doubt that multipoint.points is not the same as points1? Thanks.

Vb.net code:
Dim jvscript As String = Nothing
Dim str As String = Nothing
str = "-66.653,45.967,-66.70,45.9"
jvscript = "DisplayMap('" & str & "');"
Page.ClientScript.RegisterStartupScript(Me.GetType, "TimeOutMessage", jvscript, True)

Javascript code:
function DisplayMap(strPoints) {

var map;
var i;
//var multipoint;

require([
"esri/map", "esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/tasks/GeometryService",
"dojo/_base/array", "dojo/dom-style", "dojo/_base/Color",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/geometry/Multipoint", "esri/SpatialReference", "dojo/domReady!"
], function (Map, Point, SimpleMarkerSymbol, Graphic, GeometryService, arrayUtiles,
domStyle, Color, ArcGISDynamicMapServiceLayer, Multipoint, SpatialReference
) {

var initialExtent = new esri.geometry.Extent({ "xmin": 2306896.79, "ymin": 7278537, "xmax": 2710915.5, "ymax": 7674860.5, "spatialReference": { "wkid": 2953} }); //102100, 2953

map = new Map("NBmap", {
extent: initialExtent
});
var basemaplayer = new ArcGISDynamicMapServiceLayer("http://swv25orat01.gnb.ca:6080/arcgis/rest/services/WFRS/WFRS_FireSummarymxd/MapServer");
map.addLayer(basemaplayer);

map.on("load", mapLoaded);

function mapLoaded() {

var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//console.log(geometryService);

var arrycoord = strPoints.split(",");
var multipoint = new Multipoint(map.spatialReference);
for (i = 0; i < arrycoord.length; i = i + 2) {
var x = arrycoord;
var y = arrycoord[i + 1];
var point = new Point();
point.x = x;
point.y = y;
multipoint.addPoint(point);
};

var points1 = [new Point([-66.653, 45.967]), new Point([-66.70, 45.97])];
// Project the points
geometryService.project(points1, map.spatialReference, function (results) {

var initColor = "#ce641d";
arrayUtiles.forEach(results, function (result) {
// add the projected point to the map
//console.log(result);
var graphic = new Graphic(result, createSymbol(initColor));
map.graphics.add(graphic);
});
});

};

function createSymbol(color) {
var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
markerSymbol.setColor(new Color(color));
markerSymbol.setOutline(null);
return markerSymbol;
};
});
};

Re: Adding points to a map problem

JasonZou — Thu, 12 Sep 2013 13:06:24 GMT

multipoint.points are not the type of Point geometry, but an array of coordinates in number type. Multipoint is a valid geometry type that can be fed into geometryService.project directly.

Try to change:

geometryService.project(multipoint.points, map.spatialReference, function (results)

To:

geometryService.project(multipoint, map.spatialReference, function (results)

Re: Adding points to a map problem

sailiTang — Thu, 12 Sep 2013 14:37:01 GMT

multipoint.points are not the type of Point geometry, but an array of coordinates in number type. Multipoint is a valid geometry type that can be fed into geometryService.project directly.

Try to change:
geometryService.project(multipoint.points, map.spatialReference, function (results)
To:
geometryService.project(multipoint, map.spatialReference, function (results)

Thank you for your answer, Jason. I changed my code according to your suggestion but it still doesn't work. I am just wondering that multipoint is the same as points? I believe my multipoint has been added some points. Please see the attachements. Why it still doesn't work?. Thanks.

Saili

Re: Adding points to a map problem

JasonZou — Fri, 10 Dec 2021 22:55:54 GMT

Make the below change as well. Please make sure that the spatial reference for the (x,y) coordinates fed to multipoint is the same as map.spatialReference.

From:

var multipoint = new Multipoint(map.spatialReference); 
for (i = 0; i < arrycoord.length; i = i + 2) {
var x = arrycoord;
var y = arrycoord[i + 1];
var point = new Point();
point.x = x;
point.y = y;
multipoint.addPoint(point);
};

To:

var x, y, point;
var multipoint = new Multipoint(map.spatialReference); 
for (i = 0; i < arrycoord.length; i = i + 2) {
    x = arrycoord;
    y = arrycoord[i + 1];
    point = new Point(x,y);
    multipoint.addPoint(point);
};

One more question: is there any specific reason to use multipoint type instead of point directly?

Re: Adding points to a map problem

sailiTang — Thu, 12 Sep 2013 16:31:27 GMT

Sorry, Jason. It still doesn't work. I am using multipoint because I may have a lot of points. I would like put them together and then put them to my map. If point can do the same thing, I can use point, too.

Saili

Re: Adding points to a map problem

sailiTang — Thu, 12 Sep 2013 16:37:11 GMT

I even changed to this: but it still doesn't work.

                               var x, y, point;
                                var mp = new Multipoint(map.spatialReference); //map.spatialReference);
                                for (i = 0; i < arrycoord.length; i = i + 2) {
                                    x = arrycoord;
                                    y = arrycoord[i + 1];
                                    point = new Point(x, y, map.spatialReference);
                                    //point.x = x;
                                    //point.y = y;
                                    mp.addPoint(point);
                                    geometryService.project(point, map.spatialReference, function (point) {

                                    var initColor = "#ce641d";

                                        var graphic = new Graphic(point, createSymbol(initColor));
                                        map.graphics.add(graphic);

                                });
                                };

Re: Adding points to a map problem

JasonZou — Fri, 10 Dec 2021 22:55:57 GMT

In your case, no need to use multipoint. You only need to use multipoint if you like to group points together into one feature that share all the attributes.

Ok. I found one issue. initialExtent uses 2953 as the spatial reference. But the coordinates of the points are in lat/lon, right? If so, here is the code sample.

var x, y, point;
var initColor = "#ce641d";
for (i = 0; i < arrycoord.length; i = i + 2) {
    x = arrycoord;
    y = arrycoord[i + 1];
    point = new Point(x, y, new SpatialReference({ wkid: 4326 }));

    // it should work without reprojecting the point. If not working, then reproject it.
    map.graphics.add(graphic);  // comment this line out if using the reproject approach
    
    //geometryService.project(point, map.spatialReference, function (newPoint) {
    //    var graphic = new Graphic(newPoint, createSymbol(initColor));
    //    map.graphics.add(graphic);
    //});
};

Re: Adding points to a map problem

sailiTang — Thu, 12 Sep 2013 17:06:48 GMT

Hi Jason,

Thank you so much for your quick answer. I changed my code according to your suggestion. But it still doesn't work. At the first, I didn't add the reproject code and map can be shown but points are not shown. So I added reproject code:

geometryService.project(point, map.spatialReference, function (point) , but both map and points are not shown.

Saili

Re: Adding points to a map problem

JasonZou — Fri, 10 Dec 2021 22:55:59 GMT

I forgot to create the graphic before adding to the map. Ok, try one of these two again.

var x, y, point, graphic;
var symbol = createSymbol("#ce641d");
var srLatLon = new SpatialReference({ wkid: 4326 });

for (i = 0; i < arrycoord.length; i = i + 2) {
    x = arrycoord;
    y = arrycoord[i + 1];
    point = new Point(x, y, srLatLon);

    graphic = new Graphic(point, symbol);
    map.graphics.add(graphic);
};

Or,

var x, y, point, graphic;
var symbol = createSymbol("#ce641d");
var srLatLon = new SpatialReference({ wkid: 4326 });

for (i = 0; i < arrycoord.length; i = i + 2) {
    x = arrycoord;
    y = arrycoord[i + 1];
    point = new Point(x, y, srLatLon);

    geometryService.project(point, map.spatialReference, function (newPoint) {
        var graphic = new Graphic(newPoint, symbol);
        map.graphics.add(graphic);
    });
};

Also change createSymbol function as:

function createSymbol(color) {
    return new esri.symbol.SimpleMarkerSymbol(
 esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,    // change to the style you like
 16,    // change to the size you like
        null,
 new dojo.Color(color)
    );
};

Re: Adding points to a map problem

sailiTang — Thu, 12 Sep 2013 17:46:16 GMT

Sorry, the result is the same as the above. Thanks.

Re: Adding points to a map problem

JasonZou — Thu, 12 Sep 2013 17:48:54 GMT

Can you post your updated app and the data in strPoints? Must be some simple thing we missed.

Re: Adding points to a map problem

sailiTang — Thu, 12 Sep 2013 18:01:20 GMT

Thank you so much, Jason. for strPoints, there is no change. To test, I give it a constant string in VB.NET code.

VB.NET CODE:
Dim jvscript As String = Nothing
Dim str As String = Nothing
str = "-66.653,45.967,-66.70,45.9"
jvscript = "DisplayMap('" & str & "');" '(" & "pointsArray" & ");" '(" & "[10, 20], [10, 30]" & ");"
Page.ClientScript.RegisterStartupScript(Me.GetType, "TimeOutMessage", jvscript, True)

JAVASCRIPT CODE (UPDATED):

function DisplayMap(strPoints) {

var map;
var i;
//var multipoint;

require([
"esri/map", "esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/tasks/GeometryService",
"dojo/_base/array", "dojo/dom-style", "dojo/_base/Color",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/geometry/Multipoint", "esri/SpatialReference", "dojo/domReady!"
], function (Map, Point, SimpleMarkerSymbol, Graphic, GeometryService, arrayUtiles,
domStyle, Color, ArcGISDynamicMapServiceLayer, Multipoint, SpatialReference
) {

var initialExtent = new esri.geometry.Extent({ "xmin": 2306896.79, "ymin": 7278537, "xmax": 2710915.5, "ymax": 7674860.5, "spatialReference": { "wkid": 2953} }); //102100, 2953

map = new Map("NBmap", {
extent: initialExtent
});
var basemaplayer = new ArcGISDynamicMapServiceLayer("http://swv25orat01.gnb.ca:6080/arcgis/rest/services/WFRS/WFRS_FireSummarymxd/MapServer");
map.addLayer(basemaplayer);

//for (var j = 0; j < map.layerIds.length; j++) {
//var layer = map.getLayer(map.layerIds);
//alert(layer.id + ' ' + layer.opacity + ' ' + layer.visible);
//}

map.on("load", mapLoaded);

function mapLoaded() {

map.disablePan();
map.disableScrollWheelZoom();
map.hideZoomSlider();

var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//console.log(geometryService);
// var points1 = [new Point([-66.653, 45.967]), new Point([-66.70,45.97])];

var arrycoord = strPoints.split(",");
var x, y, point, graphic;
var symbol = createSymbol("#ce641d");
var srLatLon = new SpatialReference({ wkid: 4326 });
//var mp = new Multipoint(map.spatialReference); //map.spatialReference);
for (i = 0; i < arrycoord.length; i = i + 2) {
x = arrycoord;
y = arrycoord[i + 1];
point = new Point(x, y, srLatLon);

geometryService.project(point, map.spatialReference, function (newpoint) {

// var initColor = "#ce641d";

var graphic = new Graphic(newpoint, symbol);
map.graphics.add(graphic);

});
};

};

function createSymbol(color) {
// var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
// markerSymbol.setColor(new Color(color));
// markerSymbol.setOutline(null);
// return markerSymbol;
return new esri.symbol.SimpleMarkerSymbol(
esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,
16,
null,
new dojo.Color(color)
);
};
});

};

Re: Adding points to a map problem

JasonZou — Fri, 10 Dec 2021 22:56:02 GMT

ok...one last try. Replace all your JS code with the below one with two assumptions:

The basemaplayer spatial reference is the same as the map, 2953.

The point coordinates in strPoints are lat/lon.

var strPoints;
// add code to populate strPoints here.

require([
 "esri/map", 
 "esri/geometry/Extent",
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol", 
    "esri/graphic", 
    "esri/tasks/GeometryService",
    "dojo/_base/array",
    "dojo/_base/lang",
    "dojo/_base/Color",
    "esri/layers/ArcGISDynamicMapServiceLayer", 
    "dojo/domReady!"
], function (Map, Extent, Point, SimpleMarkerSymbol, Graphic, GeometryService, arrayUtiles, lang,
        Color, ArcGISDynamicMapServiceLayer) {
 
 var initialExtent = new Extent({
  "xmin": 2306896.79,
     "ymin": 7278537,
     "xmax": 2710915.5,
     "ymax": 7674860.5,
     "spatialReference": {
      "wkid": 2953
  }
 }); //102100, 2953
 
 var map = new Map("NBmap", {
  extent: initialExtent
 });
 
 var basemaplayer = new ArcGISDynamicMapServiceLayer("http://swv25orat01.gnb.ca:6080/arcgis/rest/services/WFRS/WFRS_FireSummarymxd/MapServer");
 map.addLayer(basemaplayer);
 
 map.on("load", function() {
  map.disablePan();
  map.disableScrollWheelZoom();
  map.hideZoomSlider();

  var geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

  var arrycoord = strPoints.split(",");
  var x, y, point;
  var symbol = new SimpleMarkerSymbol(
    SimpleMarkerSymbol.STYLE_CIRCLE,
                16,
                null,
                new Color("#ce641d")
  );

  for (i = 0; i < arrycoord.length; i = i + 2) {
   x = arrycoord;
      y = arrycoord[i + 1];
      point = new Point(x, y);

      geometryService.project(point, map.spatialReference, function (newpoint) {
       var graphic = new Graphic(newpoint, symbol);
          map.graphics.add(graphic);
      });
  };
 });
});

Re: Adding points to a map problem

sailiTang — Fri, 13 Sep 2013 17:57:43 GMT

Hi Jason,

Unfortunately, the code still doesn't work. Thanks for your help.

Saili

Re: Adding points to a map problem

sailiTang — Mon, 16 Sep 2013 12:09:40 GMT

The problem has been solved. I just changed geometryService.project(multipoint, map.spatialReference, function (results) { to
geometryService.project([multipoint], map.spatialReference, function (results) {. And also both multipoint's and point's spatial reference is 4326.