davvalent commited on 2023-03-27 13:18:16
Showing 1 changed files, with 48 additions and 27 deletions.
| ... | ... |
@@ -2,13 +2,15 @@ |
| 2 | 2 |
* Plan interactif du Faubourg à m’lasse (PIFM) |
| 3 | 3 |
* |
| 4 | 4 |
* intégration des données structurées du projet QDMTL |
| 5 |
- * intégration des photograpies d’archives |
|
| 5 |
+ * intégration des photographies d’archives : |
|
| 6 |
+ * Archives de montréal, VM094, SY, SS1, SSS3, C196 |
|
| 6 | 7 |
* intégration du plan d’expropriation du Fabourg à m’lasse |
| 7 | 8 |
* |
| 8 | 9 |
* @author David Valentine <d@ntnlv.ca> |
| 9 |
- * @todo rdfa |
|
| 10 |
+ * @license MIT https://spdx.org/licenses/MIT.html |
|
| 11 |
+ * @todo rdfa for information header |
|
| 10 | 12 |
* @todo loading messages for body tag (chargement) |
| 11 |
- * @todo cache |
|
| 13 |
+ * @todo caching |
|
| 12 | 14 |
* @todo error handling |
| 13 | 15 |
* @todo build process and cp in dist folder for deployment |
| 14 | 16 |
* @todo get rid of warnings liens source (map) |
| ... | ... |
@@ -17,6 +19,10 @@ |
| 17 | 19 |
* @todo geolocalisation : si geojson.io, charger buildings.json |
| 18 | 20 |
* @todo geolocalisation : voir placemark @placemarkio |
| 19 | 21 |
*/ |
| 22 |
+console.log( |
|
| 23 |
+ "%cBienvenue sur le PIFM", |
|
| 24 |
+ "font-family:monospace;font-size:14px;color:darkblue;" |
|
| 25 |
+); |
|
| 20 | 26 |
|
| 21 | 27 |
(async function main() {
|
| 22 | 28 |
|
| ... | ... |
@@ -47,14 +53,14 @@ |
| 47 | 53 |
} |
| 48 | 54 |
} |
| 49 | 55 |
|
| 50 |
- /** SPARQL query */ |
|
| 56 |
+ /** SPARQL query for buildings */ |
|
| 51 | 57 |
const buildingsQuery = "query=" + encodeURIComponent( |
| 52 | 58 |
"PREFIX ecrm:<http://erlangen-crm.org/current/>PREFIX geo:<http://www.opengis.net/ont/geosparql#>SELECT ?a ?b WHERE{?a a <http://onto.qdmtl.ca/E24_Building>;ecrm:P53_has_former_or_current_location ?c.?c ecrm:P168_place_is_defined_by ?d.?d geo:asGeoJSON ?b.}"
|
| 53 | 59 |
); |
| 54 | 60 |
|
| 55 | 61 |
/** |
| 56 | 62 |
* fetching data from triple store |
| 57 |
- * buildings and geographic coordinates |
|
| 63 |
+ * buildings with geographic coordinates |
|
| 58 | 64 |
*/ |
| 59 | 65 |
response = await fetch(tripleStoreEndpointUrl, {
|
| 60 | 66 |
method: "POST", |
| ... | ... |
@@ -64,11 +70,18 @@ |
| 64 | 70 |
}, |
| 65 | 71 |
body: buildingsQuery |
| 66 | 72 |
}); |
| 73 |
+ |
|
| 74 |
+ if(!response.ok){
|
|
| 75 |
+ throw new Error(`An error occurred: ${response.status}`)
|
|
| 76 |
+ } |
|
| 77 |
+ |
|
| 67 | 78 |
const sparqlResponse = await response.json(); |
| 68 | 79 |
|
| 69 |
- if (dev()) { // develop
|
|
| 70 |
- console.log("Dev: sparqlResponse", sparqlResponse);
|
|
| 71 |
- }; |
|
| 80 |
+ console.log( |
|
| 81 |
+ "%c%i bâtiments géolocalisés", |
|
| 82 |
+ "font-family:monospace;font-size:14px;color:darkblue;", |
|
| 83 |
+ sparqlResponse.results.bindings.length |
|
| 84 |
+ ); |
|
| 72 | 85 |
|
| 73 | 86 |
/** |
| 74 | 87 |
* making of geoJSON object |
| ... | ... |
@@ -76,30 +89,20 @@ |
| 76 | 89 |
*/ |
| 77 | 90 |
const geojsonFeatures = (sparqlJson) => {
|
| 78 | 91 |
|
| 79 |
- let featuresArray = []; |
|
| 80 |
- |
|
| 81 |
- sparqlJson.results.bindings.forEach(feature => {
|
|
| 82 |
- |
|
| 83 |
- featuresArray.push({
|
|
| 92 |
+ let featuresArray = sparqlJson.results.bindings.map(feature => {
|
|
| 93 |
+ return {
|
|
| 84 | 94 |
"type": "Feature", |
| 85 | 95 |
"properties": {
|
| 86 | 96 |
"URI": feature.a.value |
| 87 | 97 |
}, |
| 88 | 98 |
"geometry": JSON.parse(feature.b.value) |
| 89 |
- }); |
|
| 99 |
+ } |
|
| 90 | 100 |
}); |
| 91 | 101 |
|
| 92 |
- const geojsonFeatures = {
|
|
| 102 |
+ return {
|
|
| 93 | 103 |
"type": "FeatureCollection", |
| 94 | 104 |
"features": featuresArray |
| 95 | 105 |
}; |
| 96 |
- |
|
| 97 |
- if (dev()) { // develop
|
|
| 98 |
- console.log("Dev geojsonFeatures:", geojsonFeatures);
|
|
| 99 |
- }; |
|
| 100 |
- |
|
| 101 |
- return geojsonFeatures; |
|
| 102 |
- |
|
| 103 | 106 |
}; |
| 104 | 107 |
|
| 105 | 108 |
/** GeoJSON Layer */ |
| ... | ... |
@@ -318,7 +321,6 @@ |
| 318 | 321 |
zoomDelta: 0.5, |
| 319 | 322 |
zoomSnap: 0.5, |
| 320 | 323 |
zoomControl: false, |
| 321 |
- |
|
| 322 | 324 |
layers: [ |
| 323 | 325 |
baseLayer, |
| 324 | 326 |
faubourgLayer, |
| ... | ... |
@@ -350,24 +352,43 @@ |
| 350 | 352 |
|
| 351 | 353 |
})(); |
| 352 | 354 |
|
| 355 |
+ /** récupérer données de géolocalisation */ |
|
| 356 |
+ pifm.on("click", (e) => {
|
|
| 357 |
+ |
|
| 358 |
+ console.log(e.latlng); |
|
| 359 |
+ |
|
| 360 |
+ let coordinates = `[ a ecrm:E53_Place ;\n`; |
|
| 361 |
+ coordinates += ` ecrm:P168_place_is_defined_by [\n`; |
|
| 362 |
+ coordinates += ` a geo:Geometry ;\n`; |
|
| 363 |
+ coordinates += ` geo:asGeoJSON "{\\"type\\": \\"Point\\", \\"coordinates\\": [${e.latlng.lng},${e.latlng.lat}]}"^^geo:geoJSONLiteral\n`
|
|
| 364 |
+ coordinates += ` ]\n`; |
|
| 365 |
+ coordinates += `]`; |
|
| 366 |
+ |
|
| 367 |
+ console.log(coordinates); |
|
| 368 |
+ }) |
|
| 369 |
+ |
|
| 353 | 370 |
if (dev()) {
|
| 354 | 371 |
pifm.on("popupopen", () => {
|
| 355 |
- console.log("Dev: Message fired on POPUP OPENING");
|
|
| 372 |
+ devConsole("Dev: Message fired on POPUP OPENING");
|
|
| 356 | 373 |
}); |
| 357 | 374 |
pifm.on("popupclose", (e) => {
|
| 358 |
- console.log("Dev CLOSE: Message fired on pop-up closing", e);
|
|
| 375 |
+ devConsole("Dev CLOSE: Message fired on pop-up closing", e);
|
|
| 359 | 376 |
}); |
| 360 |
- pifm.on('click', (e) => console.log("EVENT: click on map", e));
|
|
| 361 | 377 |
}; |
| 362 | 378 |
|
| 363 | 379 |
})(); |
| 364 | 380 |
|
| 365 | 381 |
/** |
| 366 | 382 |
* dev env tester |
| 367 |
- * @returns boolean |
|
| 368 | 383 |
*/ |
| 369 | 384 |
function dev() {
|
| 370 | 385 |
return (location.host === "localhost" || location.host === "127.0.0.1") |
| 371 | 386 |
? true |
| 372 | 387 |
: false; |
| 373 | 388 |
} |
| 389 |
+function devConsole(log) {
|
|
| 390 |
+ console.log( |
|
| 391 |
+ `%c${log}: `,
|
|
| 392 |
+ "font-family:monospace;color:darkblue;", |
|
| 393 |
+ ); |
|
| 394 |
+} |
|
| 374 | 395 |
\ No newline at end of file |
| 375 | 396 |