.. carte hexbin howto


intro

Infos à propos de la carte "hexbin" (leaflet + d3 + nouislider)

des données d'observation (geojson/json) eg: 3x le 12/03 et 1x le 13/03
(je) "préfère" (*) les mettre dans CHAMOIS_DATA2023.js
const json = { "type":"FeatureCollection","features":[ 
{"type":"Feature","properties":{"Date":"12/03/2023"},"geometry":{"type":"Point","coordinates":[7.098282,47.900772]}}, 
{"type":"Feature","properties":{"Date":"12/03/2023"},"geometry":{"type":"Point","coordinates":[7.098282,47.900772]}}, 
{"type":"Feature","properties":{"Date":"12/03/2023"},"geometry":{"type":"Point","coordinates":[7.098282,47.900772]}}, 
{"type":"Feature","properties":{"Date":"13/03/2023"},"geometry":{"type":"Point","coordinates":[7.098244,48.000000]}}
]}
    
- la var qui manque pour moi: le nombre (si 3 chamois, il faut écrire 3x la même info) :-(
mon fic "réel" 306 obs. en 2022 (CHAMOIS_DATA2022.js) fait 33Ko / cela passe pour la taille mais c'est pas beau
- appel des autres infos pour la carto dans: static/init23.js (ou init.js pour 2022)
- appel des propriétés "date" dans: static/sliderImplmentation23.js ...

static/init23.js
(changer ref "center, radius, color, ..." de la carto ...)
logo = garcettiville.png
...

static/sliderImplmentation23.js
const default_start_date = 'Jan 1,2023'
const default_end_date = 'Dec 1,2023'
monthVals = months_short.map(month=>Date.parse(month+" 1, 2023"))

static/time_arrays.js
(changer la langue "jours") ... j'ai pas fait
...

(*) pas de fic json externe ... avantage: fonctionne en local

futur: un truc avec toutes les années; mais le slider ne sera pas pratique

liens

une adaptation de
paulallen.ca/timeline-slider info (en anglais) bien plus détaillé qu'ici
github.com/albertkun/leaflet_hex_timeslider.git
example:
albertkun.github.io/leaflet_hex_timeslider/ Houseless Deaths in Los Angeles 2020

10/2023: maj à faire: "carte stamen" ne fonctionnera plus! pourtant mon fond de carte est chez "arcgisonline.com"
carte (label): stamen.com
stadiamaps.com

 L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
 
//let Stamen_TonerLabels = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}{r}.{ext}', 
  let Stamen_TonerLabels = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_labels/{z}/{x}/{y}{r}.{ext}',