Community

RE: geographic to WebMercator projection

2381
3
Jump to solution
12-24-2013 04:59 AM
GaneshSolai_Sambandam
by
New Contributor III
‎12-24-2013 04:59 AM
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>
0 Kudos
1 Solution

Accepted Solutions
JohnGravois
by
Frequent Contributor
‎12-26-2013 07:28 AM
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 //... ...

View solution in original post

0 Kudos
3 Replies
ManojrajTeli
by
Occasional Contributor II
‎12-25-2013 09:46 PM
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>
0 Kudos
JohnGravois
by
Frequent Contributor
‎12-26-2013 07:28 AM
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 //... ...
0 Kudos
GaneshSolai_Sambandam
by
New Contributor III
‎12-28-2013 09:00 AM
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
0 Kudos