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 ):
Note that the above applies to all map views on this system.