source: gs3-extensions/map-editor/DrawingManager/checkpoints-singlefile/index backup v8.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: 13.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 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="b">Delete Selected</button>
86 <button onclick="polygonGetPath()" accesskey="n">Get Path</button>
87
88 </div>
89
90 <div id = "LineThickness">
91 <p>Line thickness: <input type="range" min="20" max="100" value="1" class="slider" id="thicknessRange"> </p>
92 <p>Value: <span id="thicknessRangeVal"></span></p>
93 </div>
94
95 <div id = "ColourOpacity">
96 <p>Colour opacity: <input type="range" min="10" max="100" value="40" class="slider" id="colourOpacity"> </p>
97 <p>Value: <span id="opacityRangeVal"></span></p>
98 </div>
99
100
101
102 <div id="FillColour">
103 <p> Fill Colour:</p> <div id="color-palette1"></div>
104 </div>
105
106
107
108 <div id="map"></div>
109
110 <script>
111 var shiftKeyNotPressed = true;
112 var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
113 var selectedColor;
114 var colorButtons = {};
115 var thicknessValue = 1;
116 var opacityValue = 0.4;
117 var polyOptions = {
118 fillColor: '#CA4A2F',
119 strokeWeight: thicknessValue,
120 fillOpacity: opacityValue,
121 editable: true,
122 draggable: true,
123 geodesic : false,
124 };
125
126
127 var overlays = [];
128 var drawingManager;
129 var selectedShape;
130 var selectedShapes = [];
131
132
133
134 //Update thickness
135 var thicknessSlider = document.getElementById("thicknessRange");
136 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
137 thicknessSliderOutput.innerHTML = thicknessSlider.value/20;
138
139 thicknessSlider.oninput = function() {
140 thicknessSliderOutput.innerHTML = this.value/20;
141 thicknessValue = this.value/20;
142 polyOptions.strokeWeight = thicknessValue;
143 setSelectedThickness(thicknessValue);
144 }
145
146 //Update opacity
147 var opacitySlider = document.getElementById("colourOpacity");
148 var opacitySliderOutput = document.getElementById("opacityRangeVal");
149 opacitySliderOutput.innerHTML = "% " + Math.round(opacitySlider.value);
150
151 opacitySlider.oninput = function() {
152 opacityValue = this.value/100;
153 polyOptions.fillOpacity = opacityValue;
154 opacitySliderOutput = opacityValue;
155 opacityRangeVal.innerHTML = "% " + Math.round( opacitySliderOutput * 100);
156 setSelectedOpacity(opacityValue);
157 }
158
159
160 ////////////////////////////////////////////////////////////////////////////////////////
161 function makeColorButton (color) {
162 var button = document.createElement('span');
163 button.className = 'color-buttons1';
164 button.style.backgroundColor = color;
165 google.maps.event.addDomListener(button, 'click', function () {
166 selectColor(color);
167 setSelectedShapeColor(color);
168 });
169 return button;
170 }
171 function buildColorPalette () {
172 var colorPalette = document.getElementById('color-palette1');
173 for (var i = 0; i < colors.length; ++i) {
174 var currColor = colors[i];
175 var colorButton = makeColorButton(currColor);
176 colorPalette.appendChild(colorButton);
177 colorButtons[currColor] = colorButton;
178 }
179 selectColor(colors[0]);
180 };
181 function selectColor (color) {
182 selectedColor = color;
183 for (var i = 0; i < colors.length; ++i) {
184 var currColor = colors[i];
185 colorButtons[currColor].style.border = currColor == color ? '2px solid #789' : '2px solid #fff';
186 }
187
188 // Retrieves the current options from the drawing manager and replaces the
189 // stroke or fill color as appropriate.
190 var polylineOptions = drawingManager.get('polylineOptions');
191 polylineOptions.strokeColor = color;
192 drawingManager.set('polylineOptions', polylineOptions);
193
194 var rectangleOptions = drawingManager.get('rectangleOptions');
195 rectangleOptions.fillColor = color;
196 drawingManager.set('rectangleOptions', rectangleOptions);
197
198 var circleOptions = drawingManager.get('circleOptions');
199 circleOptions.fillColor = color;
200 drawingManager.set('circleOptions', circleOptions);
201
202 var polygonOptions = drawingManager.get('polygonOptions');
203 polygonOptions.fillColor = color;
204 drawingManager.set('polygonOptions', polygonOptions);
205 }
206
207
208
209
210 function initMap() {
211
212 var map = new google.maps.Map(document.getElementById('map'), {
213 center: {lat: -34.397, lng: 150.644},
214 zoom: 3
215 });
216
217
218 drawingManager = new google.maps.drawing.DrawingManager({
219 drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
220 drawingControl: true,
221 drawingControlOptions: {
222 position: google.maps.ControlPosition.TOP_CENTER,
223 drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
224 },
225 markerOptions: { draggable: true},
226 circleOptions: polyOptions,
227 polylineOptions : polyOptions,
228 polygonOptions: polyOptions,
229 rectangleOptions: polyOptions,
230 });
231
232 drawingManager.setMap(map);
233
234
235 //overlays.push(event.overlay); // store reference to added overlay
236 google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
237 overlays.push(e.overlay); // store reference to added overlay
238 //console.log(overlays);
239 var newShape = e.overlay;
240 newShape.type = e.type;
241
242
243
244 if (e.type !== google.maps.drawing.OverlayType.MARKER) {
245 // Switch back to non-drawing mode after drawing a shape.
246 //drawingManager.setDrawingMode(null);
247
248
249
250 // Add an event listener that selects the newly-drawn shape when the user
251 // mouses down on it.
252 google.maps.event.addListener(newShape, 'click', function(e) {
253
254 vertexAndPolyDel(e,newShape);
255 console.log(drawingManager.drawingMode);
256
257
258 });
259
260 //Add an event listener to select a shape if the mouse hovers over it
261 google.maps.event.addListener(newShape, 'mousedown', function(e) {
262
263 if(drawingManager.drawingMode == null) {
264 setSelection(newShape);
265
266 }
267
268 });
269
270
271
272
273 setSelection(newShape);
274 }
275 else {
276 google.maps.event.addListener(newShape, 'click', function (e) {
277 setSelection(newShape);
278 console.log(drawingManager.drawingMode);
279 });
280 setSelection(newShape);
281 }
282 });
283
284
285 function vertexAndPolyDel(e,newShape) {
286 console.log("triggered");
287 if (e.vertex !== undefined) {
288 if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
289 var path = newShape.getPaths().getAt(e.path);
290 path.removeAt(e.vertex);
291 if (path.length < 3) {
292 newShape.setMap(null);
293 }
294 }
295 if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
296 var path = newShape.getPath();
297 path.removeAt(e.vertex);
298
299 if (path.length < 2) {
300 newShape.setMap(null);
301 }
302 }
303 }
304// console.log(path)
305 setSelection(newShape);
306 }
307
308 function clearSelection () {
309 if (selectedShape) {
310 if (selectedShape.type !== 'marker') {
311 selectedShape.setEditable(false);
312 if(shiftKeyNotPressed){
313 for (var i=0; i < selectedShapes.length; i++) {
314 selectedShapes[i].setEditable(false);
315 }
316 selectedShapes = [];
317 }
318 }
319
320 selectedShape = null;
321 }
322 }
323
324 function setSelection (shape) {
325
326 if (shape.type !== 'marker') {
327 if(shiftKeyNotPressed) {
328 clearSelection();
329 }
330 shape.setEditable(true);
331 selectedShapes.push(shape);
332
333 //Send the values to be updated
334 var thi = shape.strokeWeight;
335 var opa = shape.fillOpacity;
336 var fCol = shape.fillColor;
337 var sCol = shape.strokeColor;
338
339 updateMenuValues(thi, opa, fCol, sCol);
340
341 }
342 else if (shape.type == 'marker') {
343 clearSelection();
344 }
345
346 selectedShape = shape;
347 }
348
349
350
351 google.maps.event.addListener(map, 'click', clearSelection);
352 google.maps.event.addListener(map, 'click', function()
353 {
354// console.log(event.button);
355 clearSelection();
356 }
357 );
358
359
360 //Setting drawing tool option
361 document.addEventListener('keydown', function() {
362 //if (event.code == 'KeyX' && (event.ctrlKey || event.metaKey))
363 if (event.code == 'Digit0' || event.code == 'Numpad0' || event.code == 'Backquote') {
364 //clearSelection();
365 drawingManager.setDrawingMode(null);
366 } else if (event.code == 'Digit1') {
367 drawingManager.setDrawingMode('marker');
368 } else if (event.code == 'Digit2') {
369 drawingManager.setDrawingMode('circle');
370 } else if (event.code == 'Digit3') {
371 drawingManager.setDrawingMode('polygon');
372 } else if (event.code == 'Digit4') {
373 drawingManager.setDrawingMode('polyline');
374 } else if (event.code == 'Digit5' ) {
375 drawingManager.setDrawingMode('rectangle');
376 }
377// console.log(event.code);
378 });
379
380 //Check if the shift key is pressed
381 document.addEventListener('keydown', function() {
382 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight')
383 {
384 shiftKeyNotPressed = false;
385 }
386
387 });
388
389 document.addEventListener('keyup', function() {
390 if (event.code == 'ShiftLeft' || event.code == 'ShiftRight')
391 {
392 shiftKeyNotPressed = true;
393 }
394
395 });
396
397
398 buildColorPalette();
399}
400 //Set selected thickness
401 function setSelectedThickness(sWeight) {
402 if (selectedShape){
403 selectedShape.set('strokeWeight', sWeight)
404 }
405 if(selectedShapes !== 0) {
406 for (var i=0; i < selectedShapes.length; i++) {
407 selectedShapes[i].set('strokeWeight', sWeight);
408 }
409 }
410 }
411
412 //Set selected opacity
413 function setSelectedOpacity(fOpacity) {
414 if (selectedShape) {
415 selectedShape.set('fillOpacity', fOpacity)
416 }
417 if(selectedShapes !== 0) {
418 for (var i=0; i < selectedShapes.length; i++) {
419 selectedShapes[i].set('fillOpacity', fOpacity);
420 }
421 }
422 }
423
424
425
426 //set selected fill colour
427 function setSelectedShapeColor (color) {
428 if (selectedShape) {
429 if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
430 selectedShape.set('strokeColor', color);
431 } else {
432 selectedShape.set('fillColor', color);
433 selectedShape.set('strokeColor', color);
434 }
435 }
436 if(selectedShapes !== 0) {
437 for (var i=0; i < selectedShapes.length; i++) {
438 selectedShapes[i].set('fillColor', color);
439 selectedShapes[i].set('strokeColor', color);
440 }
441 }
442 }
443
444
445 function updateMenuValues(thi, opa, fCol, sCol){
446
447 //Update thickness slider and value on the settings menu
448 var thicknessSliderOutput = document.getElementById("thicknessRangeVal");
449 thicknessSliderOutput.innerHTML = thi;
450 document.getElementById("thicknessRange").value = thi*20;
451
452 //Update the opacity slider and value on the settings menu
453 var opacitySliderOutput = document.getElementById("opacityRangeVal");
454 opacitySliderOutput.innerHTML = "% " + opa*100;
455 document.getElementById("colourOpacity").value = opa*100;
456
457
458 if (drawingManager.drawingMode == null) {
459 selectColor(fCol);
460 }
461 }
462
463
464
465function polygonGetPath() {
466 if (selectedShape){
467 var Psp = selectedShape.getPaths();
468 console.log(Psp);
469 }
470
471}
472
473function deleteSelectedShape () {
474 if (selectedShape) {
475 selectedShape.setMap(null);
476 }
477}
478
479function removeLine() {
480 var lastOverlay = overlays.pop();
481 if (lastOverlay) lastOverlay.setMap(null);
482 }
483
484function deleteAllShape() {
485 for (var i=0; i < overlays.length; i++) {
486 overlays[i].setMap(null);
487
488 }
489 overlays = [];
490}
491
492 </script>
493 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script>
494 <script src="shortcuts.js"></script>
495 </body>
496</html>
Note: See TracBrowser for help on using the repository browser.