javascript - Progress bar for Leaflet map -
how can show centered on map progress bar (with %) while waiting layer rendered on map?
here code:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" /> <script type='text/javascript' src="http://makinacorpus.github.io/leaflet.spin/leaflet.spin.js"></script> <script type='text/javascript' src="http://makinacorpus.github.io/leaflet.spin/spin.js/dist/spin.min.js"></script> </head> <body> <a href="#" onclick="showmap('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png')">tf.landscape</a> |<a href="#" onclick="showmap('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')">tf.outdoors</a> <div id="map" style="width: 640px; height: 480px"></div> <progress value="0" max="100"></progress> <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script> <script> var map; var tilelayer; function showmap (layerurl) { if(!map) { map = l.map('map').setview([19.5, -73], 7); } tilelayer = l.tilelayer(layerurl, { attribution: 'map data © <a href="http://openstreetmap.org">openstreetmap</a>', maxzoom: 18 }); //map.addlayer(tilelayer); map.spin(true); settimeout(function () { map.addlayer(tilelayer); map.spin(false); }, 3000); } </script>
thanks!
there not built- or plugged-in solution yet.
- if progress-bar , % not important , want tell user something's loading might want have @ leaflet.spin plugin showing spinning icon on map.
- if want progress-bar starting point might markercluster-plugin. 50k example has such progress bar.
Comments
Post a Comment