root/gs3-extensions/map-editor/DrawingManager/checkpoints-singlefile/index backup v19.html @ 32709

Revision 32709, 19.2 KB (checked in by ak19, 11 months ago)

Jump-start to the map-editor extension, which takes account of the 21 previous check-point versions.

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="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 browser.