Dear Team,
In Employee check in , will update data i need live location as default,employee cant able to change or mark the loaction,but now it shows as default as incorrect location and unable to save nad refersh map,how to enable save button how could i change in to live tracking
I am experiencing same issue and I hope someone here helps with the solution
Hi @Emmanuel_Oreva:
Try a client script:
frm.fields_dict.geo_field.map.locate({setView : true})
Note that will only works under https domain due browser restrictions.
Hope this helps.
This is the script to get the live location of an employee, but first it throws an error with longitude not found and then shows a wrong location.
frappe.ui.form.on(‘Employee Checkin’, {
onload(frm) {
function onPositionRecieved(position){
var longitude= position.coords.longitude;
var latitude= position.coords.latitude;
frm.set_value('longitude',longitude);
frm.set_value('latitude',latitude);
console.log(longitude);
console.log(latitude);
fetch('https://api.opencagedata.com/geocode/v1/json?q='+latitude+'+'+longitude+'&key=de1bf3be66b546b89645e500ec3a3a28')
.then(response => response.json())
.then(data => {
var city=data['results'][0].components.city;
var state=data['results'][0].components.state;
var area=data['results'][0].components.residential;
frm.set_value('city',city);
frm.set_value('state',state);
frm.set_value('area',area);
console.log(data);
})
.catch(err => console.log(err));
frm.set_df_property('my_location','options','<div class="mapouter"><div class="gmap_canvas"><iframe width=100% height="300" id="gmap_canvas" src="https://maps.google.com/maps?q='+latitude+','+longitude+'&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://yt2.org/youtube-to-mp3-ALeKk00qEW0sxByTDSpzaRvl8WxdMAeMytQ1611842368056QMMlSYKLwAsWUsAfLipqwCA2ahUKEwiikKDe5L7uAhVFCuwKHUuFBoYQ8tMDegUAQCSAQCYAQCqAQdnd3Mtd2l6"></a><br><style>.mapouter{position:relative;text-align:right;height:300px;width:100%;}</style><style>.gmap_canvas {overflow:hidden;background:none!important;height:300px;width:100%;}</style></div></div>');
frm.refresh_field('my_location');
}
function locationNotRecieved(positionError){
console.log(positionError);
}
if(frm.doc.longitude && frm.doc.latitude){
frm.set_df_property('my_location','options','<div class="mapouter"><div class="gmap_canvas"><iframe width=100% height="300" id="gmap_canvas" src="https://maps.google.com/maps?q='+frm.doc.latitude+','+frm.doc.longitude+'&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://yt2.org/youtube-to-mp3-ALeKk00qEW0sxByTDSpzaRvl8WxdMAeMytQ1611842368056QMMlSYKLwAsWUsAfLipqwCA2ahUKEwiikKDe5L7uAhVFCuwKHUuFBoYQ8tMDegUAQCSAQCYAQCqAQdnd3Mtd2l6"></a><br><style>.mapouter{position:relative;text-align:right;height:300px;width:100%;}</style><style>.gmap_canvas {overflow:hidden;background:none!important;height:300px;width:100%;}</style></div></div>');
frm.refresh_field('my_location');
} else {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(onPositionRecieved,locationNotRecieved,{ enableHighAccuracy: true});
}
}
}
})
What could be wrong with the script?
Hi, @avc can you elaborate a bit more for this script.
I want to use it what more do i need to add in this ?
Thank you
HI @rs115199789:
Please, tell us what you want to achieve.
This code just launch geolocalization request …
frm.fields_dict.your_geo_field.map.locate({setView : true})
Depending on your scenario and desired behavior it could be used in many ways: on form refreshing, button pressing, etc …
Hope this helps.
Hi, @avc
can you help me setup the script or just copy paste the script.
also i was using other scripts but no luck, i just want that when someone/myself marked the employee checkin then it should pick the location automatically, even if i marked the location after reloading the page the map returns to the default value.
Thank You
Hi @rs115199789:
Just create a client script for Employee Checkin
frappe.ui.form.on('Employee Checkin', {
refresh(frm) {
frm.fields_dict.location.map.locate({setView : true})
}
})
Remember check “Enabled”
I assume you geolocation field is called “location”, change it if needed.
This should work.
Hope this helps.
Hi. @avc
Thank you for your response,
The script is working fine in the Chrome and it picks the location as well.
1) However it is not working well in Microsoft Edge
2) - Is there a way to mark or circle the location automatically ?
As the map only shows the location but where exactly inside the map.
Thank You
HI @rs115199789:
Try this …
frm.fields_dict.location.map.on('locationfound', function(e) {
var radius = e.accuracy;
var marker = L.marker(e.latlng).addTo(frm.fields_dict.location.map)
.bindPopup('I am here! Where are you?').openPopup();
var circle = L.circle(e.latlng, radius).addTo(frm.fields_dict.location.map);
frm.set_value("your_location_textbox", e.latitude + ' ' + e.longitude)
});
frm.fields_dict.location.map.on('locationerror', function(e) {
console.error('Geolocation error: ' + e.message);
});
BTW, is working well for me with Chrome and Edge as well.
Hope this helps.
Hi, @avc
Thank you for you valuable response.
This script seems not working or I’m doing something wrong, i don’t have much ideas regarding this language.
Here is the screenshots, Please help.
code-
frappe.ui.form.on('Employee Checkin', {
onload: function(frm) {
frm.fields_dict.location.map.on('locationfound', function(e) {
var radius = e.accuracy;
var marker = L.marker(e.latlng).addTo(frm.fields_dict.location.map)
.bindPopup('I am here! Where are you?').openPopup();
var circle = L.circle(e.latlng, radius).addTo(frm.fields_dict.location.map);
frm.set_value("device_id", e.latitude + ' ' + e.longitude);
});
frm.fields_dict.location.map.on('locationerror', function(e) {
console.error('Geolocation error: ' + e.message);
});
}
});
My Fields
I have attached a video link, in that you can see the new scripts does not load the location automatically and also it does not fill the field as well.
Thank You
Hi @rs115199789:
You missed frm.fields_dict.location.map.locate({setView : true}) . This function trigger the location.
Maybe is not working with onload, perhaps at this moment fields are not loaded or something like that. Use refresh event instead.
frappe.ui.form.on('Employee Checkin', {
refresh: function(frm) {
frm.fields_dict.location.map.locate({setView : true})
frm.fields_dict.location.map.on('locationfound', function(e) {
var radius = e.accuracy;
var marker = L.marker(e.latlng).addTo(frm.fields_dict.location.map)
.bindPopup('I am here! Where are you?').openPopup();
var circle = L.circle(e.latlng, radius).addTo(frm.fields_dict.location.map);
frm.set_value("device_id", e.latitude + ' ' + e.longitude);
});
frm.fields_dict.location.map.on('locationerror', function(e) {
console.error('Geolocation error: ' + e.message);
});
}
});
Hope this helps.
Hi, @avc
Yes it does help , but again it only shows the current location but no circle or marker, and if i click on the location icon it’s not working.
so i change the script - with this-
frappe.ui.form.on('Employee Checkin', {
refresh: function(frm) {
// Ensure Leaflet is loaded
if (typeof L === 'undefined') {
console.error('Leaflet library is not loaded.');
return;
}
// Check if the map is initialized
if (!frm.fields_dict.location.map) {
console.error('Map is not initialized.');
return;
}
frm.fields_dict.location.map.locate({setView: true});
frm.fields_dict.location.map.on('locationfound', function(e) {
var radius = e.accuracy;
// Ensure marker function exists
if (typeof L.marker !== 'function') {
console.error('L.marker is not a function.');
return;
}
var marker = L.marker(e.latlng).addTo(frm.fields_dict.location.map)
.bindPopup('I am here! Where are you?').openPopup();
var circle = L.circle(e.latlng, radius).addTo(frm.fields_dict.location.map);
frm.set_value("device_id", e.latitude + ' ' + e.longitude);
});
frm.fields_dict.location.map.on('locationerror', function(e) {
console.error('Geolocation error: ' + e.message);
});
}
});
I guess i’m missing something or the geolocation have some bugs.
Thank You
Hi:
It’s working well on my side …
Use the script provided.
frappe.ui.form.on('Employee Checkin', {
refresh: function(frm) {
frm.fields_dict.location.map.locate({setView : true})
frm.fields_dict.location.map.on('locationfound', function(e) {
var radius = e.accuracy;
var marker = L.marker(e.latlng).addTo(frm.fields_dict.location.map)
.bindPopup('I am here! Where are you?').openPopup();
var circle = L.circle(e.latlng, radius).addTo(frm.fields_dict.location.map);
frm.set_value("device_id", e.latitude + ' ' + e.longitude);
});
frm.fields_dict.location.map.on('locationerror', function(e) {
console.error('Geolocation error: ' + e.message);
});
}
});
Hope this helps.
Thanks for the help, will check the issue and update here.
May i know how can i know the exact name of the circle inside the map ?
Thanks again,
Hi @rs115199789 …
Sorry, i don’t understand your last question … Exact name of the circle? Mean HTML class or something like that?
Yes, because i don’t know why but it’s not working / (marking the circle) for me.
Thank You
Thank you for the script it’s working fine in v-15 just checked , it was the issue with the version 14.
Thanks again 