Geolocation field

Frappe Framework
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.

2 Likes
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

82

How can i add search field in geolocation ?

83

There is a small problem. There is a default marker placed at 100,10 so the camera flies from that default location to the newly added location. How to solve that.

84

you saved my lots of time

1 Like
85

Would it be possible to link the location with company address? And fetch the geolocation from the address entered?