rodolpheg

Untitled

Feb 26th, 2020
193
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.81 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <head>
  7. <title>Une carte editable par les utilisateurs/trices</title>
  8. <meta charset="UTF-8">
  9. <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  10. <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  11. <!-- Les bibliothèques de Firebase -->
  12. <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
  13. <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>
  14. <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-database.js"></script>
  15. <style>
  16. html, body {height: 100%; margin: 0;}
  17. #Carte { width: 100%; height: 100%; }
  18. </style>
  19. </head>
  20. </head>
  21. <body>
  22. <div id='Carte'></div>
  23. <script>
  24. // créer la carte, remplacez VOTRE_TOKEN pour la clef que vous trouverez là : https://account.mapbox.com
  25. //var fondDeCarte = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=VOTRE_TOKEN');
  26. // décochez la ligne suivante si vous n'avez pas de compte MapBox
  27. var fondDeCarte = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
  28. var maCarte = L.map('Carte', {
  29. center: [45.52,-73.63],
  30. zoom: 13,
  31. layers: fondDeCarte,
  32. zoomControl: false
  33. });
  34. maCarte.setView([0,0], 2);
  35.  
  36. // L.geoJSON({"type": "Feature","geometry": {"type": "Point","coordinates": [74,58]}}).addTo(maCarte);
  37.  
  38. // Ajoût de la configuration de la connexion à la base de donnée en ligne Firebase.
  39. var firebaseConfig = {
  40. apiKey: "AIzaSyA36m1RLJb2eppWVTVhaXINYay9-Tp_7Ek",
  41. authDomain: "atelier3-1e7e2.firebaseapp.com",
  42. databaseURL: "https://atelier3-1e7e2.firebaseio.com",
  43. projectId: "atelier3-1e7e2",
  44. storageBucket: "atelier3-1e7e2.appspot.com",
  45. messagingSenderId: "565440140120",
  46. appId: "1:565440140120:web:a734a2aa00f9909ed10b2d"
  47. };
  48. // initialisez la base de données Firebase
  49. firebase.initializeApp(firebaseConfig);
  50. var database = firebase.database();
  51. ref = database.ref('Atelier4');
  52.  
  53. // Première fonction importante : push(), pour envoyer des données (qui doivent être formnatés JSON) vers la base de données FireBase :
  54. ref.push({a: 'a', b: 1254});
  55.  
  56. // Deuxième fonction importante : on(), pour récupérer les données de la base de données FireBase dès que celle-ci change :
  57. ref.on('value',function (data) {
  58. var features = data.val();
  59. var keys = Object.keys(features);
  60. if (keys.length > 0) {
  61. // passe à travers toutes les entités de la base :
  62. for (var i = 0; i < keys.length; i++) {
  63. console.log(features[keys[i]])
  64. }
  65. }
  66. }, function(error) {
  67. console.error(error);
  68. });
  69. </script>
  70. </body>
  71. </html>
Advertisement
Add Comment
Please, Sign In to add comment