Merge pull request #32043 from barredterra/mapview

frappe/geo/utils.py

@@ -2,6 +2,7 @@
 # License: MIT. See LICENSE
 
 import frappe
+from frappe.utils.data import flt
 
 
 @frappe.whitelist()
@@ -46,14 +47,19 @@ def merge_location_features_in_one(coords):
 
 def create_gps_markers(coords):
 	"""Build Marker based on latitude and longitude."""
-	geojson_dict = []
-	for i in coords:
-		node = {"type": "Feature", "properties": {}, "geometry": {"type": "Point", "coordinates": None}}
-		node["properties"]["name"] = i.name
-		node["geometry"]["coordinates"] = [i.longitude, i.latitude]  # geojson needs it reverse!
-		geojson_dict.append(node.copy())
-
-	return geojson_dict
+	return [
+		{
+			"type": "Feature",
+			"properties": {
+				"name": i.name,
+			},
+			"geometry": {
+				"type": "Point",
+				"coordinates": [flt(i.longitude), flt(i.latitude)],  # geojson needs it reverse!
+			},
+		}
+		for i in coords
+	]
 
 
 def return_location(doctype, filters_sql):

frappe/public/js/frappe/views/map/map_view.js

@@ -10,26 +10,13 @@ frappe.views.MapView = class MapView extends frappe.views.ListView {
 	}
 
 	setup_defaults() {
+		this.hide_sort_selector = true;
 		super.setup_defaults();
 		this.page_title = __("{0} Map", [this.page_title]);
 	}
 
-	setup_view() {}
-
-	on_filter_change() {
-		this.get_coords();
-	}
-
-	render() {
-		this.get_coords().then(() => {
-			this.render_map_view();
-		});
-		this.$paging_area.find(".level-left").append("<div></div>");
-	}
-
-	render_map_view() {
+	setup_view() {
 		this.map_id = frappe.dom.get_unique_id();
-
 		this.$result.html(`<div id="${this.map_id}" class="map-view-container"></div>`);
 
 		L.Icon.Default.imagePath = frappe.utils.map_defaults.image_path;
@@ -42,13 +29,37 @@ frappe.views.MapView = class MapView extends frappe.views.ListView {
 			this.map
 		);
 
+		this.bind_leaflet_locate_control();
 		L.control.scale().addTo(this.map);
+	}
+
+	render() {
+		this.get_coords().then(() => {
+			this.render_map_data();
+		});
+		this.$paging_area.find(".level-left").append("<div></div>");
+	}
+
+	render_map_data() {
+		// Clear existing markers
+		if (this.markerLayer) {
+			this.map.removeLayer(this.markerLayer);
+		}
+
 		if (this.coords.features && this.coords.features.length) {
-			this.coords.features.forEach((coords) =>
-				L.geoJSON(coords).bindPopup(coords.properties.name).addTo(this.map)
-			);
-			let lastCoords = this.coords.features[0].geometry.coordinates.reverse();
-			this.map.panTo(lastCoords, 8);
+			this.markerLayer = L.featureGroup();
+
+			this.coords.features.forEach((coords) => {
+				const marker = L.geoJSON(coords).bindPopup(
+					frappe.utils.get_form_link(this.doctype, coords.properties.name, true)
+				);
+				this.markerLayer.addLayer(marker);
+			});
+
+			this.markerLayer.addTo(this.map);
+
+			// Fit bounds to show all markers
+			this.map.fitBounds(this.markerLayer.getBounds());
 		}
 	}
 
@@ -82,10 +93,9 @@ frappe.views.MapView = class MapView extends frappe.views.ListView {
 			});
 	}
 
-	get required_libs() {
-		return [
-			"assets/frappe/js/lib/leaflet/leaflet.css",
-			"assets/frappe/js/lib/leaflet/leaflet.js",
-		];
+	bind_leaflet_locate_control() {
+		// To request location update and set location, sets current geolocation on load
+		this.locate_control = L.control.locate({ position: "topright" });
+		this.locate_control.addTo(this.map);
 	}
 };