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

Revision 32709, 7.5 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        float: bottom;
13      }
14      /* Optional: Makes the sample page fill the window. */
15      html, body {
16        height: 100%;
17        width: 100%;
18        margin: 0;
19        padding: 0;
20      }
21      #buttons{
22      display: inline-block;
23      float: top;
24      padding-left: 10px;
25      padding-top: 5px;
26      h: 10%;
27      }
28      #buttons2{
29      display: inline-block;
30      float top
31      padding-left: 10px;
32      padding-top: 5px;
33      h: 10%;
34      }
35      #buttons3{
36      display: inline-block;
37      float top
38      padding-left: 10px;
39      padding-top: 5px;
40      h: 10%;
41      }   
42    </style>
43  </head>
44  <body>
45    <div id = "buttons">
46    <button onclick="removeLine()" accesskey="z">Delete Last</button>
47    <button onclick="deleteAllShape()" accesskey="c">Clear All</button>
48    <button onclick="deleteSelectedShape()" accesskey="c">Delete Selected</button>
49    <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange"> </p>
50    <p>Value: <span id="thicknessRangeVal"></span></p>
51   
52    </div>
53    <div id = "buttons2">
54    <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity"> </p>
55    <p>Value: <span id="opacityRangeVal"></span></p>
56    </div>
57   
58    <div id = "buttons3">
59    <p> Geodesic: <input type="checkbox" id="geodesicBox" onclick="geodesicCheck()"> </p>
60    </div>
61   
62    <div id="map"></div>
63   
64    <script>
65        var thicknessValue = 1;
66        var opacityValue = 0.4;
67        var polyOptions = {
68            fillColor: '#CA4A2F',
69            strokeWeight: thicknessValue,
70            fillOpacity: opacityValue,
71            editable: true,
72            draggable: true,
73            geodesic : false,
74            //zIndex: 1
75          };
76         
77        var overlays = [];
78        var drawingManager;
79        var selectedShape;
80       
81        function geodesicCheck (){
82            var checkBox = document.getElementById("geodesicBox");
83            if (checkBox.checked == true){
84                polyOptions.geodesic = true;
85            }
86            else {
87                polyOptions.geodesic = false;
88            }
89            console.log(polyOptions.geodesic);
90        }
91        //Update thickness
92        var thicknessSlider = document.getElementById("thicknessRange");
93        var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
94        thicknessSliderOutput.innerHTML = thicknessSlider.value/20;
95       
96        thicknessSlider.oninput = function() {
97            thicknessSliderOutput.innerHTML = this.value/20;
98            thicknessValue = this.value/20;
99            polyOptions.strokeWeight = thicknessValue;
100        }
101       
102        //Update opacity
103        var opacitySlider = document.getElementById("colourOpacity");
104        var opacitySliderOutput = document.getElementById("thicknessRangeVal");
105        //opacitySliderOutput.innerHTML = opacitySlider.value/100;
106       
107        opacitySlider.oninput = function() {
108            opacityValue = this.value/100;
109            polyOptions.fillOpacity = opacityValue;
110            opacitySliderOutput = opacityValue;
111            opacityRangeVal.innerHTML = opacitySliderOutput;
112        }
113       
114       
115      function initMap() {
116     
117        var map = new google.maps.Map(document.getElementById('map'), {
118          center: {lat: -34.397, lng: 150.644},
119          zoom: 3
120        });
121       
122        //Update the strokeWeight value (NOT BEING USED NOW)
123        //document.getElementById("thicknessRange").addEventListener("mouseup", selectThickness);
124        //
125        //function selectThickness (shape) {
126        //  if  (shape.type !== 'marker') {
127        //
128        //      thicknessValue = thicknessRange.value/20;
129        //      console.log("Slider Val= ", thicknessRange.value, "Strokeweight Val= ", thicknessValue);
130        //  }
131        //}
132        //
133        //console.log(polyOptions.strokeWeight);
134         
135
136   
137        drawingManager = new google.maps.drawing.DrawingManager({
138            drawingMode: google.maps.drawing.OverlayType.MARKER,
139            drawingControl: true,
140            drawingControlOptions: {
141                position: google.maps.ControlPosition.TOP_CENTER,
142                drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
143            },
144            markerOptions: { draggable: true},
145            circleOptions: polyOptions,
146            polylineOptions : polyOptions,
147            polygonOptions: polyOptions,
148            rectangleOptions: polyOptions,
149          });
150   
151        drawingManager.setMap(map);
152       
153       
154        //overlays.push(event.overlay); // store reference to added overlay
155        google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
156            overlays.push(e.overlay); // store reference to added overlay
157            //console.log(overlays);
158            var newShape = e.overlay;
159                   
160            newShape.type = e.type;
161                    console.log("e", e);
162            if (e.type !== google.maps.drawing.OverlayType.MARKER) {
163                // Switch back to non-drawing mode after drawing a shape.
164                //drawingManager.setDrawingMode(null);
165
166                // Add an event listener that selects the newly-drawn shape when the user
167                // mouses down on it.
168                google.maps.event.addListener(newShape, 'click', function(e) {
169                    initialSelection(e,newShape)
170                    });
171                   
172                //google.maps.event.addListener(newShape, 'mouseover', function(e) {
173                //  clearSelection();
174                //  initialSelection(e,newShape)
175                //  });
176
177                //google.maps.event.addListener(newShape, 'mouseout', function(e) {
178                //  clearSelection();
179                //  });                 
180                   
181                   
182                setSelection(newShape);
183                console.log("Reached there");
184            }
185            else {
186                google.maps.event.addListener(newShape, 'click', function (e) {
187                    setSelection(newShape);
188                    console.log("Reached here");
189                });
190                setSelection(newShape);
191            }
192        });
193       
194       
195        function initialSelection(e,newShape) {
196            if (e.vertex !== undefined) {
197                if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
198                    var path = newShape.getPaths().getAt(e.path);
199                    path.removeAt(e.vertex);
200                    if (path.length < 3) {
201                        newShape.setMap(null);
202                    }
203                }
204                if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
205                    var path = newShape.getPath();
206                    path.removeAt(e.vertex);
207                    if (path.length < 2) {
208                        newShape.setMap(null);
209                    }
210                }
211            }
212           
213            setSelection(newShape);
214        }
215               
216        function clearSelection () {
217            if (selectedShape) {
218                if (selectedShape.type !== 'marker') {
219                    selectedShape.setEditable(false);
220                }
221                   
222                selectedShape = null;
223            }
224        }
225
226        function setSelection (shape) {
227            if (shape.type !== 'marker') {
228                clearSelection();
229                shape.setEditable(true);
230                //selectColor(shape.get('fillColor') || shape.get('strokeColor'));
231                //console.log(shape.get('fillColor'), thicknessValue);
232               
233                //console.log(shape);
234                //if (shape.type == 'polyline'){
235                //console.log(shape);
236                //console.log(shape.De.bounds);
237                //}
238                //else if (shape.type ==  'rectangle'){
239                //console.log(shape);
240                //console.log(shape.bounds);
241                //}
242                //else if (shape.type == 'polygon'){
243                //console.log(shape);
244                //console.log(shape.geodesic);             
245                //}
246               
247            }
248            else{
249            console.log(shape);
250            }
251               
252            selectedShape = shape;
253        }
254       
255}
256       
257       
258     
259function deleteSelectedShape () {
260    if (selectedShape) {
261        selectedShape.setMap(null);
262    }
263}
264           
265function removeLine() {
266    var lastOverlay = overlays.pop();
267    if (lastOverlay) lastOverlay.setMap(null);
268        console.log("DONE");
269    }
270       
271function deleteAllShape() {
272    for (var i=0; i < overlays.length; i++) {
273        overlays[i].setMap(null);
274    }
275    overlays = [];
276}
277
278    </script>
279    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap"
280         async defer></script>
281  </body>
282</html>
Note: See TracBrowser for help on using the browser.