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