Merge pull request #16 from alyf-de/custom-markers

feat: custom markers (LAN-773)
alyf-de · Nov 10, 2023 · 6784126 · 6784126
2 parents cccffad + 86b8f12
commit 6784126
Showing 1 changed file with 54 additions and 2 deletions.
diff --git a/frappe/public/js/frappe/form/controls/geolocation.js b/frappe/public/js/frappe/form/controls/geolocation.js
@@ -52,8 +52,19 @@ frappe.ui.form.ControlGeolocation = frappe.ui.form.ControlData.extend({
 						return L.circle(latlng, {radius: geoJsonPoint.properties.radius});
 					} else if (geoJsonPoint.properties.point_type == "circlemarker") {
 						return L.circleMarker(latlng, {radius: geoJsonPoint.properties.radius});
-					}
-					else {
+					} else if (geoJsonPoint.properties.point_type == "custom-icon") {
+						const marker = L.marker(
+							latlng,
+							{
+								icon: L.icon({
+									iconUrl: frappe.boot.icon_map[geoJsonPoint.properties.icon],
+									iconSize: [24, 24],
+								})
+							}
+						);
+						marker.options.rotationAngle = geoJsonPoint.properties.rotation_angle;
+						return marker;
+					} else {
 						return L.marker(latlng);
 					}
 				}
@@ -95,6 +106,39 @@ frappe.ui.form.ControlGeolocation = frappe.ui.form.ControlData.extend({
 			}
 		});
 
+		const markerToGeoJSON = L.Marker.prototype.toGeoJSON;
+		const markerSetPosition = L.Marker.prototype._setPos;
+		L.Marker.include({
+			// Rotation inspired by https://github.com/bbecquet/Leaflet.RotatedMarker/blob/master/leaflet.rotatedMarker.js
+			_setPos: function (pos) {
+				markerSetPosition.call(this, pos);
+				this._applyRotation();
+			},
+
+			_applyRotation: function () {
+				if (this.options.rotationAngle) {
+					this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = 'center';
+
+					const transformStyle = this._icon.style[L.DomUtil.TRANSFORM];
+					if (!transformStyle.includes('rotate')) {
+						this._icon.style[L.DomUtil.TRANSFORM] += ` rotate(${this.options.rotationAngle}deg)`;
+					}
+				}
+			},
+
+			toGeoJSON: function () {
+				const feature = markerToGeoJSON.call(this);
+				if (this.customIconName) {
+					feature.properties = {
+						point_type: 'custom-icon',
+						icon: this.customIconName,
+						rotation_angle: this.options.rotationAngle,
+					};
+				}
+				return feature;
+			},
+		});
+
 		L.Icon.Default.imagePath = '/assets/frappe/images/leaflet/';
 		this.map = L.map(this.map_id);
 		this.map.setView(frappe.utils.map_defaults.center, frappe.utils.map_defaults.zoom);
@@ -157,6 +201,14 @@ frappe.ui.form.ControlGeolocation = frappe.ui.form.ControlData.extend({
 				layer = e.layer;
 			if (type === 'marker') {
 				layer.bindPopup('Marker');
+
+				if (cur_frm.doc.icon) {
+					layer.customIconName = cur_frm.doc.icon;
+				}
+
+				if (cur_frm.rotation_angle) {
+					layer.options.rotationAngle = cur_frm.rotation_angle;
+				}
 			}
 			this.editableLayers.addLayer(layer);
 			this.set_value(JSON.stringify(this.editableLayers.toGeoJSON()));