Skip to content

irul / opensipkd-base

Go to a project
Commit 6fd0dd23 by aagusti
Options

pemisahan gmap js dengan controls

1 parent d909da97
Inline Side-by-side
Showing 3 changed files with 363 additions and 311 deletions
opensipkd/base/static/js/gmap.js 0 → 100644
let map;
let btnCurrent = {lat: 0, lng: 0};
let selectedFeature = null;
let btnRemove;
let infoWindow;
let feature_data = {};
let strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity;
let strokeColorControl, strokeOpacityControl, strokeWeightControl, fillColorControl, fillOpacityControl;
//let styleControls;
let featureStyleOptions = {
strokeColor: "#810fcb",
strokeOpacity: "1.0",
strokeWeight: "3.0",
fillColor: "#810fcb",
fillOpacity: "0.5",
};
function initMap() {
map = new google.maps.Map(document.getElementById("gmap"), {
center: {lat: map_center[0], lng: map_center[1]},
zoom: map_zoom,
animation: google.maps.Animation.DROP,
streetViewControl: false,
mapTypeId: "hybrid",
mapTypeControlOptions: {
// style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
});
featureStyleOptions = Object.assign(gmapDataStyle, featureStyleOptions);
map.data.setStyle(featureStyleOptions);
infoWindow = new google.maps.InfoWindow({
content: "",
ariaLabel: "Uluru",
});
map.data.setControls(gmapControls);
// google.maps.event.addListener(map, 'zoom_changed', function () {
// let zoomLevel = map.getZoom();
// if (zoomLevel < 11) {
// map.data.forEach(function (e) {
// let bounds = new google.maps.LatLngBounds();
// bounds = extendBound(bounds, e);
// map.data.add({
// geometry: new google.maps.Data.Point(bounds.getCenter()),
// });
// });
// }
// });
google.maps.event.addListener(map.data, 'addfeature', function (e) {
if (map.data.map.data.getControls() !== null) {
let bounds = new google.maps.LatLngBounds();
bounds = extendBound(bounds, e.feature);
selectedFeature = e.feature;
btnRemove.disabled = false;
map.fitBounds(bounds);
}
});
// 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) {
if (e.hasOwnProperty("feature") === true) {
selectedFeature = e.feature;
btnRemove.disabled = false;
if (e.feature.getGeometry().getType() === "Point") {
map.setCenter(e.feature.getGeometry().get());
map.setZoom(18);
}
showInfo(e);
} else {
selectedFeature = null;
btnRemove.disabled = true;
}
});
map.data.setStyle((feature) => {
console.log(feature);
if (feature.getProperty("styles")) {
featureStyleOptions = Object.assign(featureStyleOptions, JSON.parse(feature.getProperty("styles")));
setFeatureStyleOptionControls();
} else {
feature.setProperty("styles", JSON.stringify(featureStyleOptions))
}
return featureStyleOptions;
});
addYourLocationButton();
loadData();
bindDataLayerListeners(map.data);
strokeColorControl = document.getElementById('strokeColor');
strokeOpacityControl = document.getElementById('strokeOpacity');
strokeWeightControl = document.getElementById('strokeWeight');
fillColorControl = document.getElementById('fillColor');
fillOpacityControl = document.getElementById('fillOpacity');
if (strokeColorControl !== null) {
setFeatureStyleOptionControls();
setStyleControlEvents();
}
}
function setStyleControlEvents() {
if (strokeColorControl !== null) {
strokeColorControl.addEventListener('change', featureStyleOptionsControlChange);
strokeOpacityControl.addEventListener('change', featureStyleOptionsControlChange);
strokeWeightControl.addEventListener('change', featureStyleOptionsControlChange);
fillColorControl.addEventListener('change', featureStyleOptionsControlChange);
fillOpacityControl.addEventListener('change', featureStyleOptionsControlChange);
}
}
function setFeatureStyleOptionControls() {
if (strokeColorControl !== null) {
strokeColorControl.value = featureStyleOptions.strokeColor;
strokeOpacityControl.value = featureStyleOptions.strokeOpacity;
strokeWeightControl.value = featureStyleOptions.strokeWeight;
fillColorControl.value = featureStyleOptions.fillColor;
fillOpacityControl.value = featureStyleOptions.fillOpacity;
}
}
function featureStyleOptionsControlChange() {
featureStyleOptions.strokeColor = strokeColorControl.value;
featureStyleOptions.strokeOpacity = strokeOpacityControl.value;
featureStyleOptions.strokeWeight = strokeWeightControl.value;
featureStyleOptions.fillColor = fillColorControl.value;
featureStyleOptions.fillOpacity = fillOpacityControl.value;
// if (styleControls !== null)
// styleControls.value = JSON.stringify(featureStyleOptions);
if (selectedFeature !== null) {
selectedFeatureSetStyle(selectedFeature);
}
}
function selectedFeatureSetStyle(f) {
f.setProperty("styles", JSON.stringify(featureStyleOptions));
map.data.revertStyle();
map.data.overrideStyle(f, featureStyleOptions);
console.log(f.getProperty("styles"));
saveData();
}
function loadData() {
if (geom.value === "") return;
let data = JSON.parse(geom.value);
if (data !== undefined) {
map.data.addGeoJson(data);
}
setControls();
}
function showInfo(event) {
if (contents.length < 1) return;
infoWindow.setPosition(event.latLng);
let content = "";
for (let key in contents) {
let keys = contents[key];
let value = key === "id" ? event.feature.getId() : event.feature.getProperty(key);
value = value === undefined ? "" : value
let cnt = keys[0] + ": " + value;
if (keys.length > 1) {
if (keys[1] === 'b') {
cnt = "<b>" + cnt + "</b>"
}
}
content += cnt + '<br>';
}
if (edit_url !== "" && event.feature.getId() !== undefined) {
let url = edit_url.replace("{id}", selectedFeature.getId());
content += '<a class="btn btn-info" href="{url}">Edit</a>'.replace("{url}", url);
}
infoWindow.setContent(content);
infoWindow.open(map);
}
function bindDataLayerListeners(dataLayer) {
dataLayer.addListener('addfeature', saveData);
dataLayer.addListener('removefeature', saveData);
dataLayer.addListener('setgeometry', saveData);
}
function extendBound(bounds, feature) {
if (feature === undefined) return bounds;
let featureType = feature.getGeometry().getType();
if (featureType === 'LineString') {
feature.getGeometry().getArray().forEach(function (latLng) {
bounds.extend(latLng);
});
} else if (featureType === 'Polygon') {
feature.getGeometry().getArray().forEach(function (path) {
path.getArray().forEach(function (latLng) {
bounds.extend(latLng);
});
});
}
return bounds;
}
function setControls() {
let total = 0;
let bounds = new google.maps.LatLngBounds();
map.data.forEach(function (e) {
total++;
bounds = extendBound(bounds, e);
});
if (total > 0) {
map.fitBounds(bounds);
map.data.setDrawingMode(null);
map.data.setControls(null);
let zoomLevel = map.getZoom();
if (total > 1) {
map.data.forEach(function (e) {
let bounds = new google.maps.LatLngBounds();
bounds = extendBound(bounds, e);
let properties = {};
e.forEachProperty(
function (val, key) {
properties[key] = val;
}
);
map.data.add({
geometry: new google.maps.Data.Point(bounds.getCenter()),
properties: properties,
// id:e.getId()
});
});
}
} else {
map.data.setControls(gmapControls);
// map.data.setDrawingMode('polygon');
}
}
function saveData() {
map.data.toGeoJson(function (json) {
geom.value = JSON.stringify(json);
});
setControls();
}
function addYourLocationButton() {
let controlDiv = document.createElement('div');
let btnCurrent = document.createElement('button');
btnCurrent.type = "button";
btnCurrent.style.backgroundColor = '#fff';
btnCurrent.style.border = 'none';
btnCurrent.style.outline = 'none';
btnCurrent.style.width = '28px';
btnCurrent.style.height = '28px';
btnCurrent.style.borderRadius = '2px';
btnCurrent.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
btnCurrent.style.cursor = 'pointer';
btnCurrent.style.marginRight = '10px';
btnCurrent.style.padding = '0';
btnCurrent.title = 'Your Location';
controlDiv.appendChild(btnCurrent);
let imgCurrent = document.createElement('div');
imgCurrent.style.margin = '5px';
imgCurrent.style.width = '18px';
imgCurrent.style.height = '18px';
imgCurrent.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
imgCurrent.style.backgroundSize = '180px 18px';
imgCurrent.style.backgroundPosition = '0 0';
imgCurrent.style.backgroundRepeat = 'no-repeat';
btnCurrent.appendChild(imgCurrent);
let txtCurrent = document.createElement('i');
txtCurrent.className = "fa";
txtCurrent.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i>
imgCurrent.appendChild(txtCurrent);
google.maps.event.addListener(map, 'center_changed', function () {
imgCurrent.style['background-position'] = '0 0';
});
btnCurrent.addEventListener('click', function () {
let imgX = 0,
animationInterval = setInterval(function () {
imgX = -imgX - 18;
imgCurrent.style['background-position'] = imgX + 'px 0';
}, 500);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(latlng);
map.setZoom(18);
clearInterval(animationInterval);
btnCurrent.style['background-position'] = '-144px 0';
});
} else {
clearInterval(animationInterval);
btnCurrent.style['background-position'] = '0 0';
}
});
// let btnRemove = document.getElementById('btnRemove');
btnRemove = document.createElement('button');
btnRemove.type = "button";
btnRemove.style.backgroundColor = '#fff';
btnRemove.style.border = 'none';
btnRemove.style.outline = 'none';
btnRemove.style.width = '28px';
btnRemove.style.height = '28px';
btnRemove.style.borderRadius = '2px';
btnRemove.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
btnRemove.style.cursor = 'pointer';
// btnRemove.style.marginRight = '10px';
btnRemove.style.padding = '0';
btnRemove.title = 'Delete Selected Feature';
controlDiv.appendChild(btnRemove);
let imgRemove = document.createElement('div');
imgRemove.style.margin = '5px';
imgRemove.style.width = '18px';
imgRemove.style.height = '18px';
btnRemove.appendChild(imgRemove);
let txtRemove = document.createElement('i');
txtRemove.className = "fa fa-trash";
txtRemove.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i>
imgRemove.appendChild(txtRemove);
btnRemove.addEventListener("click", function () {
if (selectedFeature !== null) {
map.data.remove(selectedFeature);
selectedFeature = null;
btnRemove.disabled = true;
saveData();
map.data.setControls(gmapControls);
}
});
controlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controlDiv);
}
opensipkd/base/views/widget_os.py
......@@ -368,7 +368,11 @@ class MapWidget(Widget):
}
gmap_edit_url = ""
show_options = False
requirements = ()
requirements = (('deform', None),
{
"js": "opensipkd.base:static/js/gmap.js",
"css": "deform:static/select2/select2.css",
},)
def __init__(self, **kw):
super().__init__(**kw)
......
opensipkd/base/views/widgets/gmap.pt
......@@ -18,19 +18,15 @@
tal:attributes="class string: form-control ${css_class or ''};
style style;
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">
<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" selected>0.2</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>
......@@ -41,12 +37,12 @@
<option value="1.0">1.0</option>
</select>
<label class="control-label">Stroke Color</label>
<input type="color" id="strokeColor" value="#e19209">
<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" selected>0.2</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>
......@@ -56,17 +52,17 @@
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
<label class="control-label">Wight</label>
<label class="control-label">Weight</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>
<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>
......@@ -82,301 +78,13 @@
<script type="text/javascript">
let map_zoom = ${map_zoom};
let map_center = ${map_center};
let map;
let btnCurrent = {lat: 0, lng: 0};
let selectedFeature = null;
let btnRemove;
let geom = document.getElementById('${oid}');
let infoWindow;
let feature_data = {};
let contents = ${html_info};
let edit_url = "${gmap_edit_url}";
function initMap() {
map = new google.maps.Map(document.getElementById("gmap"), {
center: {lat: map_center[0], lng: map_center[1]},
zoom: map_zoom,
animation: google.maps.Animation.DROP,
streetViewControl: false,
mapTypeId: "hybrid",
mapTypeControlOptions: {
// style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
},
});
map.data.setStyle(${structure: gmap_data_style});
infoWindow = new google.maps.InfoWindow({
content: "",
ariaLabel: "Uluru",
});
map.data.setControls(${gmap_control});
// google.maps.event.addListener(map, 'zoom_changed', function () {
// let zoomLevel = map.getZoom();
// if (zoomLevel < 11) {
// map.data.forEach(function (e) {
// let bounds = new google.maps.LatLngBounds();
// bounds = extendBound(bounds, e);
// map.data.add({
// geometry: new google.maps.Data.Point(bounds.getCenter()),
// });
// });
// }
// });
google.maps.event.addListener(map.data, 'addfeature', function (e) {
if (map.data.map.data.getControls() !== null) {
let bounds = new google.maps.LatLngBounds();
bounds = extendBound(bounds, e.feature);
selectedFeature = e.feature;
btnRemove.disabled = false;
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) {
if (e.hasOwnProperty("feature") === true) {
selectedFeature = e.feature;
btnRemove.disabled = false;
if (e.feature.getGeometry().getType() === "Point") {
map.setCenter(e.feature.getGeometry().get());
map.setZoom(18);
}
showInfo(e);
} else {
selectedFeature = null;
btnRemove.disabled = true;
}
});
addYourLocationButton();
loadData();
bindDataLayerListeners(map.data);
}
function loadData() {
if (geom.value === "") return;
let data = JSON.parse(geom.value);
if (data !== undefined) {
map.data.forEach(function (f) {
map.data.remove(f);
});
map.data.addGeoJson(data);
}
setControls();
}
function showInfo(event) {
if (contents.length < 1) return;
infoWindow.setPosition(event.latLng);
let content = "";
for (let key in contents) {
let keys = contents[key];
let value = key === "id" ? event.feature.getId() : event.feature.getProperty(key);
value = value === undefined ? "" : value
let cnt = keys[0] + ": " + value;
if (keys.length > 1) {
if (keys[1] === 'b') {
cnt = "<b>" + cnt + "</b>"
}
}
content += cnt + '<br>';
}
if (edit_url !== "" && event.feature.getId() !== undefined) {
let url = edit_url.replace("{id}", selectedFeature.getId());
content += '<a class="btn btn-info" href="{url}">Edit</a>'.replace("{url}", url);
}
infoWindow.setContent(content);
infoWindow.open(map);
}
function bindDataLayerListeners(dataLayer) {
dataLayer.addListener('addfeature', saveData);
dataLayer.addListener('removefeature', saveData);
dataLayer.addListener('setgeometry', saveData);
}
function extendBound(bounds, feature) {
if (feature === undefined) return bounds;
let featureType = feature.getGeometry().getType();
if (featureType === 'LineString') {
feature.getGeometry().getArray().forEach(function (latLng) {
bounds.extend(latLng);
});
} else if (featureType === 'Polygon') {
feature.getGeometry().getArray().forEach(function (path) {
path.getArray().forEach(function (latLng) {
bounds.extend(latLng);
});
});
}
return bounds;
}
function setControls() {
let total = 0;
let bounds = new google.maps.LatLngBounds();
map.data.forEach(function (e) {
total++;
bounds = extendBound(bounds, e);
});
if (total > 0) {
map.fitBounds(bounds);
map.data.setDrawingMode(null);
map.data.setControls(null);
let zoomLevel = map.getZoom();
if (total > 1) {
map.data.forEach(function (e) {
let bounds = new google.maps.LatLngBounds();
bounds = extendBound(bounds, e);
let properties = {};
e.forEachProperty(
function (val, key) {
properties[key] = val;
}
);
map.data.add({
geometry: new google.maps.Data.Point(bounds.getCenter()),
properties: properties,
// id:e.getId()
});
});
}
} else {
map.data.setControls(${gmap_control});
// map.data.setDrawingMode('polygon');
}
}
function saveData() {
map.data.toGeoJson(function (json) {
geom.value = JSON.stringify(json);
});
setControls();
}
function addYourLocationButton() {
let controlDiv = document.createElement('div');
let btnCurrent = document.createElement('button');
btnCurrent.type = "button";
btnCurrent.style.backgroundColor = '#fff';
btnCurrent.style.border = 'none';
btnCurrent.style.outline = 'none';
btnCurrent.style.width = '28px';
btnCurrent.style.height = '28px';
btnCurrent.style.borderRadius = '2px';
btnCurrent.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
btnCurrent.style.cursor = 'pointer';
btnCurrent.style.marginRight = '10px';
btnCurrent.style.padding = '0';
btnCurrent.title = 'Your Location';
controlDiv.appendChild(btnCurrent);
let imgCurrent = document.createElement('div');
imgCurrent.style.margin = '5px';
imgCurrent.style.width = '18px';
imgCurrent.style.height = '18px';
imgCurrent.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
imgCurrent.style.backgroundSize = '180px 18px';
imgCurrent.style.backgroundPosition = '0 0';
imgCurrent.style.backgroundRepeat = 'no-repeat';
btnCurrent.appendChild(imgCurrent);
let txtCurrent = document.createElement('i');
txtCurrent.className = "fa";
txtCurrent.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i>
imgCurrent.appendChild(txtCurrent);
google.maps.event.addListener(map, 'center_changed', function () {
imgCurrent.style['background-position'] = '0 0';
});
btnCurrent.addEventListener('click', function () {
let imgX = 0,
animationInterval = setInterval(function () {
imgX = -imgX - 18;
imgCurrent.style['background-position'] = imgX + 'px 0';
}, 500);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(latlng);
map.setZoom(18);
clearInterval(animationInterval);
btnCurrent.style['background-position'] = '-144px 0';
});
} else {
clearInterval(animationInterval);
btnCurrent.style['background-position'] = '0 0';
}
});
// let btnRemove = document.getElementById('btnRemove');
btnRemove = document.createElement('button');
btnRemove.type = "button";
btnRemove.style.backgroundColor = '#fff';
btnRemove.style.border = 'none';
btnRemove.style.outline = 'none';
btnRemove.style.width = '28px';
btnRemove.style.height = '28px';
btnRemove.style.borderRadius = '2px';
btnRemove.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
btnRemove.style.cursor = 'pointer';
// btnRemove.style.marginRight = '10px';
btnRemove.style.padding = '0';
btnRemove.title = 'Delete Selected Feature';
controlDiv.appendChild(btnRemove);
let imgRemove = document.createElement('div');
imgRemove.style.margin = '5px';
imgRemove.style.width = '18px';
imgRemove.style.height = '18px';
btnRemove.appendChild(imgRemove);
let txtRemove = document.createElement('i');
txtRemove.className = "fa fa-trash";
txtRemove.ariaHidden = "true"; //<i class="fa fa-trash" aria-hidden="true"></i>
imgRemove.appendChild(txtRemove);
btnRemove.addEventListener("click", function () {
if (selectedFeature !== null) {
map.data.remove(selectedFeature);
selectedFeature = null;
btnRemove.disabled = true;
saveData();
map.data.setControls(${gmap_control});
}
});
controlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(controlDiv);
}
let gmapDataStyle = ${structure: gmap_data_style};
let gmapControls = ${gmap_control};
//styleControls = document.getElementById("${oid}-options");
//styleControls.value = JSON.stringify(featureStyleOptions);
</script>
<script async defer
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!