How to: Customize the Geolocation (map) control

When creating or customizing a DocType, we can add a “Geolocation” field.

This shows a map in the form view. Users can draw on it and set markers.

By default, it shows a street map centered on Mumbai. This is not configurable via the GUI yet. But, using a custom app, we can change the map type, start location, zoom level, etc.

Note: this guide is for v13

Start by creating a file $MY_APP/$MY_APP/public/js/map_defaults.js. In your $MY_APP/$MY_APP/hooks.py, add the JS file into the app_include_js hook:

app_include_js = [
    "/assets/$MY_APP/js/map_defaults.js"
    # ...
]

Now, frappe will load this file for all desk views (i.e. for logged in system users).

In map_defaults.js, we add the following lines:

// Make sure we have a dictionary to add our custom settings
const map_settings = frappe.provide("frappe.utils.map_defaults");

// Center and zoomlevel can be copied from the URL of
// the map view at openstreetmap.org.

// New default location (middle of germany).
map_settings.center = [51.57, 9.866];
// new zoomlevel: see the whole country, not just a single city
map_settings.zoom = 6;

// Use a different map: satellite instead of streets
// Examples can be found at https://leaflet-extras.github.io/leaflet-providers/preview/
map_settings.tiles =
	"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
map_settings.attribution =
	"Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community";

Restart your bench and reload your browser window. Now you should see the customized map (yes, that’s what Germany looks like from above :laughing: ):

Note that the above applies to all map views on this system.

10 Likes

Thanks! Is it possible to apply these while being hosted on Frappe Cloud?
If so, how?

Not working,

This is aimed at custom apps. On Frappe Cloud, it can probably be done via Client Script, but only for a specific DocType, not for the entire system.

Would be more interesting if you told us the details… what exactly did you do (step-by-step)? Which version of Frappe are you using?

Yeah, I added geolocation field on Lead doctype, but when i create new Lead the default view of the Geolocation field is set to Mumbai, I want to set the view on London, I am using Frappe Framework: v13.47.0 (HEAD) and ERPNext: v13.43.1 (HEAD), As told i try to overright the default view but it not works.