Old school D3 from simpler times

All examples By author By category About

rgdonohue

Full window Github gist

simple spinning loader

This simple example initially loads the page with an opaque div that covers the map and contains an animated loader gif image. Once the data file (10.8MB) has been loaded with an AJAX request, the div is removed using JavaScript.

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>Loading Screen Example</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

<style>
        body {
            margin: 0;
            padding: 0;
            background: whitesmoke;
            font-family: Lato, sans-serif;
            color: #0D0000;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            z-index: 100;
        }
        
/*       have the loader div fill the map screen while disabling interaction */
        #loader {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background-color: rgba(245, 245, 245, 0.7);
            z-index: 200;
        }
        
/*       since we know the height/width of the loader gif, 
         position absolutely and use top/left, subtracting half of 
         width and heigth using margin */
        #loader img {
            width: 66px;
            height: 66px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -33px 0 0 -33px;
        }
    </style>
</head>

<body>

<div id='map'>

        <div id='loader'>

            <img src='loader.gif' alt='loader' />
        </div>
    </div>
   
    <script>

var map = L.map('map', {
            center: [42,-95],
            zoom: 4
        });
        
        var tiles = L.tileLayer('https://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', {
            attribution: '&copy;2012 Esri & Stamen, Data from OSM and Natural Earth',
            subdomains: '0123',
            minZoom: 2,
            maxZoom: 18
        });
        
        // let's request the tiles and let them load as they do
        map.addLayer(tiles);
        
        // request to load large file asychronously
        $.getJSON('https://rgdonohue.github.io/data/rails.json', function(data){
        
           // when the data are ready
           ready(data);
            
        });
        
        function ready(data){
            
            // remove the loader div from the DOM
            $('#loader').remove();
            
            // do stuff with the data
            L.geoJson(data).addTo(map);
    
        }

</script>
    
</body>

</html>

Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url

https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js

https://code.jquery.com/jquery-2.1.4.min.js