API tools faq
paste
rodolpheg

Untitled

rodolpheg
Feb 24th, 2020
246
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.52 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. // Si varMin et varMax ne sont pas spécifiées, leur donner des valeurs par défaut
  224. if (isNaN(varMin)) {
  225. varMin = 0;
  226. }
  227. if (isNaN(varMax)) {
  228. varMax = 10000000000;
  229. }
  230. // Adapter la légende à la variable affichée
  231. if (variable == 'rev') {
  232. lege = 'Revenu médian en $';
  233. } else if (variable == 'pop') {
  234. lege = 'Densité de population en personnes par km carrés';
  235. } else if (variable == 'logmedprop') {
  236. lege = 'Frais de logement mensuels médian (propriétaires) en $';
  237. } else if (variable == 'logmedloc') {
  238. lege = 'Frais de logement mensuels médian (locataires) en $';
  239. }
  240. // Démarrage du processus AJAX de JQuery
  241. $.ajax({
  242. url: 'queryPostgresql.php?table=' + table + '&var=' + variable + '&varMin=' + varMin + '&varMax=' + varMax,
  243. success: function(response) {
  244. try {
  245. maCarte.removeLayer(poly);
  246. maCarte.removeControl(legend);
  247. } catch (err) {
  248. console.log(err)
  249. }
  250. // Nous transformons cette réponse, qui est sous la forme d'un simple texte, en objet JSON
  251. var donnees = JSON.parse(response);
  252. // Classybrew a besoin de l'ensemble des données pour calculer la classification et la palette de couleur
  253. // Créons pour cela une liste vide
  254. var values = []
  255. // passons à travers toutes les données recueillies par notre requête SQL et ajoutons les valeurs une par une
  256. for (let i = 0; i < donnees.features.length; i++) {
  257. values.push(parseFloat(donnees.features[i].properties.var));
  258. };
  259. // Définition des données à classifier
  260. brew.setSeries(values);
  261. // Détermination du nombre de classes
  262. brew.setNumClasses(8);
  263. // Détermination de la palette de couleurs
  264. brew.setColorCode(palette);
  265. // Détermination du type de classification
  266. brew.classify(classif);
  267. // Calcul des classes
  268. var classes = brew.classify(classif);
  269. // Affichage des polygones. Comme nous avons formaté cet objet de manière à ce qu'il correspondent aux standards GeoJSON, nous pouvons directement le lire avec Leaflet
  270. poly = L.geoJSON(donnees, {
  271. style: style, // On applique le style selon la fonction style
  272. onEachFeature: onEachFeature // On applique les "listeners pour ajjouter de l'intération à la carte
  273. });
  274. // ajoutons les polygones à notre carte
  275. poly.addTo(maCarte);
  276. // adapter la vue à l'étendue des polygones affichés
  277. maCarte.fitBounds(poly.getBounds());
  278. // Ajoutons un emplacement pour la légende
  279. legend = L.control({
  280. position: 'bottomright'
  281. });
  282. legend.onAdd = function(map) {
  283. // création d'un élément <div>
  284. var div = L.DomUtil.create('div', 'info legend');
  285. var labels = [];
  286. // itération à travers les classes (calculées par Classybrew) et création des icones sous forme de code HTML
  287. for (var i = 0; i < classes.length - 1; i++) {
  288. //labels.push('<i style="background:' + palette[i] + '"></i>' + classes[i] + ' $ à ' + classes[i + 1] + " $<br>");
  289. labels.push('<i style="background:' + brew.getColorInRange((parseInt(classes[i]) + parseInt(classes[i + 1])) / 2) + '"></i>' + parseInt(classes[i]) + ' à ' + parseInt(classes[i + 1]) + " <br>");
  290. }
  291. // injection du code HTML dans la page
  292. div.innerHTML = lege + '<hr>' + labels.join('<br>');
  293. return div;
  294. };
  295. // maintenant que l'objet "legende" est créé, ajoutons-le à notre carte
  296. legend.addTo(maCarte);
  297. // Ajjout de l'attribution relative aux données
  298. maCarte.attributionControl.addAttribution('Données &copy; <a href="http://statisticscanada.ca/">Statistiques Canada</a>');
  299. }
  300. })
  301. });
  302. </script>
  303. </body>
  304. </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!