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