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

Revision 32709, 18.2 KB (checked in by ak19, 10 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 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 browser.