Try ERPNext Buy Support Partners Foundation Foundation Members

[Feature Request] Add map view to Sidebar

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: https://github.com/frappe/frappe/issues/8229

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 &copy; <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"
			];
		}	
	}