gmap.pt
3.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
map_zoom map_zoom|field.widget.map_zoom;
map_center map_center|field.widget.map_center;
gmap_key gmap_key|field.widget.gmap_key;
gmap_height gmap_height|field.widget.gmap_height;
gmap_width gmap_width|field.widget.gmap_width;
gmap_control gmap_control|field.widget.gmap_control;
html_info html_info|field.widget.html_info;
gmap_data_style gmap_data_style|field.widget.gmap_data_style;
gmap_edit_url gmap_edit_url|field.widget.gmap_edit_url;
show_options show_options|field.widget.show_options;
"
tal:omit-tag="">
<textarea id="${oid}" name="${name}" readonly
tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};">${cstruct}</textarea>
<div class="row" tal:condition="show_options">
<div class="input-group">
<label class="control-label">Fill Color</label>
<input type="color" id="fillColor">
<label class="control-label">Opacity</label>
<select id="fillOpacity">
<option value="0.0">0.0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
<label class="control-label">Stroke Color</label>
<input type="color" id="strokeColor">
<label class="control-label">Opacity</label>
<select id="strokeOpacity">
<option value="0.0">0.0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
<label class="control-label">Weight</label>
<select id="strokeWeight">
<option value="1.0">1.0</option>
<option value="2.0">2.0</option>
<option value="3.0">3.0</option>
<option value="4.0">4.0</option>
<option value="5.0">5.0</option>
<option value="6.0">6.0</option>
<option value="7.0">7.0</option>
<option value="8.0">8.0</option>
<option value="9.0">9.0</option>
</select>
</div>
</div>
<div id="gmap" class="gmap"></div>
<style>
.gmap {
height: ${gmap_height};
width: ${gmap_width};
}
</style>
<script type="text/javascript">
let map_zoom = ${map_zoom};
let map_center = ${map_center};
let geom = document.getElementById('${oid}');
let contents = ${html_info};
let edit_url = "${gmap_edit_url}";
let gmapDataStyle = ${structure: gmap_data_style};
let gmapControls = ${gmap_control};
//styleControls = document.getElementById("${oid}-options");
//styleControls.value = JSON.stringify(featureStyleOptions);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&key=${gmap_key}&libraries=drawing&callback=initMap">
</script>
</span>