topic Re: geographic to WebMercator projection in ArcGIS JavaScript Maps SDK Questions

RE: geographic to WebMercator projection

GaneshSolai_Sambandam — Tue, 24 Dec 2013 12:59:37 GMT

HI GIS folks

Can anyone tell me why I couldn't able to add point on the map, when i convert from latlong to webmercator.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>   <head>     <title>Create a Map</title>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>     <!-- <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> -->           <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">            <script>var dojoConfig = { parseOnLoad: true };</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>      <script type="text/javascript">       dojo.require("esri.map");      // dojo.require("esri.graphic");      // dojo.require("esri.geometry.Point");      // dojo.require("esri.symbol");       dojo.require("dijit.form.NumberTextBox");       dojo.require("esri.tasks.geometry");               var myMap, myTiledMapServiceLayer, gsvc;              var projX, projY;              function init() {         myMap = new esri.Map("mapDiv");          myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer ("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");         myMap.addLayer(myTiledMapServiceLayer);       }              // geometry Service     gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");        function CreatePoint()       {              var x =dijit.byId('tXCord').value;       var y =dijit.byId('tYCord').value;    //  alert(x);              if((!dijit.byId('tXCord').value || !dijit.byId('tYCord').value))       {                alert("Please enter X and Y co-ordinates");              return false;       }       else       {       myMap.graphics.clear();      // var pt = new esri.geometry.Point(-100, 40, new esri.SpatialReference({'wkid': 4326}));       var pt = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));              var wm = esri.geometry.geographicToWebMercator(pt);                            //var symbol = new esri.symbol.SimpleMarkerSymbol();      // var graphic = new esri.Graphic(esri.geometry.geographicToWebMercator(pt), symbol);                // var projPt = new esri.geometry.Point(projX, projY, new esri.SpatialReference({'wkid':32629}));    // convert client side           var graphic = new esri.Graphic(wm, // geometry     new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,10,      new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]),1),     new dojo.Color([0,255,0,0.25])), // symbol     {'title': 'Test Point Location', 'content':'Your point feature'}, // attributess     new esri.InfoTemplate('${title}', '${content}')          );        myMap.graphics.add(graphic);                var outSR = new esri.SpatialReference({wkid:102113});                         gsvc.project([pt], outSR, function(result) {          dojo.byId('results').innerHTML = "X:" + ' ' + result[0].x.toFixed() + ',' +  "Y:" + ' ' + result[0].y.toFixed();     projX = result[0].x.toFixed();    projY = result[0].y.toFixed();    alert(projX + "," + projY);              });                    myMap.centerAndZoom(pt, 10);                                        }                        }        dojo.addOnLoad(init);     </script>   </head>   <body>     <div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>     <h4>Work flow:</h4>  <ul>  <li>Create a map.</li>  <li>Add an ArcGISTiledMapServiceLayer.</li>  </ul>      <label for="txCord">Enter X Co-ordinate(Longitude):</label>  <input id="tXCord" type="text" data-dojo-type="dijit.form.NumberTextBox"  name="Latitude:" required="true" />    </br>  <label for="tYCord">Enter Y Co-ordinate (Latitude):</label>    <input id="tYCord" type="text" data-dojo-type="dijit.form.NumberTextBox" name="Longitude:" required="true" />    </br>    <input type="button" onclick="CreatePoint();" value="ZoomtoXY"/>  <div id="results"></div>   </body> </html>

Re: geographic to WebMercator projection

ManojrajTeli — Sat, 11 Dec 2021 19:54:40 GMT

Hi Ganesh,

Please check the code below.

/////////////////****************************////////////////////////////////////////
var gp = new esri.Graphic(pt, new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1),
    new dojo.Color([0, 255, 0, 0.25])));
myMap.graphics.add(gp);


/////////////////****************************////////////////////////////////////////

