Adding points to a map problem

[sailiTang]

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;
};
});
};

[JasonZou]

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)

[sailiTang]

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

[JasonZou]

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?

[sailiTang]

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

[sailiTang]

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);
                                  
                                });
                                };

[JasonZou]

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);
    //});
};

[sailiTang]

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

[JasonZou]

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)
    );
};

[sailiTang]

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