Display issues using ArcGIS online basemap

Question

I am working on creating a web app using ArcGIS javascript API.

I am having this weird display issue of the basemap tiles. They appear to be loading in diagonally, and it appears as if they are showing up at random when the map is panned, zoomed, etc. Please see the attached image.

Please note that I have added the esri streets baselayer, as well as a dynamic layer showing the county parcels. The parcels appear to be displaying correctly, although they are overlapping my application sidebar for some reason.

Any ideas on what could be causing such a problem?

MapDisplayIssue.jpg

AddressIssues.jpg

BrittanyBurson_2-1648684301602.png

roemhildtg · Answer

Looks like this was a beginners mistake..oops. I had forgotten to include the esri.css ">😐

roemhildtg · Answer

I currently am not using anything special as far as that goes, my map side of the application code currently looks like this:define([
    "dojo/_base/declare",
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer"
], function(declare, Map, FeatureLayer, ArcGISDynamicMapServiceLayer) {
    return declare(null, {
        map: null,
        layers: [],
        constructor: function() {
            esri.config.defaults.io.proxyUrl = "proxy.php";
            esri.config.defaults.io.alwaysUseProxy = true;
            esri.addProxyRule({
                urlPrefix: "services.arcgisonline.com",
                proxyUrl: "proxy.php"
            });
            this.map = new Map("map", {
                center: [-92.881154, 45.166838],
                zoom: 14,
                basemap: "streets"
            });
            this.layers.push(
                    new ArcGISDynamicMapServiceLayer("http://gis-02:6080/arcgis/rest/services/Cadastral/Parcels/MapServer/")
                    );
            this.map.addLayers(this.layers);
        }
    })

MatthewLofgren · Answer

Are you using LODs that are different from the streets basemap?"lods" : [
      {"level" : 0, "resolution" : 156543.033928, "scale" : 591657527.591555}, 
      {"level" : 1, "resolution" : 78271.5169639999, "scale" : 295828763.795777}, 
      {"level" : 2, "resolution" : 39135.7584820001, "scale" : 147914381.897889}, 
      {"level" : 3, "resolution" : 19567.8792409999, "scale" : 73957190.948944}, 
      {"level" : 4, "resolution" : 9783.93962049996, "scale" : 36978595.474472}, 
      {"level" : 5, "resolution" : 4891.96981024998, "scale" : 18489297.737236}, 
      {"level" : 6, "resolution" : 2445.98490512499, "scale" : 9244648.868618}, 
      {"level" : 7, "resolution" : 1222.99245256249, "scale" : 4622324.434309}, 
      {"level" : 8, "resolution" : 611.49622628138, "scale" : 2311162.217155}, 
      {"level" : 9, "resolution" : 305.748113140558, "scale" : 1155581.108577}, 
      {"level" : 10, "resolution" : 152.874056570411, "scale" : 577790.554289}, 
      {"level" : 11, "resolution" : 76.4370282850732, "scale" : 288895.277144}, 
      {"level" : 12, "resolution" : 38.2185141425366, "scale" : 144447.638572}, 
      {"level" : 13, "resolution" : 19.1092570712683, "scale" : 72223.819286}, 
      {"level" : 14, "resolution" : 9.55462853563415, "scale" : 36111.909643}, 
      {"level" : 15, "resolution" : 4.77731426794937, "scale" : 18055.954822}, 
      {"level" : 16, "resolution" : 2.38865713397468, "scale" : 9027.977411}, 
      {"level" : 17, "resolution" : 1.19432856685505, "scale" : 4513.988705}, 
      {"level" : 18, "resolution" : 0.597164283559817, "scale" : 2256.994353}, 
      {"level" : 19, "resolution" : 0.298582141647617, "scale" : 1128.497176}
    ]

I had that issue when I cut out levels 8-16 and renamed them 0-8. I should have just left them as 8-16.