Search code examples
arcgisarcgis-js-api

Issue with using UniqueValueRenderer - color not displayed in chrome but it is getting displayed in Firefox and Edge

I want to use the Legends feature for ArcGIS using the ArcGIS Javascript API. So I used the UniqueValueRenderer for my CSVLayer.

The CSVLayer is displayed correctly. But when I display using Google Chrome, defaultSymbol is rendered in all the case. But when I view it using Mozilla Firefox or Microsoft Edge it is working fine.

Screenshot of Chrome: Screenshot - Chrome

Screenshot of Firefox: Screenshot - Firefox

var renderer = new UniqueValueRenderer({
    defaultLabel: "Other files",
    field: "Category",
    defaultSymbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#ABB2B9"
            },
            outline: {
                width: 0.2,
                color: p6
            },
            size: "12px"
        }]
    }, // autocasts as new SimpleFillSymbol()
    legendOptions: {
        title: "File type"
    }
});


renderer.addUniqueValueInfo({
    label: "Drawing",
    description: "Drawing files(.dwg, .rvt etc.)",
    value: "1",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#2ECC71"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

renderer.addUniqueValueInfo({
    label: "Specter",
    description: "Specter files.",
    value: "2",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#F3AD12"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

renderer.addUniqueValueInfo({
    label: "Snapshots",
    description: "Image files (.jpg, .png, .bmp etc.)",
    value: "3",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#E74C3C"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

renderer.addUniqueValueInfo({
    label: "Documents",
    description: "Office files (.doc, .xls, .xlsx etc.)",
    value: "4",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#A569BD"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

These are the content in my CSVFile

Latitude,Longitude,Depth,DocumentId,FileId,DocumentNumber,DocumentCreatedByUserName,DocumentDescription,RevisionNoValue,Category,OriginalFileName
"28.963349","77.684915","0","STR##104440","105134","ENGG-DOC-DEC-004","User","Description 1","0","0",""
"28.792274","77.522666","0","STR##102182","103587","ENGG-CIV-003","User","Description 2","0","2","ENGG-CIV-003.pdf"

The whole ArcGIS code

require([
    "esri/Map",
    "esri/layers/CSVLayer",
    "esri/views/SceneView",
    "esri/widgets/BasemapGallery",
    "esri/widgets/Expand",
    "esri/widgets/Locate",
    "esri/widgets/Search",
    "esri/Graphic",
    "esri/PopupTemplate",
    "esri/renderers/UniqueValueRenderer",
    "esri/widgets/Legend"
], function(Map, CSVLayer, SceneView, BasemapGallery, Expand, Locate, Search, Graphic, PopupTemplate, UniqueValueRenderer, Legend) {
    // If CSV files are not on the same domain as your website, a CORS enabled server
    // or a proxy is required.
    debugger;

    var renderer = new UniqueValueRenderer({
        defaultLabel: "Other files",
        field: "Category",
        defaultSymbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon", 
                material: {
                    color: "#ABB2B9"
                },
                outline: {
                    width: 0.2,
                    color: p6
                },
                size: "12px"
            }]
        }, // autocasts as new SimpleFillSymbol()
        legendOptions: {
            title: "File type"
        }
    });

    renderer.addUniqueValueInfo({
        label: "Drawing",
        description: "Drawing files(.dwg, .rvt etc.)",
        value: "1",
        symbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon",
                material: {
                    color: "#2ECC71"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    renderer.addUniqueValueInfo({
        label: "Specter",
        description: "Specter files.",
        value: "2",
        symbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon",
                material: {
                    color: "#F3AD12"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    renderer.addUniqueValueInfo({
        label: "Snapshots",
        description: "Image files (.jpg, .png, .bmp etc.)",
        value: "3",
        symbol: {
            type: "point-3d", 
            symbolLayers: [{
                type: "icon",
                material: {
                    color: "#E74C3C"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    renderer.addUniqueValueInfo({
        label: "Documents",
        description: "Office files (.doc, .xls, .xlsx etc.)",
        value: "4",
        symbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon", 
                material: {
                    color: "#A569BD"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    var url = '<valid csv file url>';



    var template = {
        title: "Document basic info - {DocumentNumber}",
        content: "Document number: {DocumentNumber}," +
            "<br/>Description: {DocumentDescription}" +
            "<br/>Revision no: {RevisionNoValue}" +
            "<br/>File name: {OriginalFileName}" +
            "<br/>Created by: {DocumentCreatedByUserName}" +
            "<br/><br/><a href='#' onclick='ViewDocumentDetails(`{DocumentId}`)'>Click here</a> to view the document details"
    };



    var csvLayer = new CSVLayer({
        title: "Documents",
        url: url,
        copyright: "Wrench Solutions",
        popupTemplate: template,
        elevationInfo: {
            // drapes icons on the surface of the globe
            mode: "on-the-ground"
        },
        renderer: renderer
    });



    var map = new Map({
        basemap: "topo",
        ground: "world-elevation",
        layers: [csvLayer]
    });

    var view = new SceneView({
        container: "viewDiv",
        center: [138, 35],
        zoom: 4,
        map: map
    });

    var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
    });

    var locateBtn = new Locate({
        view: view
    });

    var search = new Search({
        view: view
    });


    view.ui.add(search, "top-right");


    var bgExpand = new Expand({
        view: view,
        content: basemapGallery
    });

    view.ui.add(locateBtn, {
        position: "top-left"
    });

    view.ui.add(bgExpand, "bottom-right");

    var legendExpand = new Expand({
        view: view,
        content: new Legend({
            view: view,
            style: "card",
        })
    });

    view.ui.add(legendExpand, "bottom-left");

    $(".esri-attribution__sources").css('display', 'none');
});

I want to know if this is an issue with ArcGIS Online as a whole as a similar issue exists in ArcGIS online.

Solution

  • It appears that Chrome interprets fields in the CSV differently than Firefox. The fields DocumentID, Category and RevisionNoValue are interpreted as dates in Chrome, which is why none of the values of the UniqueValueRenderer match.

    You have to options:

    1. Fix the CSV by removing the quotes (") around the numbers

    2. Tell the CSVLayer specifically what type of fields your CSV contains

      var csvLayer = new CSVLayer({
  title: "Documents",
  url: url,
  copyright: "Wrench Solutions",
  popupTemplate: template,
  elevationInfo: {
    // drapes icons on the surface of the globe
    mode: "on-the-ground"
  },
  renderer: renderer,
  fields: [
    {
      alias: "__OBJECTID",
      name: "__OBJECTID",
      type: "oid"
    },{
      alias: "Latitude",
      name: "Latitude",
      type: "double"
    },

    ... 

    ,{
      alias: "Category",
      name: "Category",
      type: "integer"
    },{
      alias: "OriginalFileName",
      name: "OriginalFileName",
      type: "string"
    }
  ]
});

    See the following Codepen for the complete source code https://codepen.io/arnofiva/pen/cba32aedd13ceec9719cbf20b485f458