Geolocation field

Frappe Framework
62

Hello,

I have added above code my_location, but its not working, Could you please guide me where to add the above code and save in DB

Regards,
Sathish

63

The code shared as a cross linked post is using Google maps. Continue the conversation on that thread. This thread is for the geolocation field that uses leafletjs. It’ll cause confusion for readers.

2 Likes
64

Hi @revant_one i got error on geoLocation in my erpnext
can u help me?
it makes entirely docType error

13
132878×1630 147 KB 

Unable to handle success response {message: Array(0)}
request.js:251 ReferenceError: L is not defined
    at _a12.bind_leaflet_map (geolocation.js:71)
    at _a12.make_map (geolocation.js:30)
    at _a12.make_wrapper (geolocation.js:21)
    at _a12.make (base_control.js:16)
    at _a12.make (base_input.js:5)
    at new BaseControl (base_control.js:4)
    at new _a (base_input.js:1)
    at new _a2 (data.js:3)
    at new _a12 (geolocation.js:3)
    at Object.frappe.ui.form.make_control (control.js:46)

currently using erpnext v13.5.2

65

hey @roquegv did you find a way to show Geolocation in Web form?

66

Hi man, yes I did.

In your web form file you should include the following:

frappe.ready(function() {
	frappe.require([//TODO: a veces funciona, a veces no carga
					'/assets/frappe/js/frappe/ui/colors.js', 
					'/assets/frappe/js/lib/leaflet/leaflet.js', 
					'/assets/frappe/js/lib/leaflet/leaflet.draw.js',
					'/assets/frappe/js/lib/leaflet/L.Control.Locate.js',
					'/assets/frappe/js/lib/leaflet/easy-button.js',
					'/assets/frappe/js/lib/leaflet/leaflet.css', 
					'/assets/frappe/js/lib/leaflet/leaflet.draw.css',
					'/assets/frappe/js/lib/leaflet/L.Control.Locate.css',
					'/assets/frappe/js/lib/leaflet/easy-button.css',
				], () => {
                    //your code here...
                })
})

This should be done in build time but didn’t succed trying that. It’s ugly but works.

1 Like
67

Thanks for the code. You mind showing how you added the field. Please :slight_smile:

68 
jQuery(document).ready(function(){
    //first add a web form field of any datatype and use it below to place your map div
    // in my case this was called "location-field"
    $("[data-fieldname=location-field]").parent('form').attr("id","location-form").prepend( "<div id='map' class='input-max-width'></div>" ); //create map field
    
    frappe.require([
    		'/assets/frappe/js/lib/leaflet/leaflet.js', 
    		'/assets/frappe/js/lib/leaflet/leaflet.draw.js',
    		'/assets/frappe/js/lib/leaflet/L.Control.Locate.js',
    		'/assets/frappe/js/lib/leaflet/easy-button.js',
    		'/assets/frappe/js/lib/leaflet/leaflet.css', 
    		'/assets/frappe/js/lib/leaflet/leaflet.draw.css',
    		'/assets/frappe/js/lib/leaflet/L.Control.Locate.css',
    		'/assets/frappe/js/lib/leaflet/easy-button.css',
        ], () => {
        
        let map = L.map("map").locate({setView: true, enableHighAccuracy: true});
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        var marker = L.marker(0,0).addTo(map);
        map.on('move', function () {
        
    		marker.setLatLng(map.getCenter());
    	});
    })

});

Finally got the map to show, now I’ve gotta figure out how to receive the value. Will probably use a hidden field to save the latitude and longitude.

image
image1672×648 125 KB

69

If I remember well, I had to add “Geolocation” in the list of Options in the fieldtype within Web Form Field doctype. Doing this you can use it on the webform you are using. For example, if you need a geolocation field in the Address webform, you should go to that web form (/desk#Form/Web Form/addresses in v12) and add the field with the Geolocation fieldtype. Only then you can use the code I post before. The data is stored automatically, like any other fieldtype in a webform.

Sorry, I forgot to mention that.

70

No way :sweat_smile:

I spent over 3 hours hacking this half-baked solution. Hahaha. Thanks, I’ll give it a shot!

71

@revant_one can u pls help on this one.

at the moment a user has to manually select a pin n drop in the map n then save,
can the pin come by default on the current location so user dont have to manually put it…

i want to make it a “read only” field in attandence check in and so we should know where user checkin from… if usr can manually select then they can sit at home n drop pin at office location n checkin… which is very wrong…

any u show me some light buddy…

72

Well I solved this by inserting google maps into a geolocation html filed

73

Hi, right now i have problems using the geolocation field to just show the geolocation of the address I have on my document. I know I will have to convert the address to coordinates but how do I feed these coordinates to the geolocation field to display this location on the document?

74

Store the geojson in the field

Refer the example.

75

Hi @revant_one

Trust you’re doing great. Can you give a simple example of how to achieve this via script ? Issue is that the geolocation field seems to always remain undefined until the user directly interacts with the map like adding a marker etc. The issue with this is that when a map view is automatically set via script, it doesn’t get saved! Once the form is saved, map view reverts to default

Pls advise

Thanks

76

Okay, I think I get you now… I just converted the dict to a string and set the value in the form. Seems to work fine

Thanks !

77

Any way to set the Zoom level ?

78

Nothing at the moment. You can use js and leaflet library docs.

79

Hi wale,

you should be abel to use:

let map = frm.get_field('map').map
map.setZoom(1);

in you client script.

works for me.

1 Like
80

Okay, thanks

81

Thanks @doca

This only works when the form is launched. It doesn’t persist upon saving because we are setting the location via script and there is no property in the geoJSON data for this. I guess it just uses some default value for the zoom