API tools faq
paste
rodolpheg

Untitled

rodolpheg
Feb 24th, 2020
215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Carte connectée à PostgreSQL</title>
  5. <meta charset="utf-8" />
  6. <!-- CSS de Leaflet -->
  7. <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  8. <!-- Bibliothèque javaScript de Leaflet -->
  9. <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  10. <!-- Importation d ela bibliothèque JQuery pour implémenter un AJAX -->
  11. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  12. <!-- Importation de la serie de styles CSS de Bootstrap -->
  13. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  14. <!-- Importation de la petite bibliothèque de fonctions Classy Brew pour nous aider à classifier nos données et leur attribuer un palette de couleurs -->
  15. <script src="classybrew.js"></script>
  16. <!-- Ajout de quelques styles supplémentaires (taille de la carte, syle de la fenêtre d'informations, de la légende, etc.) -->
  17. <style>
  18. html,
  19. body {
  20. height: 100%;
  21. margin: 0;
  22. }
  23. #map {
  24. width: 100%;
  25. height: 80%;
  26. }
  27. .info {
  28. padding: 6px 8px;
  29. font: 14px/16px Arial, Helvetica, sans-serif;
  30. background: rgba(255, 255, 255, 0.8);
  31. box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  32. border-radius: 5px;
  33. }
  34. .info h4 {
  35. margin: 0 0 5px;
  36. color: #777;
  37. }
  38. .legend {
  39. text-align: left;
  40. line-height: 18px;
  41. color: #555;
  42. }
  43. .legend i {
  44. width: 18px;
  45. height: 18px;
  46. float: left;
  47. margin-right: 8px;
  48. opacity: 0.7;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <br>
  54. <!-- Création d'un petit formulaire HTML avec les classes de styles de Bootstrap -->
  55. <form class="form-inline">
  56. <!-- Un menu déroulant pour choisir la variable à visualiser -->
  57. <div class="dropdown mb-2 mr-sm-2">
  58. <select class="form-control" id="variable">
  59. <option value="rev">Revenu médian</option>
  60. <option value="pop">Population</option>
  61. <option value="logmedprop">Frais de logement médian (propriétaires)</option>
  62. <option value="logmedloc">Frais de logement médian (propriétaires)</option>
  63. </select>
  64. </div>
  65. <label class="sr-only" for="inlineFormInputGroupUsername2">min</label>
  66. <!-- Une zone de texte pour entrer la valeur minimale que l'on souhaite afficher -->
  67. <div class="input-group mb-2 mr-sm-2">
  68. <div class="input-group-prepend">
  69. <div class="input-group-text">Min.</div>
  70. </div>
  71. <input type="text" class="form-control" id="varMin" placeholder=0>
  72. </div>
  73. <!-- Une zone de texte pour entrer la valeur maximale que l'on souhaite afficher -->
  74. <label class="sr-only" for="inlineFormInputGroupUsername2">max</label>
  75. <div class="input-group mb-2 mr-sm-2">
  76. <div class="input-group-prepend">
  77. <div class="input-group-text">Max.</div>
  78. </div>
  79. <input type="text" class="form-control" id="varMax" placeholder=0>
  80. </div>
  81. <!-- Un menu déroulant pour choisir la palette de couleurs, pour référence, voir https://www.datanovia.com/en/fr/blog/palette-de-couleurs-rcolorbrewer-de-a-a-z/ -->
  82. <div class="dropdown mb-2 mr-sm-2">
  83. <select class="form-control" id="palette">
  84. <!-- Palettes séquentielles -->
  85. <option value="OrRd">OrRd</option>
  86. <option value="PuBu">PuBu</option>
  87. <option value="BuPu">BuPu</option>
  88. <option value="Oranges">Oranges</option>
  89. <option value="BuGn">BuGn</option>
  90. <option value="YlOrBr">YlOrBr (d)</option>
  91. <option value="YlGn">YlGn (d)</option>
  92. <option value="Reds">Reds (d)</option>
  93. <option value="RdPu">RdPu (d)</option>
  94. <option value="Greens">Greens</option>
  95. <option value="YlGnBu">YlGnBu (d)</option>
  96. <option value="Purples">Purples</option>
  97. <option value="GnBu">GnBu</option>
  98. <option value="Greys">Greys</option>
  99. <option value="PuRd">PuRd (d)</option>
  100. <option value="Blues">Blues</option>
  101. <option value="PuBuGn">PuBuGn</option>
  102. <!-- Palettes divergentes -->
  103. <option value="Spectral">Spectral</option>
  104. <option value="RdYlGn">RdYlGn</option>
  105. <option value="RdBu">RdBu</option>
  106. <option value="PiYG">PiYG</option>
  107. <option value="PRGn">PRGn</option>
  108. <option value="RdYlBu">RdYlBu</option>
  109. <option value="BrBG">BrBG</option>
  110. <option value="RdGy">RdGy</option>
  111. <option value="PuOr">PuOr</option>
  112. <!-- Palettes qualitatives -->
  113. <option value="Set1">Set1</option>
  114. <option value="Set2">Set2</option>
  115. <option value="Set3">Set3</option>
  116. <option value="Accent">Accent</option>
  117. <option value="Dark2">Dark2</option>
  118. <option value="Pastel1">Pastel1</option>
  119. <option value="Pastel2">Pastel2</option>
  120. <option value="Paired">Paired</option>
  121. </select>
  122. </div>
  123. <!-- Un menu déroulant pour choisir la méthode de classification des données -->
  124. <div class="dropdown mb-2 mr-sm-2">
  125. <select class="form-control" id="classif">
  126. <option value="jenks">Ruptures naturelles (Jenks)</option>
  127. <option value="quantile">Quantilles</option>
  128. <option value="equal_interval">Intervals égaux</option>
  129. </select>
  130. </div>
  131. <!-- Bouton pour envoyer les données au serveur -->
  132. <button id="envoyer" type="button" class="btn btn-primary mb-2">Envoyer</button>
  133. </form>
  134. <br>
  135. <!-- Conteneur de notre carte -->
  136. <div id='map'></div>
  137. <!-- Début du script Javascript -->
  138. <script>
  139. // Création d'un objet classybrew que l'on appelera plus tard
  140. var brew = new classyBrew(); // create brew object
  141. // Initialisation d'une variable
  142. var lege;
  143. // Initialisation de notre carte Leaflet, centrée sur Montréal avec un niveau de zoom de 11
  144. var maCarte = L.map('map').setView([45.52, -73.63], 11);
  145.  
  146. L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  147. maxZoom: 18,
  148. attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  149. '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  150. 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  151. id: 'mapbox/light-v9'
  152. }).addTo(maCarte);
  153. function style(feature) {
  154. return {
  155. weight: .5,
  156. opacity: 1,
  157. color: 'white',
  158. dashArray: '3',
  159. fillOpacity: 0.7,
  160. //fillColor: getColor(feature.properties['var'])
  161. fillColor: brew.getColorInRange(feature.properties['var'])
  162. };
  163. }
  164. function onEachFeature(feature, layer) {
  165. layer.on({
  166. mouseover: surligneEntite,
  167. mouseout: resetStyleEntite,
  168. click: zoomSurEntite
  169. });
  170. }
  171. var info = L.control({
  172. position: 'topright'
  173. });
  174. info.onAdd = function(map) {
  175. this._div = L.DomUtil.create('div', 'info');
  176. this.update();
  177. return this._div;
  178. };
  179. info.update = function(polygone) {
  180. this._div.innerHTML = '<p>' + lege + '</p><hr>' + (polygone ?
  181. 'Aire de diffusion ' + polygone.da_number + ' : <b>' + polygone.var+'</b>' : '<em>Pointez une aire de diffusion</em>');
  182. };
  183. // On ajoute la fenêtre d'information à la carte
  184. info.addTo(maCarte);
  185. // Lorsque le pointeur de la souris survole un polygone, celui adopte un style différent (surligné)
  186. function surligneEntite(e) {
  187. var layer = e.target;
  188. layer.setStyle({
  189. weight: 2,
  190. color: 'white',
  191. dashArray: '',
  192. fillOpacity: 0.5
  193. });
  194. info.update(layer.feature.properties);
  195. }
  196. // Lorsque le pointeur de la souris ne survole plus un polygone, celui reprend son style original
  197. function resetStyleEntite(e) {
  198. var layer = e.target;
  199. poly.resetStyle(layer);
  200. info.update();
  201. }
  202. // Fonction permettant de zoomer sur les polygones lorsque l'on clique dessus
  203. function zoomSurEntite(e) {
  204. var layer = e.target;
  205. maCarte.fitBounds(layer.getBounds());
  206. }
  207. // Récupération des données entrées par l'utilisateur/trice
  208. var btnSubmit = document.getElementById("envoyer")
  209. var inputVarMin = document.getElementById("varMin")
  210. var inputVarMax = document.getElementById("varMax")
  211. var inputVar = document.getElementById("variable")
  212. var inputPal = document.getElementById("palette")
  213. var inputCla = document.getElementById("classif")
  214. // Lorsque le bouton "Envoyer" est cliqué...
  215. btnSubmit.addEventListener("click", function(e) {
  216. // ... les valeurs sélectionnées sont attribuées à des variables que l'on récupérera par la suite
  217. var variable = inputVar.value;
  218. var varMin = parseInt(inputVarMin.value);
  219. var varMax = parseInt(inputVarMax.value);
  220. var palette = inputPal.value;
  221. var classif = inputCla.value;
  222. var table = 'montreal_postgis'; // dans quelle table chercher les données ?
  223. console.log(variable,varMin,varMax,palette,classif,table);
  224. console.log('queryPostgresql.php?table=' + table + '&var=' + variable + '&varMin=' + varMin + '&varMax=' + varMax)
  225. });
  226. </script>
  227. </body>
  228. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!