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?