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