source: gs3-extensions/map-editor/DrawingManager/checkpoints-singlefile/index backup v3.html@ 32709

Last change on this file since 32709 was 32709, checked in by ak19, 5 years ago

Jump-start to the map-editor extension, which takes account of the 21 previous check-point versions.
File size: 7.4 KB
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.RECTANGLE,
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 //ZdrawingManager.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 setSelection(newShape, e)
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
258function deleteSelectedShape () {
259 if (selectedShape) {
260 selectedShape.setMap(null);
261 }
262}
263
264function removeLine() {
265 var lastOverlay = overlays.pop();
266 if (lastOverlay) lastOverlay.setMap(null);
267 console.log("DONE");
268 }
269
270function deleteAllShape() {
271 for (var i=0; i < overlays.length; i++) {
272 overlays[i].setMap(null);
273 }
274 overlays = [];
275}
276
277 </script>
278 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap"
279 async defer></script>
280 </body>
281</html>
Note: See TracBrowser for help on using the repository browser.