Refactorisation (e2dfc2c) - faubourg-carte.git

js/main.js

@@ -1,57 +1,55 @@
 /**
- * Plan d'expropriation et photographies du Faubourg à m'lasse
+ * Le Faubourg à m’lasse en ligne (FML)
+ * 
+ * Plan interactif du Faubourg à m’lasse (secteur Radio-Canada) intégrant des données
+ * structurées, des photograpies d’archives, des cartes historiques et d’autres données.
+ *
+ * @requires module:leaflet
+ * @author David Valentine <d@ntnlv.ca>
  */
 
+/**
+ * Mapbox config
+ * @todo encode access token
+ */ 
+const mapBoxURL = "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
+mapBoxConfig = {
+  attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>, Archives de Montréal",
+  id: "mapbox/streets-v11",
+  accessToken: "pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg"
+};
+
 (async () => {
 
   /**
    * Télécharger données (requête http)
    * Retourner application/geo+json content type
    * @todo voir https://geojson.org/geojson-ld/
+   * @todo voir linked places format
    */
   const response = await fetch("./buildings.json"),
   geojsonFeatures = await response.json(),
 
-  /**
-   * Mapbox tiles
-   * @todo encode access token
-   */ 
-  mapbox = L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
-    attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>, Archives de Montréal",
+  /** Base Layer */
+  baseLayer = L.tileLayer("https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
+  attribution: "Map data &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, Imagery © Google, Archives de Montréal",
     maxZoom: 20,
-    id: "mapbox/streets-v11",
-    tileSize: 512,
-    zoomOffset: -1,
-    accessToken: "pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg"
+    tileSize: 256
   }),
 
-  /**
-   * Données de la couche du plan d'expropriation
-   * @todo Tuiles
-   */ 
-  imageUrl = "img/plan-fond-transparent-min.png",
-  imageBounds = [
-    [45.5155088875666, -73.55432183482827],
-    [45.52127103906887, -73.54793549518355]
-  ],
-
-  // Couche du plan
-  plan = L.imageOverlay(imageUrl, imageBounds, {
-    opacity: 0.7,
-    alt: "Plan d'expropriation du Faubourg à M'lasse"
+  /** Faubourg Layer */ 
+   faubourgLayer = L.tileLayer("https://ntnlv.ca/faubourg/tiles/{z}/{x}/{y}.png", {
+    maxZoom: 20,
+    tileSize: 256,
+    opacity: 1
   }),
 
-  // Instantiation de la carte
-  mlasse = L.map("map", {
-    layers: [mapbox, plan]
-  }).setView([45.51823567357893, -73.55085910368373], 18),
-
-  // Couche GeoJSON
+  /** GeoJSON Layer */
   geoJSON = L.geoJSON(geojsonFeatures, {
     onEachFeature: (feature, layer) => {
       if (feature.properties) {
         const informationsPopUp = `
-          <b>Informations</b>
+          <b>${feature.properties["appellation"]}</b>
           <ul>
             <li>${feature.properties["appellation"]}</li>
             <li>${feature.properties["rdfs:label"]}</li>
@@ -64,17 +62,40 @@
     }
   }),
 
-  // Contrôles
+  /** Controls */
   overlayMaps = {
-    "<span class=\"controles\">Plan d'expropriation</span>": plan,
-    "<span class=\"controles\">Institutions</span>": geoJSON/*,
-    "<span class=\"controles\">Utilisation du sol</span>": foo,
-    "<span class=\"controles\">Photographies aériennes des archives</span>": foo,
-    "<span class=\"controles\">Plan d'assurance</span>": foo,*/
-  };
+    "<span class=\"controles\">Plan d'expropriation</span>": faubourgLayer,
+    "<span class=\"controles\"></span>": geoJSON,
+  },
+
+  /**
+   * Overlay Map
+   * @deprecated
+   */
+  imageUrl = "img/plan-fond-transparent-min.png",
+  imageBounds = [
+    [45.5155088875666, -73.55432183482827],
+    [45.52127103906887, -73.54793549518355]
+  ],
+  plan = L.imageOverlay(imageUrl, imageBounds, {
+    opacity: 1,
+    alt: "Plan d'expropriation du Faubourg à M'lasse"
+  }),
+
+  /** Instantiation du plan */
+  planDuFaubourg = L.map("map", {
+    center: [45.51823567357893, -73.55085910368373],
+    zoom: 17.5,
+    minZoom: 15,
+    zoomDelta: 0.5,
+    layers: [
+      baseLayer,
+      faubourgLayer
+    ]
+  });
 
-  L.control.layers(null, overlayMaps).addTo(mlasse);
-  geoJSON.addTo(mlasse);
+  L.control.layers(null, overlayMaps).addTo(planDuFaubourg);
+  geoJSON.addTo(planDuFaubourg);
 
 })();
 


...	...	@@ -1,57 +1,55 @@
1	1	/**
2		- * Plan d'expropriation et photographies du Faubourg à m'lasse
	2	+ * Le Faubourg à m’lasse en ligne (FML)
	3	+ *
	4	+ * Plan interactif du Faubourg à m’lasse (secteur Radio-Canada) intégrant des données
	5	+ * structurées, des photograpies d’archives, des cartes historiques et d’autres données.
	6	+ *
	7	+ * @requires module:leaflet
	8	+ * @author David Valentine <d@ntnlv.ca>
3	9	*/
4	10
	11	+/**
	12	+ * Mapbox config
	13	+ * @todo encode access token
	14	+ */
	15	+const mapBoxURL = "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
	16	+mapBoxConfig = {
	17	+ attribution: "Map data © <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>, Archives de Montréal",
	18	+ id: "mapbox/streets-v11",
	19	+ accessToken: "pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg"
	20	+};
	21	+
5	22	(async () => {
6	23
7	24	/**
8	25	* Télécharger données (requête http)
9	26	* Retourner application/geo+json content type
10	27	* @todo voir https://geojson.org/geojson-ld/
	28	+ * @todo voir linked places format
11	29	*/
12	30	const response = await fetch("./buildings.json"),
13	31	geojsonFeatures = await response.json(),
14	32
15		- /**
16		- * Mapbox tiles
17		- * @todo encode access token
18		- */
19		- mapbox = L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
20		- attribution: "Map data © <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, Imagery © <a href=\"https://www.mapbox.com/\">Mapbox</a>, Archives de Montréal",
	33	+ /** Base Layer */
	34	+ baseLayer = L.tileLayer("https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
	35	+ attribution: "Map data © <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors, Imagery © Google, Archives de Montréal",
21	36	maxZoom: 20,
22		- id: "mapbox/streets-v11",
23		- tileSize: 512,
24		- zoomOffset: -1,
25		- accessToken: "pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg"
	37	+ tileSize: 256
26	38	}),
27	39
28		- /**
29		- * Données de la couche du plan d'expropriation
30		- * @todo Tuiles
31		- */
32		- imageUrl = "img/plan-fond-transparent-min.png",
33		- imageBounds = [
34		- [45.5155088875666, -73.55432183482827],
35		- [45.52127103906887, -73.54793549518355]
36		- ],
37		-
38		- // Couche du plan
39		- plan = L.imageOverlay(imageUrl, imageBounds, {
40		- opacity: 0.7,
41		- alt: "Plan d'expropriation du Faubourg à M'lasse"
	40	+ /** Faubourg Layer */
	41	+ faubourgLayer = L.tileLayer("https://ntnlv.ca/faubourg/tiles/{z}/{x}/{y}.png", {
	42	+ maxZoom: 20,
	43	+ tileSize: 256,
	44	+ opacity: 1
42	45	}),
43	46
44		- // Instantiation de la carte
45		- mlasse = L.map("map", {
46		- layers: [mapbox, plan]
47		- }).setView([45.51823567357893, -73.55085910368373], 18),
48		-
49		- // Couche GeoJSON
	47	+ /** GeoJSON Layer */
50	48	geoJSON = L.geoJSON(geojsonFeatures, {
51	49	onEachFeature: (feature, layer) => {
52	50	if (feature.properties) {
53	51	const informationsPopUp = `
54		- <b>Informations</b>
	52	+ <b>${feature.properties["appellation"]}</b>
55	53	<ul>
56	54	<li>${feature.properties["appellation"]}</li>
57	55	<li>${feature.properties["rdfs:label"]}</li>
...	...	@@ -64,17 +62,40 @@
64	62	}
65	63	}),
66	64
67		- // Contrôles
	65	+ /** Controls */
68	66	overlayMaps = {
69		- "<span class=\"controles\">Plan d'expropriation</span>": plan,
70		- "<span class=\"controles\">Institutions</span>": geoJSON/*,
71		- "<span class=\"controles\">Utilisation du sol</span>": foo,
72		- "<span class=\"controles\">Photographies aériennes des archives</span>": foo,
73		- "<span class=\"controles\">Plan d'assurance</span>": foo,*/
74		- };
	67	+ "<span class=\"controles\">Plan d'expropriation</span>": faubourgLayer,
	68	+ "<span class=\"controles\"></span>": geoJSON,
	69	+ },
	70	+
	71	+ /**
	72	+ * Overlay Map
	73	+ * @deprecated
	74	+ */
	75	+ imageUrl = "img/plan-fond-transparent-min.png",
	76	+ imageBounds = [
	77	+ [45.5155088875666, -73.55432183482827],
	78	+ [45.52127103906887, -73.54793549518355]
	79	+ ],
	80	+ plan = L.imageOverlay(imageUrl, imageBounds, {
	81	+ opacity: 1,
	82	+ alt: "Plan d'expropriation du Faubourg à M'lasse"
	83	+ }),
	84	+
	85	+ /** Instantiation du plan */
	86	+ planDuFaubourg = L.map("map", {
	87	+ center: [45.51823567357893, -73.55085910368373],
	88	+ zoom: 17.5,
	89	+ minZoom: 15,
	90	+ zoomDelta: 0.5,
	91	+ layers: [
	92	+ baseLayer,
	93	+ faubourgLayer
	94	+ ]
	95	+ });
75	96
76		- L.control.layers(null, overlayMaps).addTo(mlasse);
77		- geoJSON.addTo(mlasse);
	97	+ L.control.layers(null, overlayMaps).addTo(planDuFaubourg);
	98	+ geoJSON.addTo(planDuFaubourg);
78	99
79	100	})();
80	101
81	102