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