source: gs3-extensions/map-editor/DrawingManager/checkpoints-singlefile/index backup v18.html@ 32709

Last change on this file since 32709 was 32709, checked in by ak19, 5 years ago

Jump-start to the map-editor extension, which takes account of the 21 previous check-point versions.
File size: 19.2 KB
Line 
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Drawing Tools</title>
5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
6 <meta charset="utf-8">
7 <style>
8 /* Always set the map height explicitly to define the size of the div
9 * element that contains the map. */
10 #map {
11 height: 83%;
12 width: 90;
13 float: bottom;
14 clear: both;
15 }
16 /* Optional: Makes the sample page fill the window. */
17 html, body {
18 height: 100%;
19 width: 99%;
20 margin: 0;
21 padding: 0;
22
23 }
24
25 #DeleteButtons{
26 display: inline-block;
27 float: left;
28 padding-left: 10px;
29 padding-top: 5px;
30 width: 100%
31
32 }
33
34 #LineThickness{
35 display: inline-block;
36 float: left;
37 padding-left: 10px;
38 padding-top: 5px;
39
40 }
41
42 #ColourOpacity{
43 display: inline-block;
44 float: left;
45 padding-left: 10px;
46 padding-top: 5px;
47
48 }
49
50 #buttons3{
51 display: inline-block;
52 float: left;
53 padding-left: 10px;
54 padding-top: 5px;
55
56 }
57
58 #FillColour {
59 display: inline-block;
60 float: left;
61 padding-left: 10px;
62 padding-top: 5px;
63 }
64
65 #color-palette1 {
66 clear: both;
67 }
68
69 .color-buttons1 {
70 width: 14px;
71 height: 14px;
72 font-size: 0;
73 margin: 2px;
74 float: left;
75 cursor: pointer;
76 }
77
78
79 </style>
80 </head>
81 <body>
82 <div id = "DeleteButtons">
83 <button onclick="removeLine()" accesskey="z">Delete Last</button>
84 <button onclick="deleteAllShape()" accesskey="c">Clear All</button>
85 <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button>
86 <button onclick="polygonGetPath()" accesskey="n">Get Path</button>
87 <button onclick="undoMovement()" accesskey="n">Undo</button>
88 <button onclick="redoMovement()" accesskey="n">Redo</button>
89
90 </div>
91
92 <div id = "LineThickness">
93 <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange"> </p>
94 <p>Value: <span id="thicknessRangeVal"></span></p>
95 </div>
96
97 <div id = "ColourOpacity">
98 <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity"> </p>
99 <p>Value: <span id="opacityRangeVal"></span></p>
100 </div>
101
102
103
104 <div id="FillColour">
105 <p> Fill Colour:</p> <div id="color-palette1"></div>
106 </div>
107
108
109
110 <div id="map"></div>
111
112 <script>
113 var debug = false;
114
115 var redoPressed = false;
116 var undoPressed = 0;
117 var shiftKeyPressed = false;
118 var mousedDownFired = false;
119
120
121 var selectedShapesLog = {
122 _selectedShapes: "",
123 _shiftKeyPressed: ""
124
125 }
126 var prevEdge = {
127 east: "",
128 north: "",
129 south: "",
130 west: ""
131 }
132 var nextEdge = {
133 east: "",
134 north: "",
135 south: "",
136 west: ""
137 }
138 var prevVertex = {
139 lat: "",
140 lng: ""
141 };
142 var nextVertex = {
143 lat: "",
144 lng: ""
145 };
146 var prevShape = [];
147 var nextShape = [];
148 var prevLog = [];
149 var nextLog = [];
150 var dragged = 0;
151 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
152 var selectedColor;
153 var colorButtons = {};
154 var thicknessValue = 1;
155 var opacityValue = 0.4;
156 var polyOptions = {
157 fillColor: '#CA4A2F',
158 strokeWeight: thicknessValue,
159 fillOpacity: opacityValue,
160 editable: true,
161 draggable: true,
162 geodesic: false,
163 };
164
165 var overlays = [];
166 var drawingManager;
167 var selectedShape;
168 var selectedShapes = [];
169
170
171 //Update thickness
172 var thicknessSlider = document.getElementById("thicknessRange");
173 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
174 thicknessSliderOutput.innerHTML = thicknessSlider.value / 20;
175
176 thicknessSlider.oninput = function () {
177 thicknessSliderOutput.innerHTML = this.value / 20;
178 thicknessValue = this.value / 20;
179 polyOptions.strokeWeight = thicknessValue;
180 setSelectedThickness(thicknessValue);
181 }
182
183 //Update opacity
184 var opacitySlider = document.getElementById("colourOpacity");
185 var opacitySliderOutput = document.getElementById("opacityRangeVal");
186 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
187
188 opacitySlider.oninput = function () {
189 opacityValue = this.value / 100;
190 polyOptions.fillOpacity = opacityValue;
191 opacitySliderOutput = opacityValue;
192 opacityRangeVal.innerHTML = "% " + Math.round(opacitySliderOutput * 100);
193 setSelectedOpacity(opacityValue);
194 }
195
196 ////////////////////////////////////////////////////////////////////////////////////////
197 function makeColorButton(color) {
198 var button = document.createElement('span');
199 button.className = 'color-buttons1';
200 button.style.backgroundColor = color;
201 google.maps.event.addDomListener(button, 'click', function () {
202 selectColor(color);
203 setSelectedShapeColor(color);
204 });
205 return button;
206 }
207 function buildColorPalette() {
208 var colorPalette = document.getElementById('color-palette1');
209 for (var i = 0; i < colors.length; ++i) {
210 var currColor = colors[i];
211 var colorButton = makeColorButton(currColor);
212 colorPalette.appendChild(colorButton);
213 colorButtons[currColor] = colorButton;
214 }
215 selectColor(colors[0]);
216 };
217 function selectColor(color) {
218 selectedColor = color;
219 for (var i = 0; i < colors.length; ++i) {
220 var currColor = colors[i];
221 colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
222 }
223
224 // Retrieves the current options from the drawing manager and replaces the
225 // stroke or fill color as appropriate.
226 var polylineOptions = drawingManager.get('polylineOptions');
227 polylineOptions.strokeColor = color;
228 drawingManager.set('polylineOptions', polylineOptions);
229
230 var rectangleOptions = drawingManager.get('rectangleOptions');
231 rectangleOptions.fillColor = color;
232 drawingManager.set('rectangleOptions', rectangleOptions);
233
234 var circleOptions = drawingManager.get('circleOptions');
235 circleOptions.fillColor = color;
236 drawingManager.set('circleOptions', circleOptions);
237
238 var polygonOptions = drawingManager.get('polygonOptions');
239 polygonOptions.fillColor = color;
240 drawingManager.set('polygonOptions', polygonOptions);
241 }
242
243 function initMap() {
244
245 var map = new google.maps.Map(document.getElementById('map'), {
246 center: {
247 lat: -34.397,
248 lng: 150.644
249 },
250 zoom: 2,
251 //mapTypeId: 'map'
252
253 });
254
255 drawingManager = new google.maps.drawing.DrawingManager({
256 drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
257 drawingControl: true,
258 drawingControlOptions: {
259 position: google.maps.ControlPosition.TOP_CENTER,
260 drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
261 },
262 markerOptions: {
263 draggable: true
264 },
265 circleOptions: polyOptions,
266 polylineOptions: polyOptions,
267 polygonOptions: polyOptions,
268 rectangleOptions: polyOptions,
269 });
270
271 drawingManager.setMap(map);
272
273 //overlays.push(event.overlay); // store reference to added overlay
274 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
275 overlays.push(e.overlay); // store reference to added overlay
276 var newShape = e.overlay;
277 newShape.type = e.type;
278
279 if (e.type !== google.maps.drawing.OverlayType.MARKER) {
280
281 // Switch back to non-drawing mode after drawing a shape.
282 //drawingManager.setDrawingMode(null);
283
284 // Add an event listener that selects the newly-drawn shape when the user
285 // mouses down on it.
286 google.maps.event.addListener(newShape, 'click', function (e) {
287
288 vertexAndPolyDel(e, newShape);
289 mousedDownFired = false;
290 return;
291
292 });
293
294 //Stores past event information
295 google.maps.event.addListener(newShape, 'dragstart', function () {
296 //console.log("Drag Start");
297 if (selectedShape) {
298 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
299 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
300
301 if (polyL || polyG) {
302
303 var latLngi = []
304 var lati,
305 lngi;
306 for (var i = 0; i < selectedShape.getPath().length; i++) {
307 lati = selectedShape.getPath().getAt(i).lat();
308 lngi = selectedShape.getPath().getAt(i).lng();
309 //console.log("Vertex number",i, "'s latitude is", lati, "and longitude is", lngi);
310 prevVertex = {
311 lat: lati,
312 lng: lngi
313 };
314 latLngi.push(prevVertex);
315 }
316 prevShape.push("dragged", selectedShape.type, latLngi);
317
318
319 } else {
320 //east is: ea.l
321 //north is: la.l
322 //southt is: la.j
323 //west is: ea.j
324 prevEdge = {
325 east: selectedShape.getBounds().ea.l,
326 north: selectedShape.getBounds().la.l,
327 south: selectedShape.getBounds().la.j,
328 west: selectedShape.getBounds().ea.j
329 }
330
331
332
333 prevShape.push("dragged", selectedShape.type, prevEdge);
334
335
336 }
337
338
339
340 prevLog.push(prevShape);
341 prevShape = [];
342 nextLog = [];
343 console.log("drag start ", prevLog);
344 }
345 });
346
347 //Store information after the event ends
348 google.maps.event.addListener(newShape, 'dragend', function () {
349 //console.log("Drag End");
350 if (selectedShape) {
351 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
352 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
353
354 if (polyL || polyG) {
355
356 var latLngi = []
357 var lati,
358 lngi;
359
360 for (var i = 0; i < selectedShape.getPath().length; i++) {
361 lati = selectedShape.getPath().getAt(i).lat();
362 lngi = selectedShape.getPath().getAt(i).lng();
363 //console.log("Vertex number",i, "'s latitude is", lati, "and longitude is", lngi);
364 nextVertex = {
365 lat: lati,
366 lng: lngi
367 };
368 latLngi.push(nextVertex);
369 }
370 nextShape.push("dragged", selectedShape.type, latLngi);
371 } else {
372
373 nextEdge.east = selectedShape.getBounds().ea.l;
374 nextEdge.north = selectedShape.getBounds().la.l;
375 nextEdge.south = selectedShape.getBounds().la.j;
376 nextEdge.west = selectedShape.getBounds().ea.j;
377
378
379 nextShape.push("dragged", selectedShape.type, nextEdge);
380 }
381
382 nextLog.push(nextShape);
383 nextShape = [];
384 console.log("drag end ", nextLog);
385 //console.log("Next Array Length",nextLog.length);
386 }
387 });
388
389 //Add an event listener to select a shape if the mouse hovers over it
390 google.maps.event.addListener(newShape, 'mousedown', function (e) {
391 if (drawingManager.drawingMode == null) {
392 mousedDownFired = true;
393 // console.log("MOUSDOWN ", e);
394
395 setSelection(newShape, e);
396 }
397 });
398 setSelection(newShape, e);
399 } else {
400 //cLICK EVENT IF A MARKER IS CREATED
401 google.maps.event.addListener(newShape, 'click', function (e) {
402 setSelection(newShape, e);
403 });
404 setSelection(newShape, e);
405 }
406 });
407
408 //Deletes a vertex if clicked on it
409 function vertexAndPolyDel(e, newShape) {
410 var vertex = e.vertex;
411
412 if (e.vertex !== undefined) {
413 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
414 var path = newShape.getPaths().getAt(e.path);
415 path.removeAt(e.vertex);
416 if (path.length < 3) {
417 newShape.setMap(null);
418 }
419 }
420 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
421 var path = newShape.getPath();
422 path.removeAt(e.vertex);
423 if (path.length < 2) {
424 newShape.setMap(null);
425 }
426 }
427 }
428
429 //if(mousedDownFired == false)
430 //{
431 //setSelection(newShape, vertex);
432 //mousedDownFired = false;
433 //return;
434 //}
435 }
436
437 function clearSelection() {
438 if (selectedShape) {
439 if (selectedShape.type !== 'marker') {
440 selectedShape.setEditable(false);
441 if (shiftKeyPressed == false) {
442 for (var i = 0; i < selectedShapes.length; i++) {
443 selectedShapes[i].setEditable(false);
444 }
445 selectedShapes = [];
446 }
447 }
448
449 selectedShape = null;
450 }
451 }
452 var i = 0;
453
454 //Set selection for the selected overlay
455 function setSelection(shape, e) {
456 if (shape.type !== 'marker') {
457 if (shiftKeyPressed == false) {
458 if (e.vertex == undefined) {
459 clearSelection();
460 shape.setEditable(true);
461 }
462 }
463 if (selectedShapes.includes(shape)) {
464
465 //shape.setEditable(false);
466 const index = selectedShapes.indexOf(shape);
467 selectedShapes.splice(index, 1);
468 } else {
469 shape.setEditable(true);
470 selectedShapes.push(shape);
471 }
472
473 if (debug) {
474 console.log(" len = " + selectedShapes.length);
475 }
476 //Send the values to be updated
477 var thi = shape.strokeWeight;
478 var opa = shape.fillOpacity;
479 var fCol = shape.fillColor;
480 var sCol = shape.strokeColor;
481 updateMenuValues(thi, opa, fCol, sCol);
482
483 } else if (shape.type == 'marker') {
484 clearSelection();
485 }
486
487 selectedShape = shape;
488
489 selectedShapesLog = {
490 _selectedShapes: selectedShapes,
491 _shiftKeyPressed: shiftKeyPressed
492 }
493
494 //prevLog.push(selectedShapesLog);
495
496 }
497
498 //Clears selection if clicked on the map when shift is not presseed
499 google.maps.event.addListener(map, 'click', function () {
500 if (shiftKeyPressed == false) {
501 clearSelection();
502 chosen = null;
503
504 }
505 });
506
507 //Setting drawing tool option
508 document.addEventListener('keydown', function () {
509 //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey))
510 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
511 //clearSelection();
512 drawingManager.setDrawingMode(null);
513 } else if (event.code == 'Digit1') {
514 drawingManager.setDrawingMode('marker');
515 } else if (event.code == 'Digit2') {
516 drawingManager.setDrawingMode('circle');
517 } else if (event.code == 'Digit3') {
518 drawingManager.setDrawingMode('polygon');
519 } else if (event.code == 'Digit4') {
520 drawingManager.setDrawingMode('polyline');
521 } else if (event.code == 'Digit5') {
522 drawingManager.setDrawingMode('rectangle');
523 }
524 // console.log(event.code);
525 });
526
527 //Sets shift as pressed
528 document.addEventListener('keydown', function () {
529 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
530 shiftKeyPressed = true;
531
532 }
533
534 });
535
536 //Sets shift as unpressed
537 document.addEventListener('keyup', function () {
538 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
539 shiftKeyPressed = false;
540 }
541
542 });
543
544 buildColorPalette();
545 }
546 //Set selected thickness
547 function setSelectedThickness(sWeight) {
548 if (selectedShape) {
549 //selectedShape.set('strokeWeight', sWeight)
550 }
551 if (selectedShapes !== 0) {
552 for (var i = 0; i < selectedShapes.length; i++) {
553 selectedShapes[i].set('strokeWeight', sWeight);
554 //console.log(selectedShapes.length);
555 }
556 }
557 }
558
559 //Set selected opacity
560 function setSelectedOpacity(fOpacity) {
561 if (selectedShape) {
562 //selectedShape.set('fillOpacity', fOpacity)
563 }
564 if (selectedShapes !== 0) {
565 for (var i = 0; i < selectedShapes.length; i++) {
566 selectedShapes[i].set('fillOpacity', fOpacity);
567 }
568 }
569 }
570
571 //set selected fill colour
572 function setSelectedShapeColor(color) {
573 if (selectedShapes !== 0) {
574 for (var i = 0; i < selectedShapes.length; i++) {
575 selectedShapes[i].set('fillColor', color);
576 selectedShapes[i].set('strokeColor', color);
577 }
578 }
579 }
580
581 function updateMenuValues(thi, opa, fCol, sCol) {
582
583 //Update thickness slider and value on the settings menu
584 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
585 thicknessSliderOutput.innerHTML = thi;
586 document.getElementById("thicknessRange").value = thi * 20;
587
588 //Update the opacity slider and value on the settings menu
589 var opacitySliderOutput = document.getElementById("opacityRangeVal");
590 opacitySliderOutput.innerHTML = "% " + opa * 100;
591 document.getElementById("colourOpacity").value = opa * 100;
592
593 if (drawingManager.drawingMode == null) {
594 selectColor(fCol);
595 }
596 }
597 function undoMovement() {
598 var lastItem = prevLog[prevLog.length - 1];
599
600 //If history array is not empty
601 if (prevLog.length !== 0) {
602 if(lastItem[0] = "dragged"){
603 //If the array has more than one index (polygons and polylines)
604 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {
605 nextLog.push(lastItem);
606 console.log((prevLog));
607 selectedShape.setPath(lastItem[2]);
608
609
610
611 //If the array has only one index(rectangles and circles)
612 } else {
613 nextLog.push(lastItem);
614
615 selectedShape.setBounds(lastItem[2]);
616
617 }
618 }
619 undoPressed = false;
620 undoPressed = 0;
621 prevLog.pop();
622 }
623
624
625 }
626
627 function redoMovement() {
628
629 var lastItem = nextLog[nextLog.length - 1];
630 var secondToLastItem = nextLog[nextLog.length - 2];
631 var correctIndex;
632 if (undoPressed >= 2) {
633 correctIndex == lastItem;
634 } else {
635 correctIndex == secondToLastItem;
636 }
637
638 //If the history log is not empty
639 if (nextLog.length > 1) {
640 prevLog.push(lastItem);
641
642 //If undo has been pressed
643 if (undoPressed >= 1) {
644 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")){
645 selectedShape.setPath(lastItem[2]);
646 } else {
647 selectedShape.setBounds(lastItem[2]);
648 }
649 } else {
650 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")){
651 selectedShape.setPath(secondToLastItem[2]);
652 } else {
653 selectedShape.setBounds(secondToLastItem[2]);
654 }
655
656 undoPressed++;
657 }
658 undoPressed = false;
659 redoPressed = true;
660 nextLog.pop();
661 console.log(nextLog);
662 }
663 }
664
665 function polygonGetPath() {
666 var overlayType = prevLog[(prevLog.length - 1)]._selectedShapes[0].type;
667 //console.log(prevLog);
668 //console.log(prevLog[(prevLog.length - 1)]._selectedShapes[0].type == polygon);
669 if(prevLog[(prevLog.length - 1)]._selectedShapes){
670 console.log(prevLog[(prevLog.length - 1)]._selectedShapes[0].type);
671 if (overlayType = ("circle" || "rectangle")) {
672 console.log("It's a "+ overlayType);
673 } else if (overlayType = ("polygon" || "polyline")){
674 console.log("It's a "+ overlayType);
675 }
676
677 }
678
679
680
681
682 }
683
684 function deleteSelectedShape() {
685 for (var i = 0; i < selectedShapes.length; i++) {
686 selectedShapes[i].setMap(null);
687 }
688 selectedShapes = [];
689 }
690
691 function removeLine() {
692 var lastOverlay = overlays.pop();
693 if (lastOverlay)
694 lastOverlay.setMap(null);
695 }
696
697 function deleteAllShape() {
698 for (var i = 0; i < overlays.length; i++) {
699 overlays[i].setMap(null);
700
701 }
702 overlays = [];
703 }
704
705 </script>
706 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script>
707 <script src="shortcuts.js"></script>
708 </body>
709</html>
Note: See TracBrowser for help on using the repository browser.