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