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

Revision 32709, 19.0 KB (checked in by ak19, 9 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="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 browser.