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

Revision 32709, 4.1 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: 100%;
12      }
13      /* Optional: Makes the sample page fill the window. */
14      html, body {
15        height: 100%;
16        width: 100%;
17        margin: 0;
18        padding: 0;
19      }
20      #buttons{
21      float: center;
22      padding-left: 10px;
23      padding-top: 5px;
24      }
25    </style>
26  </head>
27  <body>
28    <div id = "buttons">
29    <button onclick="removeLine()" accesskey="z">Delete Last</button>
30    <button onclick="deleteAllShape()" accesskey="c">Clear</button>
31    <p>Line thickness: <input type="range" min="1" max="5" value="1" class="slider" id="thicknessRange"> </p>
32    </div>
33   
34    <div id="map"></div>
35   
36    <script>
37
38     
39        var overlays = [];
40        var drawingManager;
41        var sliderValue;
42        var slider = document.getElementById("thicknessRange");
43        var selectedShape;
44       
45       
46        slider.oninput = function() {
47        sliderValue = slider.value;
48        //console.log(slider.value);
49        console.log(sliderValue);
50        }
51       
52        //var polygonOptions = drawingManager.get('polygonOptions');
53        //polygonOptions.fillColor = '#CA4A2F';
54        //drawingManager.set('polygonOptions', polygonOptions);
55       
56      function initMap() {
57     
58        var map = new google.maps.Map(document.getElementById('map'), {
59          center: {lat: -34.397, lng: 150.644},
60          zoom: 8
61        });
62       
63        var polyOptions = {
64          fillColor: '#CA4A2F',
65          strokeWeight: 1,
66          fillOpacity: 0.4,
67          editable: true,
68          draggable: true,
69          geodesic : true
70          };
71   
72          drawingManager = new google.maps.drawing.DrawingManager({
73          drawingMode: google.maps.drawing.OverlayType.MARKER,
74          drawingControl: true,
75          drawingControlOptions: {
76            position: google.maps.ControlPosition.TOP_CENTER,
77            drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
78          },
79          markerOptions: { draggable: true},
80          circleOptions: {
81            fillColor: '#CA4A2F',
82            fillOpacity: 0.4,
83            strokeWeight: sliderValue,
84            clickable: false,
85            editable: true,
86            draggable: true,
87            zIndex: 1
88          },
89   
90          polylineOptions : polyOptions,
91          polygonOptions: polyOptions,
92          rectangleOptions: polyOptions,
93         
94   
95          });
96 
97        drawingManager.setMap(map);
98       
99       
100        //overlays.push(event.overlay); // store reference to added overlay
101        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
102            overlays.push(event.overlay); // store reference to added overlay
103       
104       
105            var newShape = event.overlay;
106            newShape.type = event.type;
107            google.maps.event.addListener(newShape, 'click', function() {
108                setSelection(newShape);
109            });
110        });
111       
112            function clearSelection () {
113                if (selectedShape) {
114                    if (selectedShape.type !== 'marker') {
115                        selectedShape.setEditable(false);
116                    }
117                   
118                    selectedShape = null;
119                }
120            }
121
122            function setSelection (shape) {
123                if (shape.type !== 'marker') {
124                    clearSelection();
125                    shape.setEditable(true);
126                    //selectColor(shape.get('fillColor') || shape.get('strokeColor'));
127                }
128               
129                selectedShape = shape;
130            }
131
132      }
133     
134     
135     
136     
137        function removeLine() {
138        var lastOverlay = overlays.pop();
139        if (lastOverlay) lastOverlay.setMap(null);
140        console.log("DONE");
141        }
142       
143        function deleteAllShape() {
144        for (var i=0; i < overlays.length; i++)
145        {
146            overlays[i].setMap(null);
147        }
148        overlays = [];
149        }
150    </script>
151    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap"
152         async defer></script>
153  </body>
154</html>
Note: See TracBrowser for help on using the browser.