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