Skip to content

aa.gusti / opensipkd-base

Go to a project
Commit d909da97 by aagusti
Options

perbaikan template

1 parent d6eef705
Inline Side-by-side
Showing 2 changed files with 96 additions and 13 deletions
opensipkd/base/views/widget_os.py
...@@ -361,12 +361,13 @@ class MapWidget(Widget): ...@@ -361,12 +361,13 @@ class MapWidget(Widget):
strip = True strip = True
html_info = {} html_info = {}
gmap_data_style = { gmap_data_style = {
"editable": "true", "editable": True,
"draggable": "true", "draggable": True,
"clickable": "true", "clickable": True,
"removable": "true", "removable": True,
} }
gmap_edit_url = "" gmap_edit_url = ""
show_options = False
requirements = () requirements = ()
def __init__(self, **kw): def __init__(self, **kw):
......
opensipkd/base/views/widgets/gmap.pt
...@@ -11,13 +11,65 @@ ...@@ -11,13 +11,65 @@
html_info html_info|field.widget.html_info; html_info html_info|field.widget.html_info;
gmap_data_style gmap_data_style|field.widget.gmap_data_style; gmap_data_style gmap_data_style|field.widget.gmap_data_style;
gmap_edit_url gmap_edit_url|field.widget.gmap_edit_url; gmap_edit_url gmap_edit_url|field.widget.gmap_edit_url;
show_options show_options|field.widget.show_options;
" "
tal:omit-tag=""> tal:omit-tag="">
<textarea id="${oid}" name="${name}" style="display:none;" readonly <textarea id="${oid}" name="${name}" readonly
tal:attributes="class string: form-control ${css_class or ''}; tal:attributes="class string: form-control ${css_class or ''};
style style; style style;
attributes|field.widget.attributes|{};">${cstruct}</textarea> attributes|field.widget.attributes|{};">${cstruct}</textarea>
<textarea id="${oid}-options" name="${name}-options" style="display:block;" 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" value="#ffff00">
<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" selected>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" value="#e19209">
<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" selected>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">Wight</label>
<select id="strokeWeight">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
</div>
<div id="gmap" class="gmap"></div> <div id="gmap" class="gmap"></div>
<style> <style>
...@@ -47,12 +99,14 @@ ...@@ -47,12 +99,14 @@
zoom: map_zoom, zoom: map_zoom,
animation: google.maps.Animation.DROP, animation: google.maps.Animation.DROP,
streetViewControl: false, streetViewControl: false,
mapTypeId: "satellite", mapTypeId: "hybrid",
mapTypeControlOptions: { mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, // style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
}, },
}); });
map.data.setStyle(${structure: gmap_data_style}); map.data.setStyle(${structure: gmap_data_style});
infoWindow = new google.maps.InfoWindow({ infoWindow = new google.maps.InfoWindow({
content: "", content: "",
ariaLabel: "Uluru", ariaLabel: "Uluru",
...@@ -73,13 +127,38 @@ ...@@ -73,13 +127,38 @@
// } // }
// }); // });
google.maps.event.addListener(map.data, 'addfeature', function (e) { google.maps.event.addListener(map.data, 'addfeature', function (e) {
if (map.data.getDrawingMode() !== null) { if (map.data.map.data.getControls() !== null) {
let bounds = new google.maps.LatLngBounds(); let bounds = new google.maps.LatLngBounds();
bounds = extendBound(bounds, e.feature); bounds = extendBound(bounds, e.feature);
selectedFeature = e.feature;
btnRemove.disabled = false;
map.fitBounds(bounds); map.fitBounds(bounds);
let strokeColor = document.getElementById('strokeColor');
if (strokeColor !== null) {
map.data.revertStyle();
map.data.overrideStyle(e.feature, {
strokeColor: document.getElementById('strokeColor').value,
strokeOpacity: document.getElementById('strokeOpacity').value,
strokeWeight: document.getElementById('strokeWeight').value,
fillColor: document.getElementById('fillColor').value,
fillOpacity: document.getElementById('fillOpacity').value,
});
}
// console.log(e.feature.strokeColor);
// e.feature.strokeColor = document.getElementById('strokeColor').value;
// e.feature.strokeOpacity = document.getElementById('strokeOpacity').value;
// e.feature.strokeWeight = document.getElementById('strokeWeight').value;
// e.feature.fillColor = document.getElementById('fillColor').value;
// e.feature.fillOpacity = document.getElementById('fillOpacity').value;
} }
}); });
google.maps.event.addListener(map.data, 'polygoncomplete', function (e) {
e.strokeColor = document.getElementById('strokeColor').value;
e.strokeOpacity = document.getElementById('strokeOpacity').value;
e.strokeWeight = document.getElementById('strokeWeight').value;
e.fillColor = document.getElementById('fillColor').value;
e.fillOpacity = document.getElementById('fillOpacity').value;
});
google.maps.event.addListener(map.data, 'click', function (e) { google.maps.event.addListener(map.data, 'click', function (e) {
if (e.hasOwnProperty("feature") === true) { if (e.hasOwnProperty("feature") === true) {
selectedFeature = e.feature; selectedFeature = e.feature;
...@@ -95,8 +174,8 @@ ...@@ -95,8 +174,8 @@
} }
}); });
loadData();
addYourLocationButton(); addYourLocationButton();
loadData();
bindDataLayerListeners(map.data); bindDataLayerListeners(map.data);
} }
...@@ -113,7 +192,7 @@ ...@@ -113,7 +192,7 @@
} }
function showInfo(event) { function showInfo(event) {
if (contents.length<1) return; if (contents.length < 1) return;
infoWindow.setPosition(event.latLng); infoWindow.setPosition(event.latLng);
let content = ""; let content = "";
for (let key in contents) { for (let key in contents) {
...@@ -191,6 +270,7 @@ ...@@ -191,6 +270,7 @@
} }
} else { } else {
map.data.setControls(${gmap_control}); map.data.setControls(${gmap_control});
// map.data.setDrawingMode('polygon');
} }
} }
...@@ -247,8 +327,9 @@ ...@@ -247,8 +327,9 @@
navigator.geolocation.getCurrentPosition(function (position) { navigator.geolocation.getCurrentPosition(function (position) {
let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(latlng); map.setCenter(latlng);
map.setZoom(18);
clearInterval(animationInterval); clearInterval(animationInterval);
secondChild.style['background-position'] = '-144px 0'; btnCurrent.style['background-position'] = '-144px 0';
}); });
} else { } else {
clearInterval(animationInterval); clearInterval(animationInterval);
...@@ -288,6 +369,7 @@ ...@@ -288,6 +369,7 @@
selectedFeature = null; selectedFeature = null;
btnRemove.disabled = true; btnRemove.disabled = true;
saveData(); saveData();
map.data.setControls(${gmap_control});
} }
}); });
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!