topic Re: Cannot get point graphic to draw in ArcGIS JavaScript Maps SDK Questions

Cannot get point graphic to draw

CindyMeeker — Thu, 11 Oct 2012 16:12:44 GMT

I am revamping an old example and need help. The example would allow the user to input a lat lon and would draw a graphic at that point and zoom to it.

I am trying to re-write it to take a lat lon passed in via the URL and draw a graphic and zoom to it.

**Yes, I know that you can do this on ArcGIS On-Line but I need it to open without the sidebar as this will be used within another application to track locations from a transaction table.** So I just need a simple map, no frills, that shows our property over imagery and adds a point and zooms to it.

The problem I am having is that my point is not drawing. I am pretty sure that the lat lon is getting passed in correctly as the map is zooming to the right location.

This gets my lat lon from the URL:
                                var url = window.location;    var find = getLatLongFromURL(document.location.href);
    if (!!find)
    {
     var param = find.split(" ");
     var lon = parseFloat(param[0]);
     var lat = parseFloat(param[1]);
     //alert("lat = "+ lat +", lon = " + lon);
    }
     addPointToMap(lon,lat);

and the 2 pertinent functions are:

   function getLatLongFromURL(url)
   {
    var urlObject = esri.urlToObject(url);
    if (urlObject.query && urlObject.query.find)
    {
     return urlObject.query.find;
    }
   } //end getLatLongFromURL

   function addPointToMap(lon,lat)
   {
    var point = new esri.geometry.Point(lon, lat, pfcMap.spatialReference);
    var symbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 255, 0]));
    symbol.setSize(8);
    var graphic = new esri.Graphic(point, symbol);

    xMin = lon - 0.015;
    yMin = lat - 0.015;
    xMax = lon + 0.015;
    yMax = lat + 0.015;

      var newExtent = new esri.geometry.Extent();
      newExtent.xmin = xMin;
      newExtent.ymin = yMin;
      newExtent.xmax = xMax;
      newExtent.ymax = yMax;
      newExtent.spatialReference = new esri.SpatialReference({ wkid: 102100});

      pfcMap.setExtent(newExtent);
      pfcMap.graphics.add(graphic);

     } //end addPointToMap

Any help here would be greatly appreciated.

Re: Cannot get point graphic to draw

KellyHutchins — Sat, 11 Dec 2021 07:05:11 GMT

What's the spatial reference of your map? If it is web mercator you'll need to convert the lat/lon location from geographic to web mercator. You can do this using the utility method esri.geometry.geographicToWebMercator.

Here's some test code that shows how this works, if I run this code using the following url param the map should zoom to New York
http://localhost/forum/zoomloc.html?location=-74.00,40.71

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
      <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title> World Street Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    
    <style>
      html,body,#map,.map.container{
        padding:0;
        margin:0;
        height:100%;
      }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      
      var map;
      
      function init() {
      
        map = new esri.Map("map");
      
       //Add the world street map layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(basemap);  
        

        dojo.connect(map, 'onLoad', function(theMap) {
           //get lon/lat from url 
          var url = window.location.href;
          var urlObject = esri.urlToObject(url);
          if (urlObject.query) {
            var location = urlObject.query.location || '';
            if(location){
              var vals = location.split(",");
              zoomToLocation(dojo.number.parse(vals[0]), dojo.number.parse(vals[1]));
            }
          }
       
        
          //resize the map when the browser resizes
          dojo.connect(window, 'resize', map,map.resize);
        });
      }
      
      function zoomToLocation(lon,lat){
        //convert point from geographic to web mercator since the map is in web mercator
        var point = new esri.geometry.Point(lon,lat, new esri.SpatialReference({ wkid: 4326 }));
        var wmpoint = esri.geometry.geographicToWebMercator(point);
        
        //add the graphic to the  map 
        var symbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 255, 0]));
        symbol.setSize(8); 
        var graphic = new esri.Graphic(wmpoint,symbol);
        map.graphics.add(graphic);
        
        //zoom to the location 
        var factor = 1;
        var zoomExtent =  new esri.geometry.Extent(
          wmpoint.x - factor,
          wmpoint.y - factor, 
          wmpoint.x + factor, 
          wmpoint.y + factor,
          wmpoint.SpatialReference
        );
        map.setExtent(zoomExtent.expand(2));
        
        
      }
      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div id="map">
    </div>
  </body>

</html>

Re: Cannot get point graphic to draw

CindyMeeker — Thu, 11 Oct 2012 20:19:18 GMT

What's the spatial reference of your map? If it is web mercator you'll need to convert the lat/lon location from geographic to web mercator. You can do this using the utility method esri.geometry.geographicToWebMercator.

Thanks for the reply Kelly.

I had thought of this but my map zooms to the correct location, just doesn't draw the graphic.
*