I have written this code to source USPS postal route data from ESRI, which is to be displayed on a map.

The code works fine, the data source is also loaded, as per the console.log I put in place, but I am not able to get the layers to be displayed.

Did I make a mistake in the layers block or otherwise?

The code is as follows.

let zipCode = 10001;
let esriAPI_1 = "https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=4326&ZIP=";
let esriAPI_2 = "&Rte_Box=R&UserName=EDDM";
let esriAPI = esriAPI_1.concat(zipCode, esriAPI_2);

var esrixhr = new XMLHttpRequest();
    esrixhr.withCredentials = false;
    //console.log("inside add event listnersasdads");
    esrixhr.open("GET", esriAPI);
    esrixhr.addEventListener("readystatechange", function () {
        if (this.readyState === 4 && this.status == 200) {

    function ParseEsriData() {
        esriData = esrixhr.responseText; //adding esri data to var
        geodata = JSON.parse(esriData); //parsing the data
        features_data = geodata.results[0].value.features; //returns the number of routes 
        var eddm_parse = {
            'type': 'geojson',
            'data': {}

        featlength = 1;
        for (let i = 0; i <= featlength; i++) {

            attribs = features_data[i].attributes;
            ckid = attribs.CRID_ID;

            path_length = features_data[i].geometry.paths;
            var geojson = {
                "type": "Feature",
                "features": []

            for (let j = 0; j < path_length.length; j++) {
                //paths.length will give the total number of 
                //path arrays from esri
                var marker = {
                    'type': 'Feature',
                    'id': ckid,
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': ''
                    'properties': attribs
                geocordinates = path_length[j];
                marker.geometry.coordinates = geocordinates;
                marker.length = 0;

            eddm_parse.data[i] = geojson;

        // map.addSource(ckid, { 'type': 'geojson', 'data': geojson });
        map.addSource('route', eddm_parse);
            'id': 'route_layer',
            'type': 'line',
            'source': 'route',
            'layout': {
                'line-join': 'round',
                'line-cap': 'round'
            'paint': {
                'line-color': '#888',
                'line-width': 8,

        function callthis() {
            if (map.getSource('route') && map.isSourceLoaded('route')) {
                console.log('source loaded!');
                map.on('data', function () {

            else {
                console.log("this didnt work");

        map.on('sourcedata', callthis);

I got this figured out and it worked out fine. The mistake? I was setting the each route in a zip code as an individual data source. Its alot more efficient if you load all the route information as one geojson array and then load it into the map on load function, with the relevant layers.

I am not posting the code to achieve that, since it has now become proprietary.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.