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