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="<% $fsurl %>elements/jquery.js"></script>
14 <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&v=3.22"></script>
19 function updateFormInput(event) {
20 var path = window.polygon.getPath();
21 var vertices = []; // array of arrays, geoJSON style
22 for (var i =0; i < path.getLength(); i++) {
23 var xy = path.getAt(i);
24 vertices[i] = [ xy.lat(), xy.lng() ];
26 if (console) console.log(vertices); //XXX
27 $('#<% $field %>').prop('value', JSON.stringify(vertices));
33 center: {lat: 39.40114, lng: -96.57127}, // continental U.S.
34 mapTypeId: google.maps.MapTypeId.ROADMAP,
37 streetViewControl: false,
39 var div_map = $('#<% $div_id %>');
40 var div_hint = $('#<% $div_id %>_hint');
41 map = new google.maps.Map(div_map[0], mapOptions);
43 var set_hint = function(txt) {
47 var polygonComplete = function(p) {
50 drawingManager.setDrawingMode(null);
51 drawingManager.setOptions({ drawingControl: false });
53 // double click to delete a vertex (so long as it remains a polygon)
54 p.addListener('dblclick', function (mev) {
55 if (mev.vertex != null && window.polygon.getPath().length > 3) {
56 p.getPath().removeAt(mev.vertex);
59 // any time the polygon is modified, update the vertex list
60 p.getPath().addListener('set_at', updateFormInput);
61 p.getPath().addListener('insert_at', updateFormInput);
62 p.getPath().addListener('remove_at', updateFormInput);
67 set_hint('Edit the zone by dragging the markers. Double-click to remove a vertex.');
71 var polygonOptions = {
74 strokeColor: '#0000a0',
82 var vertex_array = <% $vertices_json %>;
83 if ( vertex_array.length > 2 ) {
84 // then we already have a polygon. make it acceptable to google maps,
85 // and also create a bounding box for it and fit the map to that.
88 var bounds = new google.maps.LatLngBounds();
89 for (var i = 0; i < vertex_array.length; i++) {
90 var xy = new google.maps.LatLng(vertex_array[i][0], vertex_array[i][1]);
95 polygonOptions.paths = [ path ];
96 polygonComplete(new google.maps.Polygon(polygonOptions));
97 map.fitBounds(bounds);
100 // there are no vertices, or not enough to make a polygon, so
101 // enable drawing mode to create a new one
103 drawingManager = new google.maps.drawing.DrawingManager({
104 drawingMode: google.maps.drawing.OverlayType.POLYGON,
105 drawingControl: true,
106 drawingControlOptions: {
107 position: google.maps.ControlPosition.TOP_CENTER,
109 google.maps.drawing.OverlayType.POLYGON,
112 polygonOptions: polygonOptions,
115 // after a single polygon is drawn: remember it, add a listener to let
116 // nodes be deleted, and exit drawing mode
117 drawingManager.addListener('polygoncomplete', polygonComplete);
118 drawingManager.setMap(map);
120 // center the map on the user (for lack of a better choice)
121 if (navigator.geolocation) {
122 navigator.geolocation.getCurrentPosition(function(position) {
124 lat: position.coords.latitude,
125 lng: position.coords.longitude
131 } // on error, or if geolocation isn't available, do nothing
133 set_hint('Click to place the corners of the zone.');