metamap

Layers go away

Discussion created by metamap on Apr 9, 2014
Latest reply on Apr 10, 2014 by metamap
I admit I am very new to the ArcGIS Javascript API.  So I know I have a lot yet to learn.  I have started out very basic and trying to build up to what my client is looking for.

I have a real estate website that includes the display of a map.  It displays parcels and buildings layers over the streets base map.  I have the parcel and building layer on our ArcGIS Online account.  By the time the user displays the map they have already established the parcel they are looking at.  So the map centers and zooms to that parcel and the display is fine.  But when they change to another parcel, during the same session, and then go to the map very frequently only the basemap shows and the map doesn't zoom and center.  If I do a reload, the map usually works fine.  Or if I navigate to another page of the website and then go back to the map most of the time it will work.

I wonder if I've missed something basic here.  The code is building everything from scratch every time the map page is addressed.  There are about 12 different pages that are part of the web application, with the map page one of those pages, and the user can bounce back and forth among them at will.  They typically change parcels through a search page.  When the user navigates to a different parcel then goes back to the map page for the new parcel are the map components still active?  Do I need to reset them somehow?  Or should I check to see if they still exist?

Here is the javascript I have developed for this page:


require(["esri/map",
             "esri/dijit/Popup", "esri/dijit/PopupTemplate",
             "esri/InfoTemplate", "esri/arcgis/utils",
             "esri/layers/FeatureLayer", "esri/layers/LayerDrawingOptions",
             "esri/toolbars/draw", "esri/dijit/HomeButton",
             "esri/dijit/OverviewMap", "esri/dijit/Scalebar",
             "esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol",
             "esri/symbols/SimpleLineSymbol", "esri/geometry/Point",
             "esri/geometry/Extent", "esri/geometry/Geometry",
             "esri/geometry/scaleUtils", "esri/SpatialReference",
             "esri/tasks/query", "esri/tasks/QueryTask", "dojo/query",
             "dojo/_base/Color", "dojo/dom-class", "dojo/dom-construct",
             "dojo/on", "dojo/domReady!"],
function(Map,
         Popup, PopupTemplate, InfoTemplate, arcgisUtils, FeatureLayer,
         LayerDrawingOptions, Draw, HomeButton, OverviewMap, Scalebar,
         SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Point,
         Extent, Geometry, scaleUtils, SpatialReference, Query, QueryTask,
         query, Color, domClass, domConstruct, on) {
      
  var map, parcelURL, parcelRenderer, parcelFill, parcelLayer, parcelExtent, home, scalebar, overviewMapDijit;
  var bldgURL, bldgRenderer, bldgFill, bldgLayer, popup, template, maxExtent, mapExtent;
  var selectedParcelFill;
  
  parcelURL = "http://services1.arcgis.com/7r2Wl09a1Apy459r/ArcGIS/rest/services/Parcels/FeatureServer/0";
  bldgURL = "http://services1.arcgis.com/7r2Wl09a1Apy459r/ArcGIS/rest/services/Buildings/FeatureServer/0";
  
  selectedParcelFill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                                           new Color([0,0,102]), 1),
                                      new Color([0,255,255,0.5])
                                      );
          
  parcelFill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                                           new Color([132,98,86]), 1),
                                      new Color([250,250,250,0.0])
                                      );
  
  popup = Popup({
    titleInBody: false
  },domConstruct.create("mapDiv"));
  
  var queryTask = new QueryTask(parcelURL);
  var parcelQuery = new Query();
  parcelQuery.outFields = ["*"];
  parcelQuery.returnGeometry = true;
  parcelQuery.where = "PID = '"+pidCurrent+"'";
  queryTask.execute(parcelQuery, function(featureSet) {
    var graphic = featureSet.features[0];
    parcelExtent = graphic.geometry.getExtent().expand(1.5);
    console.log("Starting extent: "+parcelExtent.xmin + ", yMin:" + parcelExtent.ymin + ", xMax: "+parcelExtent.xmax + ", yMax:" + parcelExtent.ymax);
    mapExtent = new Extent(parcelExtent.xmin, parcelExtent.ymin, parcelExtent.xmax, parcelExtent.ymax, parcelExtent.spatialReference);
  });
        
  var deferred = arcgisUtils.createMap("0d67180dd5704be1a057abcaaebc7c98","mapDiv", {
    mapOptions: {
      showAttribution: false,
      logo: false,
      infoWindow: popup
    }
  });
  deferred.then(function(response){
    map = response.map;
    map.setExtent(mapExtent);
    
    console.log("Map extent: "+map.extent.xmin + ", yMin:" + map.extent.ymin + ", xMax: "+map.extent.xmax + ", yMax:" + map.extent.ymax);
    
    template = new InfoTemplate();
    template.setTitle(getPopupTitle);
    template.setContent(getTextContent);
    
    parcelRenderer = new SimpleRenderer(parcelFill);
    parcelLayer = new FeatureLayer(parcelURL, {
      id: 'parcel',
      mode: FeatureLayer.MODE_ONDEMAND,
      outFields: ["*"],
      infoTemplate: template
    });
    parcelLayer.setRenderer(parcelRenderer);
        
    bldgFill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                                         new Color([218,217,186]),
                                                         2),
                                    new Color([249,250,232,0.9]));
    bldgRenderer = new SimpleRenderer(bldgFill);
    bldgLayer = new FeatureLayer(bldgURL, {
      id: 'building',
      mode: FeatureLayer.MODE_ONDEMAND
    });
    bldgLayer.setRenderer(bldgRenderer);
          
    map.addLayer(bldgLayer);
    map.addLayer(parcelLayer);
    
    home = new HomeButton({
      map:map,
      extent: parcelExtent
    }, "HomeButton");
    home.startup();
      
    scalebar = new Scalebar({
      map: map, scalebarUnit: "english"
    });

    overviewMapDijit = new OverviewMap({
      map: map,
      expandFactor: 4,
      maximizeButton: true,
      visible: true
    },dojo.byId("overviewDiv"));
    overviewMapDijit.startup();
    
    map.on("zoom", function() {
      popup.hide();
    });
    
    map.on("pan", function() {
      popup.hide();
    });
         
    map.on("zoom-end", function() {
      var scale = scaleUtils.getScale(map);
      if (scale > 5000) {
        bldgLayer.setVisibility(false);
      } else {
        bldgLayer.setVisibility(true);
      } if (scale > 15000) {
        parcelLayer.setVisibility(false);
      } else {
        parcelLayer.setVisibility(true);
      }
    });
          
    function getTextContent (graphic) {
      var attributes = graphic.attributes;
      var pid = attributes.PID;
      var taxDist = pid.substring(0,3);
      var parcelId = pid.substring(4);
      console.log("pid: "+pid+"    taxDist: "+taxDist+"   parcelId:"+parcelId);
      var rtn = "<table><tr><td>Owner:</td><td>" + attributes.NAME1 + "</td></tr>";
      if (attributes.NAME2 != null && attributes.NAME2.trim().length > 0) {
        rtn += "<tr><td>   </td><td>" + attributes.NAME2 + "</td></tr>";
      }
      rtn += "<tr><td> Location: </td><td>" + attributes.DESCR1 + "</td></tr>"
                  + "<tr><td> Sale Amt: </td><td>" + attributes.PRICE + "</td></tr>"
                  + "<tr><td colspan=2><a href=\"/do/searchByParcelId?taxDistrict="+taxDist+"&parcelNbr="+parcelId+"\">Switch to "+attributes.PID+"</a></td></tr></table>";
      return rtn;
    }
         
    function getPopupTitle (graphic) {
      var attributes = graphic.attributes;
      return "Parcel ID: "+attributes.PID;
    }
  });
});

Outcomes