Search code examples
javascriptloadingarcgis-js-apiwms

Why is loading a WMS layer with ArcGIS API JS is that slow?

I was wondering if it was normal how slow arcgis API JS loads WMS layers. Here is an example:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Intro</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.17/esri/css/main.css">
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
        require(["esri/Map", "esri/views/MapView", "esri/layers/WMSLayer", "esri/widgets/LayerList"], function(
            Map,
            MapView,
            WMSLayer,
            LayerList,
        ) {
            const map = new Map({
                basemap: "streets-navigation-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 3,
                center: {
                    latitude: 32.7353,
                    longitude: -117.1490
                }
            });
            var layer_precipitations = new WMSLayer({
                url: "https://geo.weather.gc.ca/geomet?",
                title: "Précipitation radar",
                sublayers: [{
                    name: "RADAR_1KM_RRAI",
                    title: "precipitations",
                    popupEnabled: false,
                    queryable: false,
                    visible: true,
                }, ],
                visible: true,
            });

            map.add(layer_precipitations);

            var layerList = new LayerList({
                view: view,
            });
            view.ui.add(layerList, {
                position: "top-left"
            });
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

The page takes about 4 seconds to load with chrome, and about 8 seconds with firefox. If I try loading the same layer with leaflet or openlayers, it doesnt even take 1 second.  Anyone knows how I can make it faster?  Thank you! Julien

Solution

  • Edit: Leaflet vs ArcGIS fundamentals

    Your comment led me to take a closer look. I created codepens for both arcgis and leaflet versions, but SO won't let me post links without posting code, which I think is a bit silly, so see the comments for links. The difference in speed is in the underlying methods which each library uses to pull the layer. Take a look at the network tab for the leaflet version:

    enter image description here:

    As you can see, leaflet takes the request and breaks it up in small pieces, into tiles. As all these requests are made concurrently, and each is smaller, the whole response comes back faster, with each tile averaging about 800ms to get.

    Let's look at ArcGIS's method:

    enter image description here

    As you can see, ArcGIS gets the entire image for the current map extent. This takes longer - in my case, about 2 seconds. I'm not sure why you're getting response times as long as 4 and 8 seconds, but you can at least see now why there's a difference.

    So it comes down to a fundamental difference in how each library handles the wms request. ArcGIS is amazing, but does seem to do certain things a bit slower than leaflet. Leaflet has been relentlessly optimized for speed, but doesn't have all the built-in features that arcgis has. I think 2 seconds for a response time is probably fine, but on slower connections, 8 seconds is kind of unacceptable. This has been my beef with arcgis for a long time, but as I had said, its up to us to choose the library that best suits the needs of a given application.