feat: autocomplétion des adresses et gabarit pour requetage
Pierre Martin
3 years ago
parent
5d706c06a8
commit
e8e1c7420e
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -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