feat: autocomplétion des adresses et gabarit pour requetage
This commit is contained in:
Pierre Martin
parent
5d706c06a8
commit
e8e1c7420e
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,3 +1,5 @@
|
|||||||
|
build/
|
||||||
|
|
||||||
# ---> Node
|
# ---> Node
|
||||||
# Logs
|
# Logs
|
||||||
logs
|
logs
|
||||||
|
|||||||
245
index.html
Normal file
245
index.html
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<link rel="icon" href="https://via.placeholder.com/70x70" />
|
||||||
|
<link
|
||||||
|
crossorigin="anonymous"
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://unpkg.com/mvp.css"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="description" content="My description" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<title>Ramassage des déchets du Muretain Agglo</title>
|
||||||
|
<script
|
||||||
|
crossorigin="anonymous"
|
||||||
|
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"
|
||||||
|
defer
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<link
|
||||||
|
crossorigin="anonymous"
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://js.arcgis.com/4.18/esri/themes/light/main.css"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<a href="/"
|
||||||
|
><img
|
||||||
|
alt="Logo"
|
||||||
|
src="https://via.placeholder.com/200x70?text=Logo"
|
||||||
|
height="70"
|
||||||
|
/></a>
|
||||||
|
<ul>
|
||||||
|
<li>Menu Item 1</li>
|
||||||
|
<li><a href="#">Menu Item 2</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="#">Dropdown Menu Item</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Sublink with a long name</a></li>
|
||||||
|
<li><a href="#">Short sublink</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<h1><i>Vos</i> modalités de <u>ramassage des déchets</u></h1>
|
||||||
|
<p>
|
||||||
|
D'après votre adresse au sein du
|
||||||
|
<mark>Muretain Agglo</mark>
|
||||||
|
</p>
|
||||||
|
<!-- <br />
|
||||||
|
<p>
|
||||||
|
<a href="#"><i>Italic Link Button</i></a
|
||||||
|
><a href="#"><b>Bold Link Button →</b></a>
|
||||||
|
</p> -->
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main x-data="informationApp()">
|
||||||
|
<hr />
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h2>Trouvez vos modalités de ramassage</h2>
|
||||||
|
</header>
|
||||||
|
<form @submit.prevent="handleSubmit">
|
||||||
|
<label for="address">Votre adresse</label>
|
||||||
|
<input
|
||||||
|
name="address"
|
||||||
|
id="address"
|
||||||
|
type="text"
|
||||||
|
placeholder="5 rue du champ, 31270 Frouzins"
|
||||||
|
size="50"
|
||||||
|
x-model="address"
|
||||||
|
x-on:keyup.debounce="suggest"
|
||||||
|
x-on:change="suggest"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div x-show.transition="suggestions.length">
|
||||||
|
<template
|
||||||
|
x-for="suggestion in suggestions"
|
||||||
|
:key="suggestion.magicKey"
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
<span x-text="suggestion.text"></span>
|
||||||
|
<br />
|
||||||
|
<small
|
||||||
|
><button type="button" @click="acceptSuggestion(suggestion)">
|
||||||
|
Sélectionner
|
||||||
|
</button></small
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section x-show.transition="url !== ''">
|
||||||
|
<header>
|
||||||
|
<h2>Vos modalités</h2>
|
||||||
|
<p><small x-text="address"></small></p>
|
||||||
|
</header>
|
||||||
|
<iframe x-bind:src="url" x-text="url"></iframe>
|
||||||
|
<a x-bind:href="url" x-text="url"></a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<hr />
|
||||||
|
<p>
|
||||||
|
<small>Contact info</small>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function informationApp() {
|
||||||
|
const baseUrl =
|
||||||
|
"https://sig.agglo-muretain.fr/arcgis/rest/services/environnement/Zone_collecte_nov_2020/FeatureServer/0/query?f=json";
|
||||||
|
|
||||||
|
const makeUrl = (point) => {
|
||||||
|
if (!point) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
const req = `&geometryType=esriGeometryPoint&geometry=${point.x},${point.y}`;
|
||||||
|
|
||||||
|
// ??? TODO
|
||||||
|
const around = "&distance=50&units=esriSRUnit_Meter";
|
||||||
|
const resultParams = "&spatialRel=esriSpatialRelContains&outFields=*";
|
||||||
|
|
||||||
|
return baseUrl + req + around + resultParams;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
address: "",
|
||||||
|
url: makeUrl(),
|
||||||
|
suggestions: [],
|
||||||
|
suggest(e) {
|
||||||
|
console.debug("suggest", e, this.address);
|
||||||
|
fetch(
|
||||||
|
`https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=json&text=${encodeURIComponent(
|
||||||
|
this.address
|
||||||
|
)}&maxSuggestions=4&location=%7B%22x%22%3A135161.61179227984%2C%22y%22%3A5382744.926759232%2C%22spatialReference%22%3A%7B%22wkid%22%3A102100%7D%7D&distance=50000`
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((results) => {
|
||||||
|
this.suggestions = results.suggestions ?? [];
|
||||||
|
console.debug("suggestions", this.suggestions);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
acceptSuggestion(suggestion) {
|
||||||
|
console.debug("accepting suggestion", suggestion);
|
||||||
|
this.address = suggestion.text;
|
||||||
|
this.handleSubmit(suggestion.magicKey);
|
||||||
|
},
|
||||||
|
handleSubmit(magicKey) {
|
||||||
|
console.debug("submit called", this.address);
|
||||||
|
fetch(
|
||||||
|
`https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=${encodeURIComponent(
|
||||||
|
this.address
|
||||||
|
)}&f=json&outSR=%7B%22wkid%22%3A102100%7D&outFields=*${
|
||||||
|
magicKey ? "&magicKey=" + magicKey : ""
|
||||||
|
}&distance=50000&location=%7B%22x%22%3A135161.61179227984%2C%22y%22%3A5382744.926759232%2C%22spatialReference%22%3A%7B%22wkid%22%3A102100%7D%7D&maxLocations=1`
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((results) => {
|
||||||
|
console.debug("candidates", results.candidates);
|
||||||
|
this.updateInformationForPlace(results.candidates[0]);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateInformationForPlace(place) {
|
||||||
|
this.address = place.address;
|
||||||
|
this.suggestions = [];
|
||||||
|
this.url = makeUrl(place.location);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
// import { request } from "@esri/arcgis-rest-request";
|
||||||
|
|
||||||
|
// const url =
|
||||||
|
// "https://www.arcgis.com/sharing/rest/content/items/6e03e8c26aad4b9c92a87c1063ddb0e3/data";
|
||||||
|
|
||||||
|
// request(url).then((response) => {
|
||||||
|
// console.log(response); // WebMap JSON
|
||||||
|
// });
|
||||||
|
// import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
|
||||||
|
// import FeatureTable from "@arcgis/core/widgets/FeatureTable";
|
||||||
|
|
||||||
|
// const myFeatureLayer = new FeatureLayer(
|
||||||
|
// "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0",
|
||||||
|
// {
|
||||||
|
// mode: FeatureLayer.MODE_ONDEMAND,
|
||||||
|
// visible: true,
|
||||||
|
// outFields: [
|
||||||
|
// "Collected",
|
||||||
|
// "Status",
|
||||||
|
// "Spp_Code",
|
||||||
|
// "Height",
|
||||||
|
// "Cmn_Name",
|
||||||
|
// "Sci_Name",
|
||||||
|
// "Street",
|
||||||
|
// "Native",
|
||||||
|
// ],
|
||||||
|
// id: "fLayer",
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
|
||||||
|
// const myFeatureTable = new FeatureTable(
|
||||||
|
// {
|
||||||
|
// layer: myFeatureLayer,
|
||||||
|
// outFields: [
|
||||||
|
// "Collected",
|
||||||
|
// "Spp_Code",
|
||||||
|
// "Height",
|
||||||
|
// "Cmn_Name",
|
||||||
|
// "Sci_Name",
|
||||||
|
// "Native",
|
||||||
|
// ],
|
||||||
|
// fieldInfos: [
|
||||||
|
// {
|
||||||
|
// name: "Spp_Code",
|
||||||
|
// alias: "Species Code",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "Cmn_Name",
|
||||||
|
// alias: "Common Name",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: "Sci_Name",
|
||||||
|
// alias: "Scientific Name",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// // map: map,
|
||||||
|
// },
|
||||||
|
// "myTableNode"
|
||||||
|
// );
|
||||||
|
|
||||||
|
// myFeatureTable.startup();
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
2415
package-lock.json
generated
Normal file
2415
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "dechets-agglo",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
|
"start": "snowpack dev",
|
||||||
|
"build": "snowpack build"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"snowpack": "^3.0.0-rc.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@arcgis/core": "^4.18.1",
|
||||||
|
"@esri/arcgis-rest-request": "^2.24.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user