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

Revision 32709, 10.8 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="removeLine()" accesskey="z">Delete Last</button>
84    <button onclick="deleteAllShape()" accesskey="c">Clear All</button>
85    <button onclick="deleteSelectedShape()" accesskey="c">Delete Selected</button>
86   
87    </div>
88   
89    <div id = "LineThickness">
90    <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange"> </p>
91    <p>Value: <span id="thicknessRangeVal"></span></p>
92    </div> 
93   
94    <div id = "ColourOpacity">
95    <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity"> </p>
96    <p>Value: <span id="opacityRangeVal"></span></p>
97    </div>
98   
99
100
101    <div id="FIllColour">
102     <p> FIll Colour:</p> <div id="color-palette1"></div>
103    </div>
104
105   
106   
107    <div id="map"></div>
108   
109    <script>
110        var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
111        var selectedColor;
112        var colorButtons = {};
113        var thicknessValue = 1;
114        var opacityValue = 0.4;
115        var polyOptions = {
116            fillColor: '#CA4A2F',
117            strokeWeight: thicknessValue,
118            fillOpacity: opacityValue,
119            editable: true,
120            draggable: true,
121            geodesic : false,
122          };
123         
124        var overlays = [];
125        var drawingManager;
126        var selectedShape;
127       
128       
129       
130
131        //Update thickness
132        var thicknessSlider = document.getElementById("thicknessRange");
133        var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
134        thicknessSliderOutput.innerHTML = thicknessSlider.value/20;
135       
136        thicknessSlider.oninput = function() {
137            thicknessSliderOutput.innerHTML = this.value/20;
138            thicknessValue = this.value/20;
139            polyOptions.strokeWeight = thicknessValue;
140            setSelectedThickness(thicknessValue);
141        }
142       
143        //Update opacity
144        var opacitySlider = document.getElementById("colourOpacity");
145        var opacitySliderOutput = document.getElementById("opacityRangeVal");   
146        opacitySliderOutput.innerHTML =  "% " + Math.round(opacitySlider.value);
147       
148        opacitySlider.oninput = function() {
149            opacityValue = this.value/100;
150            polyOptions.fillOpacity = opacityValue;
151            opacitySliderOutput = opacityValue;
152            opacityRangeVal.innerHTML = "% " + Math.round( opacitySliderOutput * 100);
153            setSelectedOpacity(opacityValue);
154        }
155
156   
157        ////////////////////////////////////////////////////////////////////////////////////////
158        function makeColorButton (color) {
159            var button = document.createElement('span');
160            button.className = 'color-buttons1';
161            button.style.backgroundColor = color;
162            google.maps.event.addDomListener(button, 'click', function () {
163                selectColor(color);
164                setSelectedShapeColor(color);
165            });
166            return button;
167        }
168        function buildColorPalette () {
169            var colorPalette = document.getElementById('color-palette1');
170            for (var i = 0; i < colors.length; ++i) {
171                var currColor = colors[i];
172                var colorButton = makeColorButton(currColor);
173                colorPalette.appendChild(colorButton);
174                colorButtons[currColor] = colorButton;
175            }
176            selectColor(colors[0]);
177        };     
178        function selectColor (color) {
179                selectedColor = color;
180                for (var i = 0; i < colors.length; ++i) {
181                    var currColor = colors[i];
182                    colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
183                }
184
185                // Retrieves the current options from the drawing manager and replaces the
186                // stroke or fill color as appropriate.
187                var polylineOptions = drawingManager.get('polylineOptions');
188                polylineOptions.strokeColor = color;
189                drawingManager.set('polylineOptions', polylineOptions);
190
191                var rectangleOptions = drawingManager.get('rectangleOptions');
192                rectangleOptions.fillColor = color;
193                drawingManager.set('rectangleOptions', rectangleOptions);
194
195                var circleOptions = drawingManager.get('circleOptions');
196                circleOptions.fillColor = color;
197                drawingManager.set('circleOptions', circleOptions);
198
199                var polygonOptions = drawingManager.get('polygonOptions');
200                polygonOptions.fillColor = color;
201                drawingManager.set('polygonOptions', polygonOptions);
202            }
203       
204       
205       
206       
207      function initMap() {
208       
209        var map = new google.maps.Map(document.getElementById('map'), {
210          center: {lat: -34.397, lng: 150.644},
211          zoom: 3
212        });
213       
214   
215        drawingManager = new google.maps.drawing.DrawingManager({
216            drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
217            drawingControl: true,
218            drawingControlOptions: {
219                position: google.maps.ControlPosition.TOP_CENTER,
220                drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
221            },
222            markerOptions: { draggable: true},
223            circleOptions: polyOptions,
224            polylineOptions : polyOptions,
225            polygonOptions: polyOptions,
226            rectangleOptions: polyOptions,
227          });
228   
229        drawingManager.setMap(map);
230       
231       
232        //overlays.push(event.overlay); // store reference to added overlay
233        google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
234            overlays.push(e.overlay); // store reference to added overlay
235            //console.log(overlays);
236            var newShape = e.overlay;   
237            newShape.type = e.type;
238
239            if (e.type !== google.maps.drawing.OverlayType.MARKER) {
240                // Switch back to non-drawing mode after drawing a shape.
241                //drawingManager.setDrawingMode(null);
242               
243               
244                console.log(newShape);
245                // Add an event listener that selects the newly-drawn shape when the user
246                // mouses down on it.
247                google.maps.event.addListener(newShape, 'click', function(e) {
248                    vertexAndPolyDel(e,newShape);
249                    console.log("here");
250                    });
251               
252                //Add an event listener to select a shape if the mouse hovers over it
253                google.maps.event.addListener(newShape, 'mousedown', function(e) {
254                    if (selectedShape != newShape ){
255                        setSelection(newShape);
256                    }});
257                   
258                       
259                   
260                   
261                setSelection(newShape);
262            }
263            else {
264                google.maps.event.addListener(newShape, 'click', function (e) {
265                    setSelection(newShape);
266                    console.log("there");
267                });
268                setSelection(newShape);
269            }
270        });
271       
272       
273        function vertexAndPolyDel(e,newShape) {
274            if (e.vertex !== undefined) {
275                if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
276                    var path = newShape.getPaths().getAt(e.path);
277                    console.log(path);
278                    path.removeAt(e.vertex);
279                    if (path.length < 3) {
280                        newShape.setMap(null);
281                    }
282                }
283                if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
284                    var path = newShape.getPath();
285                        path.removeAt(e.vertex);
286                                           
287                    if (path.length < 2) {
288                        newShape.setMap(null);
289                    }
290                }
291            }
292           
293            setSelection(newShape);
294        }
295               
296        function clearSelection () {
297            if (selectedShape) {
298                if (selectedShape.type !== 'marker') {
299                    selectedShape.setEditable(false);
300                }
301                   
302                    selectedShape = null;
303            }
304        }
305
306        function setSelection (shape) {
307            if (shape.type !== 'marker') {
308                clearSelection();
309                shape.setEditable(true);
310               
311                //Send the values to be updated
312                var thi = shape.strokeWeight;
313                var opa = shape.fillOpacity;
314                var fCol = shape.fillColor;
315                var sCol = shape.strokeColor;
316               
317                updateMenuValues(thi, opa, fCol, sCol);
318
319            }
320            else if (shape.type == 'marker') {
321                clearSelection();
322            }
323               
324            selectedShape = shape;
325        }
326       
327
328        buildColorPalette();
329}
330        //Set selected thickness
331        function setSelectedThickness(sWeight) {
332            if (selectedShape){
333            selectedShape.set('strokeWeight', sWeight)
334            }
335        }
336       
337        //Set selected opacity
338        function setSelectedOpacity(fOpacity) {
339            if (selectedShape) {
340                selectedShape.set('fillOpacity', fOpacity)
341            }
342        }
343       
344
345       
346        //set selected fill colour
347        function setSelectedShapeColor (color) {
348            if (selectedShape) {
349                if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
350                    selectedShape.set('strokeColor', color);
351                } else {
352                    selectedShape.set('fillColor', color);
353                    selectedShape.set('strokeColor', color);
354
355                }
356             }
357        }
358
359       
360        function updateMenuValues(thi, opa, fCol, sCol){
361       
362        //Update thickness slider and value on the settings menu
363        var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
364        thicknessSliderOutput.innerHTML = thi;
365        document.getElementById("thicknessRange").value = thi*20;
366       
367        //Update the opacity slider and value on the settings menu
368        var opacitySliderOutput = document.getElementById("opacityRangeVal");
369        opacitySliderOutput.innerHTML =  "% " + opa*100;
370        document.getElementById("colourOpacity").value =  opa*100;
371
372        }
373     
374function deleteSelectedShape () {
375    if (selectedShape) {
376        selectedShape.setMap(null);
377    }
378}
379           
380function removeLine() {
381    var lastOverlay = overlays.pop();
382    if (lastOverlay) lastOverlay.setMap(null);
383    }
384       
385function deleteAllShape() {
386    for (var i=0; i < overlays.length; i++) {
387        overlays[i].setMap(null);
388    }
389    overlays = [];
390}
391
392    </script>
393    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap"
394         async defer></script>
395         
396  </body>
397</html>
Note: See TracBrowser for help on using the browser.