Base de carte et de recherche de lieu
This commit is contained in:
commit
1f8f93b411
GPG key ID:
C4B28FD2729941CE
19 changed files with 30054 additions and 0 deletions
18
css/style.css
Normal file
18
css/style.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
body, html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#search-section {
|
||||
margin-left: 50px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
23
index.html
Normal file
23
index.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carte Interhack Camp 2026</title>
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<link rel="stylesheet" href="./js/lib/leaflet/leaflet.css">
|
||||
<script type="module" src="./js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="map"></section>
|
||||
<section id="search-section">
|
||||
<form id="search-area">
|
||||
<label for="search-area-query">Rechercher une zone</label>
|
||||
<input type="search" name="query" id="search-area-query" />
|
||||
<button>Rechercher</button>
|
||||
</form>
|
||||
<ul id="search-result"></ul>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
87
js/index.js
Normal file
87
js/index.js
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import * as L from "./lib/leaflet/leaflet-src.esm.js"
|
||||
import { PlaceDatabase } from "./places.js";
|
||||
|
||||
/** La carte */
|
||||
const map = L.map(document.getElementById("map"))
|
||||
/** La base de données de lieux @type {PlaceDatabase|null} */
|
||||
let places = null
|
||||
/** Le centre de la carte */
|
||||
let map_center = null
|
||||
/** Les bords de la carte */
|
||||
let map_bounds = null
|
||||
|
||||
// CHARGEMENT
|
||||
await Promise.all([
|
||||
PlaceDatabase.createDefault().then(db => places = db),
|
||||
fetch("./couches/centre.geojson").then(res => res.json()).then(geojson => {
|
||||
map_center = L.latLng([...geojson.features[0].geometry.coordinates].reverse())
|
||||
console.log("Centre:", map_center)
|
||||
}),
|
||||
fetch("./couches/emprise.geojson").then(res => res.json()).then(geojson => {
|
||||
let coordinate_list = geojson.features[0].geometry.coordinates[0]
|
||||
let first_point = map.project(L.latLng([...coordinate_list[0]].reverse()))
|
||||
let bounds = L.bounds(first_point, first_point)
|
||||
for(let i = 1; i<coordinate_list.length; i++){
|
||||
let point = map.project([...coordinate_list[i]].reverse())
|
||||
bounds.extend(point)
|
||||
}
|
||||
map_bounds = bounds
|
||||
console.log("Bounds:", map_bounds)
|
||||
}),
|
||||
]);
|
||||
// CHARGEMENT FINI
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map)
|
||||
|
||||
L.tileLayer('./tuiles/{z}/{x}/{y}.png', {
|
||||
minZoom: 14,
|
||||
maxZoom: 23
|
||||
}).addTo(map)
|
||||
|
||||
const geojson_layer = L.geoJSON(null, {
|
||||
//TODO
|
||||
}).addTo(map)
|
||||
|
||||
for(let [feature_id, feature] of Object.entries(places.featuresById)){
|
||||
geojson_layer.addData(feature)
|
||||
}
|
||||
|
||||
map.setMaxBounds(map_bounds)
|
||||
map.setView(map_center, 19, {
|
||||
animate: false,
|
||||
})
|
||||
|
||||
const search_form = document.getElementById("search-area")
|
||||
search_form.elements["query"].addEventListener("change", () => search_form.requestSubmit())
|
||||
search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())
|
||||
|
||||
search_form.addEventListener("submit", e => {
|
||||
e.preventDefault()
|
||||
if(places){
|
||||
let data = new FormData(search_form)
|
||||
|
||||
if(data.get("query")){
|
||||
let resultElements = []
|
||||
|
||||
let search_results = places.search(data.get("query"))
|
||||
console.log("Search results:", search_results)
|
||||
|
||||
for(let result_item of search_results){
|
||||
let el = document.createElement("li")
|
||||
el.textContent = result_item.feature.properties.name+" ("+result_item.ref+")"
|
||||
resultElements.push(el)
|
||||
}
|
||||
|
||||
if(resultElements.length > 0){
|
||||
document.getElementById("search-result").replaceChildren(...resultElements)
|
||||
} else {
|
||||
document.getElementById("search-result").replaceChildren(document.createTextNode("Pas de resultat"))
|
||||
}
|
||||
} else {
|
||||
document.getElementById("search-result").replaceChildren([])
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
BIN
js/lib/leaflet/images/layers-2x.png
Normal file
BIN
js/lib/leaflet/images/layers-2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
js/lib/leaflet/images/layers.png
Normal file
BIN
js/lib/leaflet/images/layers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
BIN
js/lib/leaflet/images/marker-icon-2x.png
Normal file
BIN
js/lib/leaflet/images/marker-icon-2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
js/lib/leaflet/images/marker-icon.png
Normal file
BIN
js/lib/leaflet/images/marker-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
js/lib/leaflet/images/marker-shadow.png
Normal file
BIN
js/lib/leaflet/images/marker-shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
14419
js/lib/leaflet/leaflet-src.esm.js
Normal file
14419
js/lib/leaflet/leaflet-src.esm.js
Normal file
File diff suppressed because it is too large
Load diff
1
js/lib/leaflet/leaflet-src.esm.js.map
Normal file
1
js/lib/leaflet/leaflet-src.esm.js.map
Normal file
File diff suppressed because one or more lines are too long
14512
js/lib/leaflet/leaflet-src.js
Normal file
14512
js/lib/leaflet/leaflet-src.js
Normal file
File diff suppressed because it is too large
Load diff
1
js/lib/leaflet/leaflet-src.js.map
Normal file
1
js/lib/leaflet/leaflet-src.js.map
Normal file
File diff suppressed because one or more lines are too long
661
js/lib/leaflet/leaflet.css
Normal file
661
js/lib/leaflet/leaflet.css
Normal file
|
|
@ -0,0 +1,661 @@
|
|||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Prevents IE11 from highlighting tiles in blue */
|
||||
.leaflet-tile::selection {
|
||||
background: transparent;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer,
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.leaflet-container img.leaflet-tile {
|
||||
/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
|
||||
mix-blend-mode: plus-lighter;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
svg.leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive,
|
||||
svg.leaflet-image-layer.leaflet-interactive path {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover,
|
||||
.leaflet-bar a:focus {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover,
|
||||
.leaflet-control-attribution a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-attribution-flag {
|
||||
display: inline !important;
|
||||
vertical-align: baseline !important;
|
||||
width: 1em;
|
||||
height: 0.6669em;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
white-space: nowrap;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 1px 1px #fff;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 24px 13px 20px;
|
||||
line-height: 1.3;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
min-height: 1px;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 17px 0;
|
||||
margin: 1.3em 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-top: -1px;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
pointer-events: auto;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font: 16px/24px Tahoma, Verdana, sans-serif;
|
||||
color: #757575;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover,
|
||||
.leaflet-container a.leaflet-popup-close-button:focus {
|
||||
color: #585858;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
-ms-zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
||||
/* Printing */
|
||||
|
||||
@media print {
|
||||
/* Prevent printers from removing background-images of controls. */
|
||||
.leaflet-control {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
}
|
||||
6
js/lib/leaflet/leaflet.js
Normal file
6
js/lib/leaflet/leaflet.js
Normal file
File diff suppressed because one or more lines are too long
1
js/lib/leaflet/leaflet.js.map
Normal file
1
js/lib/leaflet/leaflet.js.map
Normal file
File diff suppressed because one or more lines are too long
23
js/lib/lunr/lunr.fr.js
Normal file
23
js/lib/lunr/lunr.fr.js
Normal file
File diff suppressed because one or more lines are too long
58
js/lib/lunr/lunr.js
Normal file
58
js/lib/lunr/lunr.js
Normal file
File diff suppressed because one or more lines are too long
15
js/lib/lunr/lunr.stemmer.support.js
Normal file
15
js/lib/lunr/lunr.stemmer.support.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/* esm.sh - lunr-languages@1.14.0/lunr.stemmer.support */
|
||||
var w=Object.create;var v=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var x=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports);var q=(n,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of j(e))!y.call(n,t)&&t!==r&&v(n,t,{get:()=>e[t],enumerable:!(s=C(e,t))||s.enumerable});return n};var z=(n,e,r)=>(r=n!=null?w(X(n)):{},q(e||!n||!n.__esModule?v(r,"default",{value:n,enumerable:!0}):r,n));var A=x((p,k)=>{(function(n,e){typeof define=="function"&&define.amd?define(e):typeof p=="object"?k.exports=e():e()(n.lunr)})(p,function(){return function(n){n.stemmerSupport={Among:function(e,r,s,t){if(this.toCharArray=function(i){for(var o=i.length,c=new Array(o),a=0;a<o;a++)c[a]=i.charCodeAt(a);return c},!e&&e!=""||!r&&r!=0||!s)throw"Bad Among initialisation: s:"+e+", substring_i: "+r+", result: "+s;this.s_size=e.length,this.s=this.toCharArray(e),this.substring_i=r,this.result=s,this.method=t},SnowballProgram:function(){var e;return{bra:0,ket:0,limit:0,cursor:0,limit_backward:0,setCurrent:function(r){e=r,this.cursor=0,this.limit=r.length,this.limit_backward=0,this.bra=this.cursor,this.ket=this.limit},getCurrent:function(){var r=e;return e=null,r},in_grouping:function(r,s,t){if(this.cursor<this.limit){var i=e.charCodeAt(this.cursor);if(i<=t&&i>=s&&(i-=s,r[i>>3]&1<<(i&7)))return this.cursor++,!0}return!1},in_grouping_b:function(r,s,t){if(this.cursor>this.limit_backward){var i=e.charCodeAt(this.cursor-1);if(i<=t&&i>=s&&(i-=s,r[i>>3]&1<<(i&7)))return this.cursor--,!0}return!1},out_grouping:function(r,s,t){if(this.cursor<this.limit){var i=e.charCodeAt(this.cursor);if(i>t||i<s)return this.cursor++,!0;if(i-=s,!(r[i>>3]&1<<(i&7)))return this.cursor++,!0}return!1},out_grouping_b:function(r,s,t){if(this.cursor>this.limit_backward){var i=e.charCodeAt(this.cursor-1);if(i>t||i<s)return this.cursor--,!0;if(i-=s,!(r[i>>3]&1<<(i&7)))return this.cursor--,!0}return!1},eq_s:function(r,s){if(this.limit-this.cursor<r)return!1;for(var t=0;t<r;t++)if(e.charCodeAt(this.cursor+t)!=s.charCodeAt(t))return!1;return this.cursor+=r,!0},eq_s_b:function(r,s){if(this.cursor-this.limit_backward<r)return!1;for(var t=0;t<r;t++)if(e.charCodeAt(this.cursor-r+t)!=s.charCodeAt(t))return!1;return this.cursor-=r,!0},find_among:function(r,s){for(var t=0,i=s,o=this.cursor,c=this.limit,a=0,l=0,g=!1;;){for(var _=t+(i-t>>1),f=0,h=a<l?a:l,u=r[_],d=h;d<u.s_size;d++){if(o+h==c){f=-1;break}if(f=e.charCodeAt(o+h)-u.s[d],f)break;h++}if(f<0?(i=_,l=h):(t=_,a=h),i-t<=1){if(t>0||i==t||g)break;g=!0}}for(;;){var u=r[t];if(a>=u.s_size){if(this.cursor=o+u.s_size,!u.method)return u.result;var b=u.method();if(this.cursor=o+u.s_size,b)return u.result}if(t=u.substring_i,t<0)return 0}},find_among_b:function(r,s){for(var t=0,i=s,o=this.cursor,c=this.limit_backward,a=0,l=0,g=!1;;){for(var _=t+(i-t>>1),f=0,h=a<l?a:l,u=r[_],d=u.s_size-1-h;d>=0;d--){if(o-h==c){f=-1;break}if(f=e.charCodeAt(o-1-h)-u.s[d],f)break;h++}if(f<0?(i=_,l=h):(t=_,a=h),i-t<=1){if(t>0||i==t||g)break;g=!0}}for(;;){var u=r[t];if(a>=u.s_size){if(this.cursor=o-u.s_size,!u.method)return u.result;var b=u.method();if(this.cursor=o-u.s_size,b)return u.result}if(t=u.substring_i,t<0)return 0}},replace_s:function(r,s,t){var i=t.length-(s-r),o=e.substring(0,r),c=e.substring(s);return e=o+t+c,this.limit+=i,this.cursor>=s?this.cursor+=i:this.cursor>r&&(this.cursor=r),i},slice_check:function(){if(this.bra<0||this.bra>this.ket||this.ket>this.limit||this.limit>e.length)throw"faulty slice operation"},slice_from:function(r){this.slice_check(),this.replace_s(this.bra,this.ket,r)},slice_del:function(){this.slice_from("")},insert:function(r,s,t){var i=this.replace_s(r,s,t);r<=this.bra&&(this.bra+=i),r<=this.ket&&(this.ket+=i)},slice_to:function(){return this.slice_check(),e.substring(this.bra,this.ket)},eq_v_b:function(r){return this.eq_s_b(r.length,r)}}}},n.trimmerSupport={generateTrimmer:function(e){var r=new RegExp("^[^"+e+"]+"),s=new RegExp("[^"+e+"]+$");return function(t){return typeof t.update=="function"?t.update(function(i){return i.replace(r,"").replace(s,"")}):t.replace(r,"").replace(s,"")}}}}})});var m=z(A()),S=m.default??m;export{S as default};
|
||||
/*! Bundled license information:
|
||||
|
||||
lunr-languages/lunr.stemmer.support.js:
|
||||
(*!
|
||||
* Snowball JavaScript Library v0.3
|
||||
* http://code.google.com/p/urim/
|
||||
* http://snowball.tartarus.org/
|
||||
*
|
||||
* Copyright 2010, Oleg Mazko
|
||||
* http://www.mozilla.org/MPL/
|
||||
*)
|
||||
*/
|
||||
//# sourceMappingURL=lunr.stemmer.support.mjs.map
|
||||
229
js/places.js
Normal file
229
js/places.js
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
import lunr from "./lib/lunr/lunr.js"
|
||||
import lunrStemmer from "./lib/lunr/lunr.stemmer.support.js"
|
||||
import lunrFr from "./lib/lunr/lunr.fr.js"
|
||||
lunrStemmer(lunr)
|
||||
lunrFr(lunr)
|
||||
|
||||
const FEATURE_I = Symbol("Feature index")
|
||||
export const FEATURE_ID = Symbol("Feature id")
|
||||
|
||||
/**
|
||||
* Base de données locale des différents endroits du lieu
|
||||
*/
|
||||
export class PlaceDatabase extends EventTarget {
|
||||
|
||||
featuresById = {}
|
||||
fullTextIndex = null
|
||||
|
||||
/**
|
||||
* Résultats d'une recherche dans la base de données
|
||||
* @typedef {Object} SearchResult
|
||||
* @property {number} score Score de match avec la requète (le plus haut est le plus proche)
|
||||
* @property {Object} feature Feature GeoJSON
|
||||
* @property {string} ref Id de la feature GeoJSON
|
||||
*/
|
||||
|
||||
/**
|
||||
* Rechercher un emplacement
|
||||
* @param {string} query Requète textuelle
|
||||
* @returns {SearchResult[]} Résultat de la recherche ordonnée par score (le plus haut en premier)
|
||||
*/
|
||||
search(query){
|
||||
if(!this.fullTextIndex){
|
||||
throw new Error("Full text index not built, please run \"buildIndex()\" function")
|
||||
}
|
||||
let raw_result = this.fullTextIndex.search(`${query}^10 ${query}*^2 *${query}*`)
|
||||
return raw_result.map(it => ({ score: it.score, feature: this.getFeatureById(it.ref), ref: it.ref }))
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir une feature à partir de son identifiant
|
||||
* @param {string} id Identifiant de la feature
|
||||
* @returns {Object|undefined} la feature ou undefined si elle n'a pas été trouvée
|
||||
*/
|
||||
getFeatureById(id){
|
||||
return this.featuresById[id]
|
||||
}
|
||||
|
||||
/**
|
||||
* Options de chargement des données GeoJSON
|
||||
* @typedef {Object} AddFeatureOptions
|
||||
* @property {boolean|undefined} batch Activer le mode "batch" qui se content de charger de d'ajouter les données sans reconstruire les index. Il faudra appeler "buildIndex()" pour reconstruire les index.
|
||||
* @property {string|undefined} idPrefix Prefix des identifiants de feature
|
||||
*/
|
||||
|
||||
/**
|
||||
* Charger et ajouter des données GeoJSON
|
||||
* @param {URL|string} url L'URL d'où doivent être chargées les données
|
||||
* @param {AddFeatureOptions} options Options de chargement des données
|
||||
* @returns {string[]} ids of added features
|
||||
*/
|
||||
async loadGeojson(url, options){
|
||||
let res = await fetch(url)
|
||||
if(!res.ok)
|
||||
throw new Error(`Fail to load data from ${url}: server responded with status ${res.status} ${res.statusText}`)
|
||||
let content = await res.json()
|
||||
return this.addFeature(content, options)
|
||||
}
|
||||
|
||||
/**
|
||||
* @event NewFeatureEvent
|
||||
* @type {Event}
|
||||
* @property {"newfeature"} type
|
||||
* @property {string} ref Identifiant de la feature qui vient d'être ajoutée
|
||||
* @property {object} feature Object GeoJSON de la feature
|
||||
*/
|
||||
|
||||
/**
|
||||
* Ajouter un object GeoJSON a la base de données
|
||||
*
|
||||
* Si vous voulez charger des données depuis une URL, utilisez "loadGeojson"
|
||||
* @see loadGeojson
|
||||
*
|
||||
* @fires NewFeatureEvent Quand une nouvelle feature est ajoutée à la base de données
|
||||
*
|
||||
* @param {Object} geojson Object GeoJSON à ajouter
|
||||
* @param {AddFeatureOptions} options Options d'importation
|
||||
* @returns {string[]} ids of added features
|
||||
*/
|
||||
addFeature(geojson, options){
|
||||
let idPrefix = options.idPrefix || ""
|
||||
|
||||
let all_ids = []
|
||||
|
||||
if(geojson.type == "Feature"){
|
||||
let featureId = geojson?.properties?.id || geojson?.properties?.[FEATURE_I]
|
||||
let full_id = idPrefix+"#"+featureId
|
||||
|
||||
if(this.featuresById[full_id]){
|
||||
console.warn(`Warning: a feature with ID "${full_id}" already exists in database`)
|
||||
}
|
||||
|
||||
geojson[FEATURE_ID] = full_id
|
||||
this.featuresById[full_id] = geojson
|
||||
|
||||
let event = new Event("newfeature")
|
||||
event.ref = full_id
|
||||
event.feature = geojson
|
||||
this.dispatchEvent(event)
|
||||
|
||||
all_ids.push(full_id)
|
||||
|
||||
} else if(geojson.type == "FeatureCollection") {
|
||||
|
||||
if(geojson.name){
|
||||
idPrefix += (idPrefix != "" ? "-" : "")+geojson.name
|
||||
}
|
||||
|
||||
if(geojson?.properties?.[FEATURE_I]){
|
||||
idPrefix += (idPrefix != "" ? "-" : "")+geojson.properties[FEATURE_I]
|
||||
}
|
||||
|
||||
for(let [i, feature] of Object.entries(geojson.features)){
|
||||
|
||||
feature.properties = {
|
||||
...(feature.properties || {}),
|
||||
[FEATURE_I]: i
|
||||
}
|
||||
|
||||
let id = this.addFeature(feature, {
|
||||
...(options || {}),
|
||||
batch: true,
|
||||
idPrefix: idPrefix
|
||||
})
|
||||
|
||||
all_ids.push(id)
|
||||
}
|
||||
|
||||
} else {
|
||||
throw new Error(`Unsupported GsoJSON feature of type "${geojson.type}"`)
|
||||
}
|
||||
|
||||
if(options.batch !== false){
|
||||
this.buildIndex()
|
||||
}
|
||||
|
||||
return all_ids
|
||||
}
|
||||
|
||||
/**
|
||||
* Construire l'index de recherche
|
||||
* @fires "indexbuild" Quand l'index vient d'être (re)construit
|
||||
*/
|
||||
buildIndex(){
|
||||
let database = this;
|
||||
|
||||
this.fullTextIndex = lunr(function(){
|
||||
this.ref("id")
|
||||
this.field("name")
|
||||
this.field("synonyms")
|
||||
|
||||
for(let [id, feature] of Object.entries(database.featuresById)){
|
||||
let synonyms = ""
|
||||
|
||||
if(feature.properties["n couchage"] > 0){
|
||||
synonyms += SLEEPING_SYNONYMS.join(" ")
|
||||
}
|
||||
|
||||
if(feature.properties["toilettes"]){
|
||||
synonyms += " "+TOILETTES_SYNONYMS.join(" ")
|
||||
}
|
||||
|
||||
this.add({
|
||||
id,
|
||||
name: feature.properties.name,
|
||||
synonyms
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
this.dispatchEvent(new Event("indexbuild"))
|
||||
}
|
||||
|
||||
static async createDefault(){
|
||||
let default_database = new PlaceDatabase()
|
||||
|
||||
await Promise.all([
|
||||
default_database.loadGeojson(new URL("../couches/batiments.geojson", import.meta.url), {batch: true}),
|
||||
default_database.loadGeojson(new URL("../couches/piscine.geojson", import.meta.url), {batch: true}),
|
||||
default_database.loadGeojson(new URL("../couches/terrain-de-basket.geojson", import.meta.url), {batch: true}),
|
||||
default_database.loadGeojson(new URL("../couches/pieces-batiments.geojson", import.meta.url), {batch: true}),
|
||||
default_database.loadGeojson(new URL("../couches/camping.geojson", import.meta.url), {batch: true}),
|
||||
])
|
||||
|
||||
default_database.buildIndex()
|
||||
|
||||
return default_database
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const SLEEPING_SYNONYMS = [
|
||||
"dodo",
|
||||
"dortoir",
|
||||
"mimir",
|
||||
"dormir",
|
||||
"lit"
|
||||
]
|
||||
|
||||
const TOILETTES_SYNONYMS = [
|
||||
"caca",
|
||||
"pipi",
|
||||
"cabinets",
|
||||
"water-closet",
|
||||
"latrines",
|
||||
"🚽",
|
||||
"double véssé",
|
||||
"chaise percée",
|
||||
"WC",
|
||||
"waters",
|
||||
"toilettes",
|
||||
"toilette",
|
||||
"chiotte",
|
||||
"chiottes",
|
||||
"le trône",
|
||||
"le trones",
|
||||
"pièce mystère",
|
||||
"backroom",
|
||||
"retailleau"
|
||||
]
|
||||
Loading…
Add table
Reference in a new issue