Hey, I have been customizing the frappe app to add the map view to the sidebar if the doctype has latitude and longitude, but still I can’t apply the filters. I do not know what I’m doing wrong. Maybe you help me to figure out how to do it.
gif here: [Feature Request] Add map view to Sidebar · Issue #8229 · frappe/frappe · GitHub
frappe.provide("frappe.views");
frappe.views.MapView = class MapView extends frappe.views.ListView {
get view_name() {
return 'Map';
}
setup_defaults() {
super.setup_defaults();
this.page_title = this.page_title + ' ' + __('Map');
}
setup_view() {
}
on_filter_change() {
this.render();
var coords = cur_list.coords_map;
}
prepare_data(data) {
super.prepare_data(data);
this.items = this.data.map(d => {return d;});
}
render() {
this.get_coords()
.then(() => {
this.render_map_view();
});
this.$paging_area.find('.level-left').append('<div></div>');
}
render_map_view() {
this.$result.html(`
<div id="mapid" class="map-view-container">
</div>
`);
var markers = {};
var map = L.map('mapid').setView([12.3112899, -85.7384542], 8); //Harcoded for testing
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
L.control.scale().addTo(map);
var coords = this.coords_map;
for (const [key, value] of Object.entries(coords)) {
markers = new L.marker([value[0],value[1]])
.bindPopup(key)
.addTo(map);
}
}
get_coords() {
return frappe.call({
method: 'frappe.geo.utils.get_coords',
args: {
doctype: this.doctype,
names: this.data.map(i => i.name)
}
}).then(r => {
this.coords_map = Object.assign(this.coords_map || {}, r.message);
});
}
get required_libs() {
return [
"assets/frappe/js/lib/leaflet/leaflet.css",
"assets/frappe/js/lib/leaflet/leaflet.js"
];
}
}