source: gs3-extensions/map-editor/DrawingManager/checkpoints-singlefile/index backup v21.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.4 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
287 vertexAndPolyDel(e, newShape);
288 dragFired = false;
289 console.log("click fired");
290 return;
291
292 });
293
294 //Stores past event information
295 google.maps.event.addListener(newShape, 'dragstart', function () {
296 dragStartFunction(e, newShape);
297 });
298
299 //Store information after the event ends
300 google.maps.event.addListener(newShape, 'dragend', function () {
301 dragEndFunction(e, newShape);
302 });
303
304 //Add an event listener to select a shape if the mouse hovers over it
305 google.maps.event.addListener(newShape, 'mousedown', function (e) {
306 if (drawingManager.drawingMode == null) {
307 setSelection(newShape, e);
308 console.log("mousedown fired");
309 dragFired = false;
310 }
311 });
312 setSelection(newShape, e);
313 } else {
314 //cLICK EVENT IF A MARKER IS CREATED
315 google.maps.event.addListener(newShape, 'click', function (e) {
316 setSelection(newShape, e);
317 });
318 setSelection(newShape, e);
319 }
320 });
321
322 //Deletes a vertex if clicked on it
323 function vertexAndPolyDel(e, newShape) {
324 var vertex = e.vertex;
325
326 if (e.vertex !== undefined) {
327 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
328 var path = newShape.getPaths().getAt(e.path);
329 path.removeAt(e.vertex);
330 if (path.length < 3) {
331 newShape.setMap(null);
332 }
333 }
334 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
335 var path = newShape.getPath();
336 path.removeAt(e.vertex);
337 if (path.length < 2) {
338 newShape.setMap(null);
339 }
340 }
341 }
342 }
343
344 function clearSelection() {
345 if (selectedShape) {
346 if (selectedShape.type !== 'marker') {
347 selectedShape.setEditable(false);
348 if (shiftKeyPressed == false) {
349 for (var i = 0; i < selectedShapes.length; i++) {
350 selectedShapes[i].setEditable(false);
351 }
352 selectedShapes = [];
353 }
354 }
355 selectedShape = null;
356 }
357 }
358 var i = 0;
359
360 //Set selection for the selected overlay
361 function setSelection(shape, e) {
362 if (shape.type !== 'marker') {
363 if (shiftKeyPressed == false) {
364 if (e.vertex == undefined) {
365 clearSelection();
366 shape.setEditable(true);
367 }
368 }
369 if (selectedShapes.includes(shape)) {
370
371 //shape.setEditable(false);
372 const index = selectedShapes.indexOf(shape);
373 selectedShapes.splice(index, 1);
374 } else {
375 shape.setEditable(true);
376 selectedShapes.push(shape);
377 }
378
379 if (debug) {
380 console.log(" len = " + selectedShapes.length);
381 }
382 //Send the values to be updated
383 var thi = shape.strokeWeight;
384 var opa = shape.fillOpacity;
385 var fCol = shape.fillColor;
386 var sCol = shape.strokeColor;
387 updateMenuValues(thi, opa, fCol, sCol);
388
389 } else if (shape.type == 'marker') {
390 clearSelection();
391 }
392
393
394
395 selectedShape = shape;
396
397 if (selectionPass == true){
398
399 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape);
400 nextLog.push(selectedShapesLog);
401 chosen = selectedShape;
402 selectionPass = false
403 }
404
405 var lastItem = nextLog[nextLog.length -1];
406
407 if(chosen !== selectedShape){
408 if(dragFired == false){
409 console.log("it comes here");
410 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape)
411 updateHistory(selectedShapesLog);
412 chosen = selectedShape;
413 }
414 }
415
416 console.log(chosen);
417 //console.log(prevLog);
418 selectedShapesLog = [];
419 }
420
421 //Clears selection if clicked on the map when shift is not presseed
422 google.maps.event.addListener(map, 'click', function () {
423 if (shiftKeyPressed == false) {
424 clearSelection();
425 if(chosen !== null) {
426 deselectedLog.push("deselected")
427 updateHistory(deselectedLog);
428 deselectedLog = [];
429 chosen = null;
430 console.log("chosen wasn't null");
431
432 }
433 }
434 console.log(chosen);
435 //console.log(prevLog);
436 });
437
438
439
440
441
442 //Setting drawing tool option
443 document.addEventListener('keydown', function () {
444 //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey))
445 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
446 //clearSelection();
447 drawingManager.setDrawingMode(null);
448 } else if (event.code == 'Digit1') {
449 drawingManager.setDrawingMode('marker');
450 } else if (event.code == 'Digit2') {
451 drawingManager.setDrawingMode('circle');
452 } else if (event.code == 'Digit3') {
453 drawingManager.setDrawingMode('polygon');
454 } else if (event.code == 'Digit4') {
455 drawingManager.setDrawingMode('polyline');
456 } else if (event.code == 'Digit5') {
457 drawingManager.setDrawingMode('rectangle');
458 } else if(event.code == 'KeyQ') {
459 polygonGetPath();
460 }
461 // console.log(event.code);
462 });
463
464 //Sets shift as pressed
465 document.addEventListener('keydown', function () {
466 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
467 shiftKeyPressed = true;
468
469 }
470
471 });
472
473 //Sets shift as unpressed
474 document.addEventListener('keyup', function () {
475 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight') {
476 shiftKeyPressed = false;
477 }
478
479 });
480
481 buildColorPalette();
482 }
483 //Set selected thickness
484 function setSelectedThickness(sWeight) {
485 if (selectedShape) {
486 //selectedShape.set('strokeWeight', sWeight)
487 }
488 if (selectedShapes !== 0) {
489 for (var i = 0; i < selectedShapes.length; i++) {
490 selectedShapes[i].set('strokeWeight', sWeight);
491 //console.log(selectedShapes.length);
492 }
493 }
494 }
495
496 //Set selected opacity
497 function setSelectedOpacity(fOpacity) {
498 if (selectedShape) {
499 //selectedShape.set('fillOpacity', fOpacity)
500 }
501 if (selectedShapes !== 0) {
502 for (var i = 0; i < selectedShapes.length; i++) {
503 selectedShapes[i].set('fillOpacity', fOpacity);
504 }
505 }
506 }
507
508 //set selected fill colour
509 function setSelectedShapeColor(color) {
510 if (selectedShapes !== 0) {
511 for (var i = 0; i < selectedShapes.length; i++) {
512 selectedShapes[i].set('fillColor', color);
513 selectedShapes[i].set('strokeColor', color);
514 }
515 }
516 }
517
518 function updateMenuValues(thi, opa, fCol, sCol) {
519
520 //Update thickness slider and value on the settings menu
521 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
522 thicknessSliderOutput.innerHTML = thi;
523 document.getElementById("thicknessRange").value = thi * 20;
524
525 //Update the opacity slider and value on the settings menu
526 var opacitySliderOutput = document.getElementById("opacityRangeVal");
527 opacitySliderOutput.innerHTML = "% " + opa * 100;
528 document.getElementById("colourOpacity").value = opa * 100;
529
530 if (drawingManager.drawingMode == null) {
531 selectColor(fCol);
532 }
533 }
534 function undoMovement() {
535 var lastItem = prevLog[prevLog.length - 1];
536
537 //If history array is not empty
538 if (prevLog.length !== 0) {
539 if(lastItem[0] = "dragStart"){
540 //If the array has more than one index (polygons and polylines)
541 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {
542 nextLog.push(lastItem);
543 selectedShape.setPath(lastItem[2]);
544
545 //If the array has only one index(rectangles and circles)
546 } else {
547 nextLog.push(lastItem);
548 selectedShape.setBounds(lastItem[2]);
549 }
550 } else if (lastItem[0] = "selected") {
551
552 } else if (lastItem[0] = "deselected" ) {
553
554 }
555 undoPressed = false;
556 undoPressed = 0;
557 prevLog.pop();
558 }
559
560
561 }
562
563 function redoMovement() {
564
565 var lastItem = nextLog[nextLog.length - 1];
566 var secondToLastItem = nextLog[nextLog.length - 2];
567 var correctIndex;
568
569 if (undoPressed >= 1) {
570 correctIndex = lastItem;
571 } else {
572 correctIndex = secondToLastItem;
573 undoPressed++;
574 }
575
576 //If the history log is not empty
577 if (nextLog.length > 1) {
578 prevLog.push(lastItem);
579
580 //If undo has been pressed
581
582 if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")){
583 selectedShape.setPath(correctIndex[2]);
584 } else {
585 selectedShape.setBounds(correctIndex[2]);
586 }
587
588 undoPressed = false;
589 redoPressed = true;
590 nextLog.pop();
591 }
592 }
593
594 function dragStartFunction(e, selectedShape){
595 var newShape = e.overlay;
596 newShape.type = e.type;
597 if (selectedShape) {
598 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
599 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
600
601 if (polyL || polyG) {
602 var latLngi = []
603 var lati,
604 lngi;
605 for (var i = 0; i < selectedShape.getPath().length; i++) {
606 lati = selectedShape.getPath().getAt(i).lat();
607 lngi = selectedShape.getPath().getAt(i).lng();
608 //console.log("Vertex number",i, "'s latitude is", lati, "and longitude is", lngi);
609 prevVertex = {
610 lat: lati,
611 lng: lngi
612 };
613 latLngi.push(prevVertex);
614 }
615 prevShape.push("dragStart", selectedShape.type, latLngi);
616 } else {
617 prevEdge = {
618 east: selectedShape.getBounds().ea.l,
619 north: selectedShape.getBounds().la.l,
620 south: selectedShape.getBounds().la.j,
621 west: selectedShape.getBounds().ea.j
622 }
623 prevShape.push("dragStart", selectedShape.type, prevEdge);
624 }
625
626 var lastItem = nextLog[nextLog.length - 1];
627 if(lastItem[0] !== "dragEnd"){
628 prevLog.push(nextLog[nextLog.length -1]);
629 }
630
631 prevLog.push(prevShape);
632 prevShape = [];
633 nextLog = [];
634 chosen = selectedShape;
635 dragFired = true;
636 }
637 }
638
639 function dragEndFunction(e, newShape) {
640
641 var newShape = e.overlay;
642 newShape.type = e.type;
643 if (selectedShape) {
644 var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
645 var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
646
647 if (polyL || polyG) {
648
649 var latLngi = []
650 var lati,
651 lngi;
652
653 for (var i = 0; i < selectedShape.getPath().length; i++) {
654 lati = selectedShape.getPath().getAt(i).lat();
655 lngi = selectedShape.getPath().getAt(i).lng();
656 nextVertex = {
657 lat: lati,
658 lng: lngi
659 };
660 latLngi.push(nextVertex);
661 }
662 nextShape.push("dragEnd", selectedShape.type, latLngi);
663 } else {
664
665 nextEdge.east = selectedShape.getBounds().ea.l;
666 nextEdge.north = selectedShape.getBounds().la.l;
667 nextEdge.south = selectedShape.getBounds().la.j;
668 nextEdge.west = selectedShape.getBounds().ea.j;
669
670 nextShape.push("dragEnd", selectedShape.type, nextEdge);
671 }
672 }
673 for (var i = 0; i < prevLog.length; i++) {
674 if (prevLog[i][0] == "dragEnd") {
675 const index = i;
676 prevLog.splice(index, 1);
677 }
678 }
679 nextLog.push(nextShape);
680 nextShape = [];
681 chosen = selectedShape;
682 }
683
684 function updateHistory(eventArray) {
685 var lastItem = nextLog[nextLog.length - 1];
686 if (nextLog.length > 0) {
687 prevLog.push(lastItem);
688 }
689 nextLog = [];
690 nextLog.push(eventArray);
691 eventArray = [];
692 dragFired = false;
693 }
694
695 function newShapeCreated (e) {
696 //nextLog
697 }
698
699 function polygonGetPath() {
700 console.log(nextLog);
701 console.log(prevLog);
702
703 }
704
705 function deleteSelectedShape() {
706 for (var i = 0; i < selectedShapes.length; i++) {
707 selectedShapes[i].setMap(null);
708 }
709 selectedShapes = [];
710 }
711
712 function deleteAllShape() {
713 for (var i = 0; i < overlays.length; i++) {
714 overlays[i].setMap(null);
715
716 }
717 overlays = [];
718 }
719
720 </script>
721 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script>
722 <script src="shortcuts.js"></script>
723 </body>
724</html>
Note: See TracBrowser for help on using the repository browser.