Created
May 4, 2019 11:05
-
-
Save ThomasG77/4431bb0452c264d8cef3655925b64c0c to your computer and use it in GitHub Desktop.
Leaflet.Spin standalone (similar to official https://github.com/makinacorpus/Leaflet.Spin but use only CDNs)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>Leaflet.Spin</title> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> | |
| <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js" charset="utf-8"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.Spin/1.1.0/leaflet.spin.min.js" charset="utf-8"></script> | |
| <style type='text/css'> | |
| #map { | |
| position: absolute; | |
| top:0; | |
| left: 0; | |
| right: 0; | |
| bottom:0; | |
| } | |
| #btn-spin { | |
| position: absolute; | |
| left: 200px; | |
| z-index: 10; | |
| font-size: 1.5em; | |
| z-index: 3000; | |
| } | |
| .help { | |
| font-size: 1.5em; | |
| position: absolute; | |
| top:0; | |
| left: 0; | |
| right: 0; | |
| height: 30px; | |
| z-index: 10; | |
| background-color: rgba(0,0,0,0.5); | |
| color: white; | |
| padding: 10px; | |
| margin: 0px; | |
| text-align: center; | |
| z-index: 3000; | |
| } | |
| .help a.sources { | |
| float: left; | |
| margin-left: 50px; | |
| color: white; | |
| } | |
| .help a.logo { | |
| float: right; | |
| } | |
| .help a.logo img { | |
| height: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p class="help">Leaflet + Spin.js | |
| <a class="sources" href="http://github.com/makinacorpus/Leaflet.Spin/">Sources</a> | |
| <a class="logo" href="http://makina-corpus.com"><img src="http://depot.makina-corpus.org/public/logo.gif"/></a> | |
| </p> | |
| <div id="map"></div> | |
| <button id="btn-spin">Spin Top-Left !</button> | |
| <script type='text/javascript'> | |
| window.onload = function () { | |
| var campus={type:"Feature",properties:{popupContent:"This is the Auraria West Campus",style:{weight:2,color:"#999",opacity:1,fillColor:"#B0DE5C",fillOpacity:.8}},geometry:{type:"MultiPolygon",coordinates:[[[[-105.00432014465332,39.74732195489861],[-105.00715255737305,39.7462000683517],[-105.00921249389647,39.74468219277038],[-105.01067161560059,39.74362625960105],[-105.01195907592773,39.74290029616054],[-105.00989913940431,39.74078835902781],[-105.00758171081543,39.74059036160317],[-105.00346183776855,39.74059036160317],[-105.00097274780272,39.74059036160317],[-105.00062942504881,39.74072235994946],[-105.00020027160645,39.74191033368865],[-105.0007152557373,39.74276830198601],[-105.00097274780272,39.74369225589818],[-105.00097274780272,39.74461619742136],[-105.00123023986816,39.74534214278395],[-105.00183105468751,39.74613407445653],[-105.00432014465332,39.74732195489861]],[[-105.00361204147337,39.74354376414072],[-105.00301122665405,39.74278480127163],[-105.00221729278564,39.74316428375108],[-105.00283956527711,39.74390674342741],[-105.00361204147337,39.74354376414072]]],[[[-105.00942707061768,39.73989736613708],[-105.00942707061768,39.73910536278566],[-105.00685214996338,39.73923736397631],[-105.00384807586671,39.73910536278566],[-105.00174522399902,39.73903936209552],[-105.00041484832764,39.73910536278566],[-105.00041484832764,39.73979836621592],[-105.00535011291504,39.73986436617916],[-105.00942707061768,39.73989736613708]]]]}}; | |
| var map = L.map('map').setView([39.74, -105], 14); | |
| L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| var layer = L.geoJson().addTo(map); | |
| map.spin(true); | |
| // Simulate AJAX | |
| setTimeout(function () { | |
| layer.addData(campus); | |
| map.spin(false); | |
| }, 3000); | |
| // Recreate spin with options | |
| document.getElementById('btn-spin').onclick = function () { | |
| map.spin(false); | |
| map.spin(true, {top: 80, left: 50}); | |
| setTimeout(function() {map.spin(false);}, 3000); | |
| }; | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Marche parfaitement. Le lien vers la démo http://bl.ocks.org/ThomasG77/raw/4431bb0452c264d8cef3655925b64c0c/
Merci pour votre réponse, c'était une erreur interne de mon navigateur. par contre je voulais ajouter un reverse geocoding , vous pouvez me suggérer une solution open source?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ça marche pas Monsieur .