rgdonohue/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link href='http://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'>
<!--    loader div with opaque background-->
        <div id='loader'>
<!--        animated gif of spinning loader-->
            <img src='loader.gif' alt='loader' />
        </div>
    </div>

    <script>

        var map = L.map('map', {
            center: [42,-95],
            zoom: 4
        });

        var tiles = L.tileLayer('http://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('http://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>

## loader.gif

      
    Raw
  

              loader.gif
            
          
## rails.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              rails.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<link href='http://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'>
	<!-- loader div with opaque background-->
	<div id='loader'>
	<!-- animated gif of spinning loader-->
	<img src='loader.gif' alt='loader' />
	</div>
	</div>

	<script>

	var map = L.map('map', {
	center: [42,-95],
	zoom: 4
	});

	var tiles = L.tileLayer('http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png', {
	attribution: '©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('http://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>