AnsweredAssumed Answered

Problem with rendering tiles and centering marker on map.

Question asked by geonetadmin on Jun 18, 2012
Latest reply on Jun 18, 2012 by geonetadmin
Original User: elitereloaded

Hi,

I have this weird bug (or what seems to be a bug), the marker is not centered on the map and some of the tiles don't render at all...

I used this example here http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/locator_address.html and the only things i changed was i removed the code that prints the Extent and Results to the screen and i also wrapped the global variables and functions into an object so they are namespaced...

<script type="text/javascript">
 var djConfig = {
  parseOnLoad: true
 };
 
 dojo.require("esri.map");
 dojo.require("dijit.layout.BorderContainer");
 dojo.require("dijit.layout.ContentPane");
 dojo.require("esri.tasks.locator");
 
 var esriMap = {
  locator: {},
  map: {},
  address: {
   'SingleLine': 'CR 4301 GREENVILLE, TX 75401'
  },
  init: function() {
   var initExtent = new esri.geometry.Extent({
    "xmin": 26611275,
    "ymin": 3810939,
    "xmax": -26611275,
    "ymax": 7020071,
    "spatialReference": {"wkid": 102100}
   });
   
   esriMap.map = new esri.Map("map",{
    wrapAround180: true,
    extent: initExtent
   });
   
   dojo.connect(esriMap.map, 'onLoad', function(theMap) {
    // Resize the map when the browser resizes
    dojo.connect(dijit.byId('map'), 'resize', esriMap.map, esriMap.map.resize);
   });
   
   var basemap = new esri.layers.ArcGISTiledMapServiceLayer(
    "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
   );
   esriMap.map.addLayer(basemap);
   
   // Create geocoder  
   esriMap.locator = new esri.tasks.Locator(
    "http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer"
   );
   
   // Draw and zoom to the result when the geocoding is complete                
   dojo.connect(esriMap.locator, "onAddressToLocationsComplete", function(geocodeResults) {
    esriMap.map.graphics.clear();
    
    dojo.forEach(geocodeResults, function(geocodeResult, index) {
     //create a random color for the text and marker symbol
     var r = Math.floor(Math.random() * 250);
     var g = Math.floor(Math.random() * 100);
     var b = Math.floor(Math.random() * 100);
     
     var symbol = new esri.symbol.SimpleMarkerSymbol(
      esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 
      20, 
      new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
      new dojo.Color([r, g, b, 0.5]), 10), 
      new dojo.Color([r, g, b, 0.9])
     );
     
     var pointMeters = esri.geometry.geographicToWebMercator(geocodeResult.location);
     
     var locationGraphic = new esri.Graphic(pointMeters, symbol);
     
     var font = new esri.symbol.Font().setSize("12pt").setWeight(
      esri.symbol.Font.WEIGHT_BOLD
     );
     
     var textSymbol = new esri.symbol.TextSymbol(
      (index + 1) + ".) " + geocodeResult.address, 
      font, 
      new dojo.Color([r, g, b, 0.8])
     ).setOffset(5, 15);
     
     // Add the location graphic and text with the address to the map
     esriMap.map.graphics.add(locationGraphic);
     
     esriMap.map.graphics.add(new esri.Graphic(pointMeters, textSymbol));
    });
    
    var ptAttr = geocodeResults[0].attributes;
    console.log(JSON.stringify(ptAttr));
    var esriExtent = new esri.geometry.Extent(
     ptAttr.West_Lon, 
     ptAttr.South_Lat, 
     ptAttr.East_Lon, 
     ptAttr.North_Lat, 
     new esri.SpatialReference({wkid: 4326})
    );
    
    esriMap.map.setExtent(esri.geometry.geographicToWebMercator(esriExtent));
   });
   
   esriMap.locate();
  },
  locate: function() {
   var options = {
    address: esriMap.address,
    outFields: ["*"]
   };
   
   //optionally return the out fields if you need to calculate the extent of the geocoded point
   esriMap.locator.addressToLocations(options);
  },
  zoomTo: function(lat, lon) {
   var point = new esri.geometry.Point(lon, lat, {
    wkid: "4326"
   });
   
   var wmpoint = esri.geometry.geographicToWebMercator(point);
   
   esriMap.map.centerAt(wmpoint);
  }
 };
 
 dojo.addOnLoad(esriMap.init);
</script>

Outcomes