davidbgk
/
larlet-fr-david

<!DOCTYPE html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
  <!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  <meta charset="utf-8">
  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  <!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    GéoCodage
  — David Larlet</title>
  <meta name="description" content="Dans le cadre de mon travail avec le LABRRI, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes locales.">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-02-03.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  
<style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
</style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>GéoCodage</h1>
      <p>Le <time datetime="2024-02-14">14 février 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/02/13/"
           title="Publication précédente : Feutrage">← Précédent</a> •
      
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
        • <a rel="next"
            href="/david/2024/02/15/"
            title="Publication suivante : Licence">Suivant →</a>
      
    </p>
  </nav>
  
<p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
<p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
<p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
<p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
<figure>
    <a href="/static/david/2024/2024-02-14-input-datalist.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-14-input-datalist.png"
            width="1634" height="408"
            srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
            sizes="min(100vw, calc(100vh * 1634 / 408))"
            loading="lazy"
            decoding="async"
            alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
    </a>
    <figcaption>Et&nbsp;voilà!</figcaption>
</figure>
<p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
<p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></p>

  
    <nav>
      <p>
        
          <a href="/david/2024/commun/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#commun</a>
        
          <a href="/david/2024/opendata/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#opendata</a>
        
          <a href="/david/2024/technique/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#technique</a>
        
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/02/13/"
           title="Publication précédente : Feutrage">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/02/15/"
            title="Publication suivante : Licence">Suivant →</a>
      
    </p>
  </nav>

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <label>
                <input type="radio" value="auto" name="chosen-color-scheme" checked>
                Auto
              </label>
              <label>
                <input type="radio" value="dark" name="chosen-color-scheme">
                Foncé
              </label>
              <label>
                <input type="radio" value="light" name="chosen-color-scheme">
                Clair
              </label>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('form')
          form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
          })

          const selectedTheme = localStorage.getItem('theme')
          if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
          }
        }
      }

      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
      window.addEventListener('load', () => {
        let colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
              // WARNING: Safari does not have/supports `conditionText`.
              if (cssRule.conditionText) {
                if (cssRule.conditionText !== prefersColorSchemeDark) {
                  continue
                }
              } else {
                if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                  continue
                }
              }
              mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }
          }

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  <script src="/static/david/js/popper-2.11.8.min.js"></script>
  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  <script>
    tippy('[data-tippy]', {
      content(reference) {
        reference.addEventListener('click', (e) => e.preventDefault())
        return `
        <h3 lang="fr">
          <img src="${reference.dataset.favicon}" loading="lazy">
          <a href="${reference.dataset.source}"
            >Article sur ${reference.dataset.domain}</a></h3>
        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
        <div class="tippy-links" lang="fr">
          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
        </div>
        `
      },
      allowHTML: true,
      interactive: true,
      delay: [150, 700],
      hideOnClick: false
    })
  </script>

  </body>
</html>