3 my $field = $opt{'field'};
4 my $id = $opt{'id'} || $opt{'field'};
5 my $div_id = "div_$id";
7 my $vertices_json = $opt{'curr_value'} || '[]';
9 <& hidden.html, %opt &>
10 <div id="<% $div_id %>" style="height: 600px; width: 600px"></div>
11 <div id="<% $div_id %>_hint" style="width: 100%; border: 2px solid black; text-align: center; box-sizing: border-box; padding: 4px"> </div>
13 <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&v=3.22"></script>
18 function updateFormInput(event) {
19 var path = window.polygon.getPath();
20 var vertices = []; // array of arrays, geoJSON style
21 for (var i =0; i < path.getLength(); i++) {
22 var xy = path.getAt(i);
23 vertices[i] = [ xy.lat(), xy.lng() ];
25 if (console) console.log(vertices); //XXX
26 $('#<% $field %>').prop('value', JSON.stringify(vertices));
32 center: {lat: 39.40114, lng: -96.57127}, // continental U.S.
33 mapTypeId: google.maps.MapTypeId.ROADMAP,
36 streetViewControl: false,
38 var div_map = $('#<% $div_id %>');
39 var div_hint = $('#<% $div_id %>_hint');
40 map = new google.maps.Map(div_map[0], mapOptions);
42 var set_hint = function(txt) {
46 var polygonComplete = function(p) {
49 drawingManager.setDrawingMode(null);
50 drawingManager.setOptions({ drawingControl: false });
52 // double click to delete a vertex (so long as it remains a polygon)
53 p.addListener('dblclick', function (mev) {
54 if (mev.vertex != null && window.polygon.getPath().length > 3) {
55 p.getPath().removeAt(mev.vertex);
58 // any time the polygon is modified, update the vertex list
59 p.getPath().addListener('set_at', updateFormInput);
60 p.getPath().addListener('insert_at', updateFormInput);
61 p.getPath().addListener('remove_at', updateFormInput);
66 set_hint('Edit the zone by dragging the markers. Double-click to remove a vertex.');
70 var polygonOptions = {
73 strokeColor: '#0000a0',
81 var vertex_array = <% $vertices_json %>;
82 if ( vertex_array.length > 2 ) {
83 // then we already have a polygon. make it acceptable to google maps,
84 // and also create a bounding box for it and fit the map to that.
87 var bounds = new google.maps.LatLngBounds();
88 for (var i = 0; i < vertex_array.length; i++) {
89 var xy = new google.maps.LatLng(vertex_array[i][0], vertex_array[i][1]);
94 polygonOptions.paths = [ path ];
95 polygonComplete(new google.maps.Polygon(polygonOptions));
96 map.fitBounds(bounds);
99 // there are no vertices, or not enough to make a polygon, so
100 // enable drawing mode to create a new one
102 drawingManager = new google.maps.drawing.DrawingManager({
103 drawingMode: google.maps.drawing.OverlayType.POLYGON,
104 drawingControl: true,
105 drawingControlOptions: {
106 position: google.maps.ControlPosition.TOP_CENTER,
108 google.maps.drawing.OverlayType.POLYGON,
111 polygonOptions: polygonOptions,
114 // after a single polygon is drawn: remember it, add a listener to let
115 // nodes be deleted, and exit drawing mode
116 drawingManager.addListener('polygoncomplete', polygonComplete);
117 drawingManager.setMap(map);
119 // center the map on the user (for lack of a better choice)
120 if (navigator.geolocation) {
121 navigator.geolocation.getCurrentPosition(function(position) {
123 lat: position.coords.latitude,
124 lng: position.coords.longitude
130 } // on error, or if geolocation isn't available, do nothing
132 set_hint('Click to place the corners of the zone.');