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]

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

[sailiTang]

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

};

[JasonZou]

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

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


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

[sailiTang]

Hi Jason,

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

Saili

[sailiTang · Accepted solution]

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.