problem adding point (graphic) to map on android

MikeSteven · ‎12-03-2013

Hi,

I'm trying to display a cached basemap and have a user click on it to create a new graphic point. All I really want at this stage are the coordinates of the point which will then be passed into another system. So far I've taken the sample for the compact api that displays a map and added a bit extra code to listen for a click and draw a point on the map at that location and show an alert with the coordinates of the point. It seems to work on a PC but when I use an android phone and add a point, the point displays in the top left hand corner of the original map starting location (even if I pan away from there and add a point). On android the alert box that displays the coordinates of the user click point then shows the x and y values as NaN.

Here's my code, any suggestions as to what I'm doing wrong would be greatly appreciated.
Cheers

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <!-- On iOS, as part of optimizing your web application, have it use the
  standalone mode to look more like a native application. When you use this
  standalone mode, Safari is not used to display the web content???specifically,
  there is no browser URL text field at the top of the screen or button bar
  at the bottom of the screen. -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- Controls the dimensions and scaling of the browser window in iOS,
  Android, webOS, Opera Mini, Opera Mobile and Blackberry. width: controls
  the width of the viewport initial-scale: controls the zoom level when the
  page is first loaded maximum-scale: control how users are allowed to zoom
  the page in or out user-scalable: control how users are allowed to zoom
  the page in or out -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!-- Sets the style of the status bar for a web application when in standalone
  mode -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>Potholes</title>

  <link rel="stylesheet" href="http://jsdev.arcgis.com/3.6/js/esri/css/esri.css">

  <link rel="stylesheet" href="css/main.css">

  <script>
   var dojoConfig = {
    mblAlwaysHideAddressBar : true
   };
  </script>
  <script src="http://jsdev.arcgis.com/3.7compact/"></script>
  <script>
   require(["esri/map", "esri/layers/FeatureLayer", "esri/geometry/Point", "esri/SpatialReference", "esri/graphic", 
   "esri/InfoTemplate", "dojox/mobile", "dojox/mobile/parser", "esri/sniff", 
   "dojox/mobile/deviceTheme", "dojo/dom", "dijit/registry", "dojo/on", "dojox/mobile/ToolBarButton", 
   "dojox/mobile/View", "dojox/mobile/ContentPane"],
      
   function(Map, FeatureLayer, Point, SpatialReference, Graphic, InfoTemplate, mobile, parser, has, dTheme, dom, registry, on) {
    parser.parse();
    mobile.hideAddressBar();
    
    var xcoord = getUrlVars()["x"];
    var ycoord = getUrlVars()["y"];
     var location = new Point([xcoord, ycoord], new SpatialReference({ wkid:27700 }));
     //var location = new Point(xcoord, ycoord);
    //alert(String(xcoord));
    //alert(String(ycoord));

    var initialExtent = new esri.geometry.Extent({
     "xmin" : 310000,
     "ymin" : 660000,
     "xmax" : 335000,
     "ymax" : 680000,
     "spatialReference" : {
      "wkid" : 27700
     }
    });
    var map = new esri.Map("map", {
     //infoWindow:popup,
     extent : initialExtent
    });
    
    if (xcoord != null && ycoord != null){
     map.centerAndZoom(location, 7);
    }
    

    //declare basemap
    var basemapUrl = "http://217.174.251.127/ArcGIS/rest/services/Basemaps/Basemaplargescale/MapServer";
    //var basemapUrl = "http://88.208.222.252/ArcGIS/rest/services/Basemaps/basemap/MapServer";

    //create and add new layer
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
    map.addLayer(basemap);

    var infoTemplate = new InfoTemplate();
          infoTemplate.setContent("Address: ${Address}<br/>"
                             + "Street: ${StreetName<br/>"
                             + "Postcode: ${Postcode}<br/>"
                             + "Description: ${Description}<br/>"
                             + "Status: ${Status}<br/>"); 
                              
    var featureLayer = new FeatureLayer("http://88.208.222.252/ArcGIS/rest/services/Transport/PotholesTest/MapServer/0", {
     mode : FeatureLayer.MODE_ONDEMAND,
     infoTemplate : infoTemplate,
     outFields : ["*"]
    });

    map.addLayer(featureLayer);

    map.on("load", mapLoadHandler);

    var resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";
    on(window, resizeEvt, resizeMap);
    
    //var graphicsLayer = new esri.layers.GraphicsLayer();
    
    //add new symbol for user points
    var symbol =  new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12,
       new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,
       new dojo.Color([0,200,0]), 2),
       new dojo.Color([255,0,0]));
    
    //add a new graphic when the user clicks, the coordinates will be passed to CRM
    var mapclickHandler = on(map, 'click', function (evt) {
          //only capture one click
          dojo.disconnect(mapclickHandler);
          var newGraphic = new Graphic(evt.mapPoint, symbol);
          map.graphics.add(newGraphic);
          alert("x coordinate = " + evt.mapPoint.x + ", y coordinate = " + evt.mapPoint.y);
         });
    
    function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
            vars[key] = value;
         });
        return vars;
    }


    function mapLoadHandler(evt) {
     resizeMap();
     registry.byId('mapView').on('AfterTransitionIn', resizeMap);
    }

    function resizeMap() {
     mobile.hideAddressBar();
     adjustMapHeight();
     map.resize();
     map.reposition();
    }

    function adjustMapHeight() {
     //var availHeight = mobile.getScreenSize().h - registry.byId('header').domNode.clientHeight - 1;
     var availHeight = mobile.getScreenSize().h;
     if (has('iphone') || has('ipod')) {
      availHeight += iphoneAdjustment();
     }
     dom.byId("map").style.height = availHeight + "px";
    }

    function iphoneAdjustment() {
     var sz = mobile.getScreenSize();
     if (sz.h > sz.w) {//portrait
      //Need to add address bar height back to map
      return screen.availHeight - window.innerHeight - 40;
      /* 40 = height of bottom safari toolbar */
     } else {//landscape
      //Need to react to full screen / bottom bar visible toggles
      var _conn = on(window, 'resize', function() {
       _conn.remove();
       resizeMap();
      });
      return 0;
     }
    }

   });
  </script>
 </head>

 <body>
  <div id="mapView" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true">
   <!--<div id="header" data-dojo-type="dojox.mobile.Heading"></div>-->
   <div id="mapContainer" data-dojo-type="dojox.mobile.ContentPane">
    <div id="map"></div>
   </div>
  </div>
 </body>
</html>

BrianRassier · ‎02-04-2014

Hello -

Did you ever get this resolved? I'm seeing similar results where I get a valid x/y on a PC, but a touch event on an iPhone gives me NaN for the x/y of the "tap".

BrianRassier · ‎02-04-2014

Sorry - I just found a different post which resolved my similar issue:

http://forums.arcgis.com/threads/94963-Javascript-API-map-3.7-has-no-coordinates-when-handling-map-c...