1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
22 | |
23 | |
24 | |
25 | import theEventDispatcher from '../../core/lib/EventDispatcher.js'; |
26 | import theAttributionsUI from '../../uis/attributionsUI/AttributionsUI.js'; |
27 | import theHTMLElementsFactory from '../../core/uiLib/HTMLElementsFactory.js'; |
28 | import MapLayer from '../../data/MapLayer.js'; |
29 | import MapLayerButtonClickEL from './MapLayerButtonClickEL.js'; |
30 | import GeoLocationButtonClickEL from './GeoLocationButtonClickEL.js'; |
31 | import ZoomButtonClickEL from './ZoomButtonClickEL.js'; |
32 | import { ZERO } from '../../main/Constants.js'; |
33 | |
34 | |
35 | |
36 | |
37 | |
38 | |
39 | |
40 | |
41 | |
42 | |
43 | class ViewerLayersToolbar { |
44 | |
45 | |
46 | |
47 | |
48 | |
49 | |
50 | #mapLayersToolbar; |
51 | |
52 | |
53 | |
54 | |
55 | |
56 | |
57 | #mapLayers; |
58 | |
59 | |
60 | |
61 | |
62 | |
63 | constructor ( ) { |
64 | Object.freeze ( this ); |
65 | this.#mapLayers = []; |
66 | const osmMapLayer = new MapLayer ( |
67 | { |
68 | service : 'wmts', |
69 | url : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', |
70 | name : 'OSM - Color', |
71 | toolbar : |
72 | { |
73 | text : 'OSM', |
74 | color : '\u0023ff0000', |
75 | backgroundColor : '\u0023ffffff' |
76 | }, |
77 | providerName : 'OSM', |
78 | providerKeyNeeded : false, |
79 | attribution : '' |
80 | } |
81 | ); |
82 | this.#mapLayers.push ( osmMapLayer ); |
83 | |
84 | } |
85 | |
86 | |
87 | |
88 | |
89 | |
90 | createUI ( ) { |
91 | |
92 | |
93 | this.#mapLayersToolbar = theHTMLElementsFactory.create ( |
94 | 'div', |
95 | { id : 'TravelNotes-ViewerLayersToolbar' }, |
96 | document.body |
97 | ); |
98 | |
99 | |
100 | |
101 | |
102 | theHTMLElementsFactory.create ( |
103 | 'div', |
104 | { |
105 | className : 'TravelNotes-ViewerLayersToolbar-Button', |
106 | title : 'My position', |
107 | textContent : '🌐', |
108 | style : 'color:black;background-color:white' |
109 | }, |
110 | this.#mapLayersToolbar |
111 | ).addEventListener ( 'click', new GeoLocationButtonClickEL ( ), false ); |
112 | |
113 | |
114 | theHTMLElementsFactory.create ( |
115 | 'div', |
116 | { |
117 | className : 'TravelNotes-ViewerLayersToolbar-Button', |
118 | title : 'Zoom on the travel', |
119 | textContent : '🔍', |
120 | style : 'color:black;background-color:white' |
121 | }, |
122 | this.#mapLayersToolbar |
123 | ).addEventListener ( 'click', new ZoomButtonClickEL ( ), false ); |
124 | |
125 | |
126 | const mapLayerButtonClickEL = new MapLayerButtonClickEL ( this.#mapLayers ); |
127 | for ( let mapLayerCounter = 0; mapLayerCounter < this.#mapLayers.length; mapLayerCounter ++ ) { |
128 | const mapLayer = this.#mapLayers [ mapLayerCounter ]; |
129 | theHTMLElementsFactory.create ( |
130 | 'div', |
131 | { |
132 | className : 'TravelNotes-ViewerLayersToolbar-Button', |
133 | title : mapLayer.name, |
134 | dataset : { MapLayerId : mapLayerCounter }, |
135 | textContent : mapLayer.toolbarButtonData.text, |
136 | style : 'color:' + |
137 | mapLayer.toolbarButtonData.color + ';background-color:' + |
138 | mapLayer.toolbarButtonData.backgroundColor |
139 | }, |
140 | this.#mapLayersToolbar |
141 | ).addEventListener ( 'click', mapLayerButtonClickEL, false ); |
142 | } |
143 | } |
144 | |
145 | |
146 | |
147 | |
148 | |
149 | |
150 | setMapLayer ( layerName ) { |
151 | const newLayer = |
152 | ( layerName.match ( /^[0-9]$/ ) ) |
153 | ? |
154 | this.#mapLayers [ Number.parseInt ( layerName ) ] || this.#mapLayers [ ZERO ] |
155 | : |
156 | this.#mapLayers.find ( layer => layer.name === layerName ) || this.#mapLayers [ ZERO ]; |
157 | theEventDispatcher.dispatch ( 'layerchange', { layer : newLayer } ); |
158 | theAttributionsUI.attributions = newLayer.attribution; |
159 | } |
160 | |
161 | |
162 | |
163 | |
164 | |
165 | |
166 | addMapLayers ( jsonLayers ) { |
167 | jsonLayers.forEach ( |
168 | jsonLayer => { |
169 | const newLayer = new MapLayer ( jsonLayer ); |
170 | if ( ! newLayer.providerKeyNeeded ) { |
171 | this.#mapLayers.push ( newLayer ); |
172 | } |
173 | } |
174 | ); |
175 | } |
176 | } |
177 | |
178 | |
179 | |
180 | |
181 | |
182 | |
183 | |
184 | |
185 | const theViewerLayersToolbar = new ViewerLayersToolbar ( ); |
186 | |
187 | export default theViewerLayersToolbar; |
188 | |
189 | |
190 | |