]>
Commit | Line | Data |
---|---|---|
44a8080f | 1 | import {Component, EventEmitter,CORE_DIRECTIVES} from 'angular2/angular2'; |
a2d7d6b4 | 2 | import {Headers, Http} from 'angular2/http'; |
cb2c4ba8 JHR |
3 | |
4 | @Component({ | |
28765058 | 5 | selector: 'mou-map', |
cb2c4ba8 | 6 | directives: [CORE_DIRECTIVES], |
0fc3af96 | 7 | events: ['newactive', 'neworg'], |
28765058 | 8 | templateUrl: './components/map/map.html' |
cb2c4ba8 JHR |
9 | }) |
10 | ||
11 | ||
28765058 | 12 | export class Map { |
6ced1bc7 | 13 | |
dd095993 | 14 | map:Object; |
65c7cdf5 JHR |
15 | http:Http; |
16 | LEVEL:number; | |
57a79ad4 | 17 | allLevels:Object; |
65c7cdf5 | 18 | runned:boolean; |
65c7cdf5 | 19 | uprunned:boolean; |
57a79ad4 | 20 | parent:Object; |
59ffa1e6 | 21 | activeId:string; |
57a79ad4 | 22 | currentPos:Object; |
59ffa1e6 | 23 | currentMarker:Object; |
e58627b7 | 24 | isSearched:boolean; |
2e861c75 | 25 | COLORS:Object; |
17574902 | 26 | colornum:number; |
44a8080f JHR |
27 | //popupON:boolean; |
28 | //popup:Object; | |
29 | ||
19468546 | 30 | |
17574902 JHR |
31 | /** |
32 | * initializes all the global variabels | |
33 | * @param http - for http requests | |
34 | */ | |
dd095993 | 35 | constructor(http:Http) { |
59ffa1e6 JHR |
36 | |
37 | this.activeId = null; | |
7ee898bc | 38 | this.newactive = new EventEmitter(); |
ebaf2f58 | 39 | this.neworg = new EventEmitter(); |
f800869b EHF |
40 | this.map = new google.maps.Map(document.getElementById("map"), { |
41 | center: {lat: 0, lng: 0}, | |
42 | zoom: 12, | |
43 | mapTypeControlOptions: { | |
44 | position: google.maps.ControlPosition.BOTTOM_CENTER | |
45 | }, | |
57a79ad4 | 46 | zoomControlOptions: { |
f800869b EHF |
47 | position: google.maps.ControlPosition.LEFT_BOTTOM |
48 | }, | |
49 | streetViewControl: false | |
50 | }); | |
6ced1bc7 JHR |
51 | this.init(); |
52 | this.http = http; | |
44a8080f | 53 | this.LEVEL = 2; |
0d91e9f9 | 54 | this.runned = false; |
57a79ad4 | 55 | this.getLevels(this); |
65c7cdf5 | 56 | this.parent = null; |
a8451d12 | 57 | this.currentPos = null; |
951b1c9f | 58 | this.uprunned = false; |
59ffa1e6 | 59 | this.currentMarker = null; |
e58627b7 | 60 | this.isSearched = false; |
2e861c75 | 61 | this.colornum = 0; |
17574902 | 62 | this.COLORS = ['#ede1bb', '#1d407e', '#ff512e', '#662d47', '#3b3a35', '#419175', '#983e41', '#f3002d', '#b0a875', '#00bfb5', '#926851', '#47a0a4', '#333f50', '#6f007b']; |
44a8080f JHR |
63 | //this.popupON = false; |
64 | //this.popup = null; | |
784566de | 65 | } |
9d471cab | 66 | |
17574902 JHR |
67 | /** |
68 | * Sets the global variabel | |
fb027b00 | 69 | * @param id - id of the active marker |
17574902 | 70 | */ |
57a79ad4 JHR |
71 | setActiveId(id) { |
72 | this.activeId = id; | |
73 | } | |
9992f01a | 74 | |
17574902 JHR |
75 | /** |
76 | * returns the global map | |
77 | * @returns {Object} | |
78 | */ | |
57a79ad4 JHR |
79 | getMap() { |
80 | return this.map; | |
81 | } | |
330dd6d3 | 82 | |
17574902 JHR |
83 | /** |
84 | * returns global http | |
85 | * @returns {Http} | |
86 | */ | |
57a79ad4 JHR |
87 | getHttp() { |
88 | return this.http; | |
89 | } | |
b41d2490 | 90 | |
17574902 JHR |
91 | /** |
92 | * Sets the avctive markers position | |
93 | * @param latlng - position of the active marker | |
94 | */ | |
57a79ad4 JHR |
95 | setcurrentPos(latlng) { |
96 | this.currentPos = latlng; | |
97 | } | |
b41d2490 | 98 | |
17574902 JHR |
99 | /** |
100 | * returns the active markers position | |
101 | * @returns {Object} | |
102 | */ | |
57a79ad4 JHR |
103 | getcurrentPos() { |
104 | return this.currentPos; | |
105 | } | |
9d471cab | 106 | |
17574902 JHR |
107 | /** |
108 | * sets the parent of the avtive marker | |
109 | * @param id - of the parent | |
110 | */ | |
57a79ad4 JHR |
111 | setParent(id) { |
112 | this.parent = id; | |
113 | } | |
59ffa1e6 | 114 | |
44a8080f | 115 | |
17574902 JHR |
116 | /** |
117 | * returns the actice markers parent | |
118 | * @returns {Object} | |
119 | */ | |
57a79ad4 JHR |
120 | getParent() { |
121 | return this.parent; | |
122 | } | |
9992f01a | 123 | |
17574902 JHR |
124 | /** |
125 | * sets a bool value for if the addListner for drilling down has runned (little hack) | |
126 | * @param value - for the runned variabel | |
127 | */ | |
57a79ad4 JHR |
128 | setRunned(value) { |
129 | this.runned = value; | |
130 | } | |
36f8898a | 131 | |
17574902 JHR |
132 | /** |
133 | * sets a bool value for if the addListner for drilling up has runned (little hack) | |
134 | * @param value - for the upRunned variabel | |
135 | */ | |
57a79ad4 JHR |
136 | setupRunned(value) { |
137 | this.uprunned = value; | |
138 | } | |
65c7cdf5 | 139 | |
17574902 JHR |
140 | /** |
141 | * sets the current level in the org.unit hierarchy | |
142 | * @param value - for the level variabel | |
143 | */ | |
57a79ad4 JHR |
144 | setLevel(value) { |
145 | this.LEVEL = value; | |
146 | } | |
9992f01a | 147 | |
17574902 JHR |
148 | /** |
149 | * add level when drilling down (little hack for synconisity) | |
150 | */ | |
57a79ad4 JHR |
151 | addLevel() { |
152 | this.LEVEL++; | |
153 | } | |
65c7cdf5 | 154 | |
17574902 JHR |
155 | /** |
156 | * goes up level when drilling up (little hack for synconisity) | |
157 | */ | |
57a79ad4 JHR |
158 | upLevel() { |
159 | this.LEVEL--; | |
160 | } | |
b470b939 | 161 | |
19468546 JHR |
162 | /** |
163 | * initiates the map with position and zoom | |
164 | */ | |
6ced1bc7 | 165 | init() { |
a2d7d6b4 | 166 | |
6ced1bc7 | 167 | let map = this.map; |
b27f57f1 | 168 | let pos = {lat: 9.1, lng: -11.6}; |
b27f57f1 JHR |
169 | map.setCenter(pos, 0); |
170 | map.setZoom(7); | |
171 | ||
a2d7d6b4 JHR |
172 | } |
173 | ||
19468546 JHR |
174 | /** |
175 | * prints out error messages in the console | |
17574902 | 176 | * @param error - the error massage |
19468546 | 177 | */ |
a2d7d6b4 JHR |
178 | logError(error) { |
179 | console.error(error); | |
180 | ||
cb2c4ba8 | 181 | } |
28765058 | 182 | |
19468546 JHR |
183 | /** |
184 | * gets data from DHIS API | |
185 | * @param query - for what kind of data to retrieve | |
186 | * @param instance - this instance to use | |
17574902 | 187 | * @param isParent - little hack to see if you want to levels up (the parent of a parent) |
19468546 | 188 | */ |
65c7cdf5 JHR |
189 | getData(query, instance, isParent) { |
190 | instance.http.get(dhisAPI + '/api/organisationUnits' + query) | |
6ced1bc7 JHR |
191 | .map(res => res.json()) |
192 | .subscribe( | |
65c7cdf5 | 193 | res => instance.parseResult(res, instance, isParent), |
c7e8b786 | 194 | error => instance.logError(error) |
6ced1bc7 | 195 | ); |
6ced1bc7 JHR |
196 | } |
197 | ||
19468546 | 198 | /** |
17574902 | 199 | * Gets the number of levels in the org.unit hierarchy from DHIS |
19468546 | 200 | */ |
57a79ad4 JHR |
201 | getLevels() { |
202 | this.http.get(dhisAPI + '/api/organisationUnitLevels') | |
203 | .map(res => res.json()) | |
204 | .subscribe( | |
e58627b7 | 205 | res => this.saveLevelTotalandGetdata(res, this), |
57a79ad4 JHR |
206 | err => this.logError(err) |
207 | ); | |
208 | } | |
209 | ||
17574902 JHR |
210 | /** |
211 | * Saves the data from getLevels() in a global variabel and gets all the data from the second level. | |
212 | * @param res - result from getLevels() | |
213 | * @param instance - witch scope we are in | |
214 | */ | |
e58627b7 | 215 | saveLevelTotalandGetdata(res, instance) { |
57a79ad4 | 216 | instance.allLevels = res.pager.total; |
e58627b7 | 217 | instance.getData('?paging=false&level=2', instance, false); |
57a79ad4 JHR |
218 | } |
219 | ||
17574902 JHR |
220 | /** |
221 | * parses all the data from getData() and calles methods based on the incomming data. | |
222 | * @param res - result from getData() | |
223 | * @param instance - witch scope we are in | |
224 | * @param isParent - if it is a parent we have asked for | |
225 | */ | |
65c7cdf5 | 226 | parseResult(res, instance, isParent) { |
65c7cdf5 | 227 | if (isParent) { |
03c7df04 | 228 | instance.setParent(res.parent.id); |
65c7cdf5 | 229 | instance.getData('/' + res.parent.id + '/children', instance, false); |
03c7df04 | 230 | } |
65c7cdf5 | 231 | else { |
951b1c9f JHR |
232 | if (res.organisationUnits) { |
233 | for (let item in res.organisationUnits) { | |
234 | this.getData('/' + res.organisationUnits[item].id, this); | |
235 | ||
b470b939 | 236 | } |
951b1c9f | 237 | instance.setupRunned(false); |
03c7df04 | 238 | instance.setRunned(false); |
951b1c9f JHR |
239 | } else if (!res.displayName && res.children) { |
240 | for (let item in res.children) { | |
241 | if (res.children[item].level == instance.LEVEL) { | |
242 | this.getData('/' + res.children[item].id, this); | |
243 | } | |
244 | } | |
245 | instance.setRunned(false); | |
246 | instance.setupRunned(false); | |
b470b939 | 247 | } |
951b1c9f JHR |
248 | else { |
249 | this.drawPolygon(res, instance); | |
250 | } | |
03c7df04 | 251 | } |
6ced1bc7 | 252 | } |
57a79ad4 | 253 | |
17574902 JHR |
254 | /** |
255 | * creates and draws up the geojson polygons and adds listeners to them. | |
256 | * @param item - an org.unit object | |
257 | * @param instance - witch scope we are in | |
258 | */ | |
65c7cdf5 | 259 | drawPolygon(item, instance) { |
1f8c27ee | 260 | let feature; |
65c7cdf5 | 261 | let incoming:string; |
1f8c27ee | 262 | incoming = item.featureType.toLowerCase(); |
65c7cdf5 | 263 | switch (incoming) { |
1f8c27ee JHR |
264 | case "point": |
265 | feature = 'Point'; | |
266 | break; | |
267 | case "multi_polygon": | |
268 | feature = 'MultiPolygon'; | |
269 | break; | |
65c7cdf5 JHR |
270 | case "polygon": |
271 | feature = 'MultiPolygon'; | |
1f8c27ee JHR |
272 | break; |
273 | default: | |
274 | } | |
2cab9a95 | 275 | |
65c7cdf5 | 276 | if (feature !== undefined) { |
1f8c27ee JHR |
277 | let unit = { |
278 | "type": "Feature", | |
279 | "geometry": { | |
280 | "type": feature, | |
281 | "coordinates": JSON.parse(item.coordinates) | |
282 | }, | |
283 | "properties": { | |
e58627b7 | 284 | "title": item.name, |
1f8c27ee | 285 | "name": item.name, |
98cc809b | 286 | "id": item.id, |
17574902 | 287 | "color": instance.COLORS[instance.colornum], |
15b422d5 | 288 | "icon": null |
65c7cdf5 | 289 | } |
1f8c27ee | 290 | }; |
17574902 | 291 | if (instance.COLORS.length == instance.colornum) { |
2e861c75 | 292 | instance.colornum = 0; |
17574902 JHR |
293 | } else { |
294 | instance.colornum++; | |
295 | } | |
2e861c75 | 296 | |
65c7cdf5 | 297 | if (unit.geometry.type == 'Point') { |
15b422d5 JHR |
298 | unit.properties.icon = { |
299 | path: google.maps.SymbolPath.CIRCLE, | |
b3b5cc9c | 300 | strokeColor: 'black', |
ac22d373 | 301 | scale: 4 |
15b422d5 | 302 | }; |
17574902 | 303 | instance.map.setCenter({lat: unit.geometry.coordinates[1], lng: unit.geometry.coordinates[0]}); |
f3e550a1 | 304 | } |
65c7cdf5 | 305 | |
1f8c27ee | 306 | this.map.data.addGeoJson(unit); |
0fc3af96 | 307 | this.map.data.setStyle(function (feature) { |
15b422d5 JHR |
308 | let color = 'gray'; |
309 | let icon; | |
0fc3af96 EHF |
310 | if (feature.getProperty('icon') !== null) { |
311 | icon = feature.getProperty('icon'); | |
15b422d5 JHR |
312 | } |
313 | color = feature.getProperty('color'); | |
314 | return /** @type {google.maps.Data.StyleOptions} */({ | |
315 | fillColor: color, | |
ac22d373 JHR |
316 | fillOpacity: 0.91, |
317 | strokeColor: 'white', | |
318 | strokeWeight: 2, | |
15b422d5 JHR |
319 | icon: icon |
320 | }); | |
321 | }); | |
44a8080f | 322 | |
17574902 | 323 | if (instance.isSearched) { |
e58627b7 JHR |
324 | instance.seeDetails(); |
325 | } | |
65c7cdf5 | 326 | this.map.data.addListener('click', function (event) { |
cad70644 | 327 | $('#myModal').modal('show'); |
59ffa1e6 JHR |
328 | instance.setActiveId(event.feature.O.id); |
329 | instance.setcurrentPos(event.latLng); | |
951b1c9f | 330 | |
59ffa1e6 | 331 | if (instance.uprunned == false && instance.LEVEL == 2) { |
44a8080f JHR |
332 | document.getElementById("topLevel").style.display = "block"; |
333 | document.getElementById("middleLevel").style.display = "none"; | |
334 | document.getElementById("bottomLevel").style.display = "none"; | |
59ffa1e6 | 335 | } |
57a79ad4 | 336 | else if (instance.runned == false && instance.LEVEL < instance.allLevels) { |
44a8080f JHR |
337 | document.getElementById("topLevel").style.display = "none"; |
338 | document.getElementById("middleLevel").style.display = "block"; | |
339 | document.getElementById("bottomLevel").style.display = "none"; | |
57a79ad4 | 340 | } else if (instance.runned == false && instance.LEVEL <= instance.allLevels) { |
44a8080f JHR |
341 | document.getElementById("topLevel").style.display = "none"; |
342 | document.getElementById("middleLevel").style.display = "none"; | |
343 | document.getElementById("bottomLevel").style.display = "block"; | |
951b1c9f | 344 | |
65c7cdf5 | 345 | instance.setcurrentPos(event.latLng); |
59ffa1e6 | 346 | } |
59ffa1e6 | 347 | }); |
d7f50e3a | 348 | |
19468546 | 349 | //slette ?? §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ |
44a8080f | 350 | /* this.map.data.addListener('mouseover', function (e) { |
17574902 JHR |
351 | if(!instance.popupON) { |
352 | instance.popupON = true; | |
353 | ||
354 | instance.popup = new google.maps.InfoWindow({ | |
355 | content: e.feature.getProperty('name'), | |
356 | position: e.latLng | |
357 | }); | |
358 | instance.popup.open(instance.map); | |
359 | ||
360 | } | |
361 | }); | |
362 | this.map.data.addListener('mouseout', function (event) { | |
363 | instance.popupON = false; | |
364 | instance.popup.open(null); | |
44a8080f JHR |
365 | }); |
366 | */ | |
367 | } | |
368 | } | |
369 | ||
d7f50e3a | 370 | |
44a8080f JHR |
371 | /////////////////////////////////////////////////////////////////////////////////// |
372 | ||
373 | updateAfterAddorEdit(event) { | |
374 | console.log(" nå har jeg updates eller adda" + this.currentMarker); | |
375 | if (this.currentMarker) { | |
376 | this.currentMarker.setMap(null); | |
59ffa1e6 | 377 | } |
44a8080f JHR |
378 | |
379 | let map = this.getMap(); | |
380 | let http = this.getHttp(); | |
381 | ||
382 | ||
383 | map.data.forEach(function (feature) { | |
384 | map.data.remove(feature); | |
385 | }); | |
386 | http.get(dhisAPI + '/api/organisationUnits/' + event) | |
387 | .map(res => res.json()) | |
388 | .subscribe( | |
389 | res => this.updateMap(res, this) | |
390 | ); | |
bf25c5cf | 391 | } |
03c7df04 | 392 | |
44a8080f JHR |
393 | updateMap(res, instance) { |
394 | this.isSearched = false; | |
395 | this.setLevel(res.level); | |
396 | this.setActiveId(res.id); | |
397 | this.setParent(res.parent.id); | |
398 | this.setcurrentPos({lat: JSON.parse(res.coordinates)[1], lng: JSON.parse(res.coordinates)[0]}); | |
399 | ||
400 | instance.getData('/' + res.parent.id + '/children', instance); | |
401 | if (res.coordinates == null || instance.LEVEL == instance.allLevels) { | |
402 | instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id) | |
403 | .map(res => res.json()) | |
404 | .subscribe( | |
405 | res => instance.drawPolygon(res, instance) | |
406 | ); | |
407 | } | |
408 | ||
409 | } | |
410 | ||
411 | ////////////////////////////////////////////////////////////////////////////////////////// | |
17574902 JHR |
412 | /** |
413 | * removes the polygon on current level and calles getData on one level down in the org.unit hierarchy | |
414 | */ | |
415 | drillDown() { | |
59ffa1e6 JHR |
416 | this.closeModal(); |
417 | let map = this.getMap(); | |
418 | let id = this.activeId; | |
419 | let level = this.LEVEL; | |
44a8080f | 420 | let lev = (this.allLevels) - 1; |
59ffa1e6 JHR |
421 | this.setRunned(true); |
422 | this.setParent(id); | |
784566de | 423 | |
59ffa1e6 | 424 | map.data.forEach(function (feature) { |
44a8080f | 425 | if (!(feature.O.id == id && level == lev)) { |
59ffa1e6 | 426 | map.data.remove(feature); |
03c7df04 | 427 | |
59ffa1e6 JHR |
428 | } |
429 | }); | |
03c7df04 | 430 | |
59ffa1e6 JHR |
431 | this.addLevel(); |
432 | this.getData('/' + id + '/children', this); | |
03c7df04 | 433 | |
59ffa1e6 | 434 | } |
bbee9db0 | 435 | |
17574902 JHR |
436 | /** |
437 | *removes the plogons on the current level and calles the get data with tha parents id and set parent true. this to say that we want this parent's parent | |
438 | */ | |
439 | drillUp() { | |
57a79ad4 JHR |
440 | this.setupRunned(true); |
441 | this.upLevel(); | |
442 | let instance = this; | |
443 | this.closeModal(); | |
444 | this.map.data.forEach(function (feature) { | |
445 | instance.map.data.remove(feature); | |
446 | ||
447 | }); | |
e58627b7 | 448 | if (this.currentMarker !== null) { |
57a79ad4 | 449 | this.currentMarker.setMap(null); |
15b422d5 | 450 | } |
57a79ad4 JHR |
451 | let parent = instance.getParent(); |
452 | instance.getData('/' + parent, instance, true); | |
453 | ||
59ffa1e6 JHR |
454 | this.closeModal(); |
455 | } | |
456 | ||
17574902 JHR |
457 | /** |
458 | * focuses map and colors to the clicked marker/polygon and fires an event to sidebar with the id of the marker | |
459 | */ | |
59ffa1e6 | 460 | seeDetails() { |
44a8080f | 461 | console.log("KOM INN HER"); |
59ffa1e6 JHR |
462 | let map = this.getMap(); |
463 | let id = this.activeId; | |
464 | this.closeModal(); | |
465 | map.data.forEach(function (feature) { | |
466 | if (feature.getProperty('id') == id) { | |
467 | feature.setProperty('color', 'red'); | |
b3b5cc9c JHR |
468 | if (feature.getProperty('icon') !== null) { |
469 | feature.O.icon.strokeColor = 'red'; | |
470 | } | |
17574902 | 471 | this.isSearched = false; |
b3b5cc9c JHR |
472 | } |
473 | else { | |
474 | feature.setProperty('color', 'gray'); | |
475 | if (feature.getProperty('icon') !== null) { | |
476 | feature.O.icon.strokeColor = 'black'; | |
477 | } | |
59ffa1e6 JHR |
478 | } |
479 | }); | |
480 | this.newactive.next(this.activeId); | |
6ced1bc7 JHR |
481 | } |
482 | ||
17574902 JHR |
483 | /** |
484 | * gets the position of the clicked position on the map, saves the parent and sends it in an event. | |
485 | */ | |
65c7cdf5 | 486 | addUnit() { |
59ffa1e6 | 487 | this.closeModal(); |
9992f01a | 488 | let pos = this.getcurrentPos(); |
951b1c9f | 489 | let lat = pos.lat(); |
59ffa1e6 | 490 | let lng = pos.lng(); |
59ffa1e6 JHR |
491 | let parent = this.getParent(); |
492 | ||
65c7cdf5 JHR |
493 | let location = {lat: lat, lng: lng}; |
494 | let event = {location, parent}; | |
ebaf2f58 | 495 | this.neworg.next(event); |
0fc3af96 | 496 | this.closeModal(); |
bc2f4c9e | 497 | this.setRunned(false); |
a8451d12 | 498 | } |
dd095993 | 499 | |
17574902 JHR |
500 | /** |
501 | * triggered from an event in search and gets the search object from the DHIS API | |
502 | * then calles mapupdate() | |
503 | * @param event - event from an emitter | |
504 | */ | |
65c7cdf5 | 505 | update(event) { |
44a8080f JHR |
506 | this.newactive.next(event); |
507 | let map = this.getMap(); | |
508 | let http = this.getHttp(); | |
36f8898a | 509 | |
44a8080f JHR |
510 | map.data.forEach(function (feature) { |
511 | map.data.remove(feature); | |
512 | }); | |
513 | http.get(dhisAPI + '/api/organisationUnits/' + event) | |
514 | .map(res => res.json()) | |
515 | .subscribe( | |
516 | res => this.mapUpdate(res, this) | |
517 | ); | |
e58627b7 | 518 | |
7ee898bc | 519 | } |
d647078e | 520 | |
44a8080f | 521 | |
17574902 JHR |
522 | /** |
523 | * updates varabels activeId, level and parent to matche the incomming object and gets all the children on the same level. | |
524 | * Then it calles drawPolygon() | |
525 | * @param res - org.unit object | |
526 | * @param instance | |
527 | */ | |
65c7cdf5 | 528 | mapUpdate(res, instance) { |
d647078e | 529 | this.setLevel(res.level); |
e58627b7 JHR |
530 | this.setActiveId(res.id); |
531 | this.isSearched = true; | |
d647078e | 532 | this.setParent(res.parent.id); |
e58627b7 JHR |
533 | |
534 | instance.getData('/' + res.parent.id + '/children', instance); | |
535 | if (res.coordinates == null || instance.LEVEL == instance.allLevels) { | |
536 | instance.http.get(dhisAPI + '/api/organisationUnits/' + res.parent.id) | |
537 | .map(res => res.json()) | |
538 | .subscribe( | |
539 | res => instance.drawPolygon(res, instance) | |
540 | ); | |
541 | } | |
d647078e JHR |
542 | |
543 | } | |
544 | ||
17574902 JHR |
545 | /** |
546 | * adds a temperary marker so the user can see an update of the latitude and longitude of a marker | |
547 | * @param pos - position for the temp marker | |
548 | */ | |
fa052229 | 549 | tempMarker(pos) { |
44a8080f | 550 | if (this.currentMarker) { |
f09cdf19 | 551 | this.currentMarker.setMap(null); |
44a8080f JHR |
552 | } |
553 | if (pos != null) { | |
554 | let current = {lat: null, lng: null}; | |
f09cdf19 JHR |
555 | current.lat = Math.round(this.getcurrentPos().lat() * 10000) / 10000; |
556 | current.lng = Math.round(this.getcurrentPos().lng() * 10000) / 10000; | |
fb027b00 | 557 | |
44a8080f | 558 | let position = {lat: null, lng: null}; |
f09cdf19 JHR |
559 | position.lat = Math.round(pos.lat * 10000) / 10000; |
560 | position.lng = Math.round(pos.lng * 10000) / 10000; | |
44a8080f | 561 | let color = 'red'; |
f09cdf19 | 562 | if ((current.lat != position.lat) || (current.lng != position.lng)) { |
44a8080f JHR |
563 | color = '#871F78'; |
564 | } | |
f09cdf19 | 565 | let map = this.map; |
44a8080f JHR |
566 | if (this.currentMarker) |
567 | this.currentMarker.setMap(null); | |
b9b9539b | 568 | |
f09cdf19 JHR |
569 | this.currentMarker = new google.maps.Marker({ |
570 | position: pos, | |
571 | map: map, | |
572 | title: 'neworg', | |
573 | icon: { | |
574 | path: google.maps.SymbolPath.CIRCLE, | |
44a8080f | 575 | strokeColor: color, |
f09cdf19 JHR |
576 | scale: 4 |
577 | } | |
578 | }); | |
579 | this.currentMarker.setMap(map); | |
580 | map.panTo(this.currentMarker.getPosition()); | |
fa052229 | 581 | |
44a8080f | 582 | } |
fa052229 | 583 | } |
b3b5cc9c | 584 | |
258519d6 | 585 | |
17574902 JHR |
586 | /** |
587 | * closes the modal box over the map. | |
588 | */ | |
258519d6 | 589 | closeModal() { |
cad70644 | 590 | $("#myModal").modal("hide"); |
258519d6 JHR |
591 | this.setRunned(false); |
592 | } | |
593 | ||
6ced1bc7 | 594 | } |
dd095993 | 595 | |
dd095993 JHR |
596 | |
597 | ||
598 | ||
599 |