Below is the your full example see if this expected to function.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Create a Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script> -->
    
     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
    
      <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
     // dojo.require("esri.graphic");
     // dojo.require("esri.geometry.Point");
     // dojo.require("esri.symbol");
      dojo.require("dijit.form.NumberTextBox");
      dojo.require("esri.tasks.geometry");
      

      var myMap, myTiledMapServiceLayer, gsvc;
      
      var projX, projY;
      
      function init() {
        myMap = new esri.Map("mapDiv");

        myTiledMapServiceLayer = new
esri.layers.ArcGISTiledMapServiceLayer
("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer");
        myMap.addLayer(myTiledMapServiceLayer);
      }
      
      // geometry Service
    gsvc = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      function CreatePoint()
      {
      
      var x =dijit.byId('tXCord').value;
      var y =dijit.byId('tYCord').value;
   //  alert(x);
      
      if((!dijit.byId('tXCord').value || !dijit.byId('tYCord').value))
      {
      
        alert("Please enter X and Y co-ordinates");
    
        return false;
      }
      else
      {
      myMap.graphics.clear();
     // var pt = new esri.geometry.Point(-100, 40, new esri.SpatialReference({'wkid': 4326}));
      var pt = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));
      
      var wm = esri.geometry.geographicToWebMercator(pt);
      
      
      
      //var symbol = new esri.symbol.SimpleMarkerSymbol();
     // var graphic = new esri.Graphic(esri.geometry.geographicToWebMercator(pt), symbol);
     
     
   // var projPt = new esri.geometry.Point(projX, projY, new esri.SpatialReference({'wkid':32629}));
   // convert client side
  
    
  var graphic = new esri.Graphic(wm, // geometry
    new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,10, 
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]),1),
    new dojo.Color([0,255,0,0.25])), // symbol
    {'title': 'Test Point Location', 'content':'Your point feature'}, // attributess
    new esri.InfoTemplate('${title}', '${content}')
    
    );
       myMap.graphics.add(graphic);
        
      var outSR = new esri.SpatialReference({wkid:102113});
    
       
      
    gsvc.project([pt], outSR, function(result) {
    
    dojo.byId('results').innerHTML = "X:" + ' ' + result[0].x.toFixed() + ',' +  "Y:" + ' ' + result[0].y.toFixed();

   projX = result[0].x.toFixed();
   projY = result[0].y.toFixed();
   alert(projX + "," + projY);
   
    
    });



myMap.centerAndZoom(pt, 10);

/////////////////****************************////////////////////////////////////////
var gp = new esri.Graphic(pt, new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
    new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1),
    new dojo.Color([0, 255, 0, 0.25])));
myMap.graphics.add(gp);


/////////////////****************************////////////////////////////////////////
     
    
   
   
   
    
    }
    
    
      
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body>
    <div id="mapDiv" class="tundra" style="width:900px; height:600px; border:1px solid #000;"></div>
    <h4>Work flow:</h4>
 <ul>
 <li>Create a map.</li>
 <li>Add an ArcGISTiledMapServiceLayer.</li>
 </ul>
 
 
 <label for="txCord">Enter X Co-ordinate(Longitude):</label>
 <input id="tXCord" type="text" data-dojo-type="dijit.form.NumberTextBox"  name="Latitude:" required="true" />
 
 </br>
 <label for="tYCord">Enter Y Co-ordinate (Latitude):</label>
 
 <input id="tYCord" type="text" data-dojo-type="dijit.form.NumberTextBox" name="Longitude:" required="true" />
 
 </br>
 
 <input type="button" onclick="CreatePoint();" value="ZoomtoXY"/>
 <div id="results"></div>
  </body>
</html>

Re: geographic to WebMercator projection

JohnGravois — Thu, 26 Dec 2013 15:28:09 GMT

since you are using a raw WGS84 tiled map service rather than one in the more traditional Web Mercator projection, there is no need to reproject your WGS84 coordinates prior to adding them to the map.

 //create a WGS84 geometry var pt = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326})); //because our tiled map service is 4326, we can add our new point directly to the map var wm = esri.geometry.geographicToWebMercator(pt); var graphic = new esri.Graphic(pt //... ...

Re: geographic to WebMercator projection

GaneshSolai_Sambandam — Sat, 28 Dec 2013 17:00:54 GMT

Hi Manoraj / John
Thank you very much for your explanation and it is clear now and it helped me a lot to understand the problems.

Regards
Ganesh