Visão Geral
Nesse tópico, vou ensinar como utilizar Javascript para capturar a localização que vem do navegador web do usuário e popular em um mapa.
Teste essa funcionalidade clicando aqui → Demo
Pré-requisito:
O site precisa estar hospedado em um endereço https.
Resumo do Desenvolvimento
Criar uma consulta do tipo mapa com parâmetros de latitude e longitude, encapsular essa consulta em um formulário que contenha os campos de latitude e longitude e incluir o arquivo de javascript com o código fornecido.
Consulta
Parâmetros
Criar dois parâmetros do tipo texto: Latitude e Longitude
CrossMap
Escolha CrossMap na fonte de dados.
Retornar os parâmetros e a mensagem que indica a legenda do alfinete
Nas configurações, escolha o tipo como “Marcador Imagem”
Formulário
Campos de Latitude e Longitude
Campo Mapa
Campo do tipo Grid.
Selecione a consulta criada como alvo e passe os valores dos campos como parâmetro.
Campo Botão
Campo do tipo botão com procedimento
[
Arquivo javascript
Adicione o seguinte código em um arquivo Javascript:
var getGeolocation = function (options) {
if (options.usePrompt === undefined) options.usePrompt = true;
if (options.callback === undefined) options.callback = function(coords){};
if (typeof options.promptMessage !== 'string') {
options.promptMessage = 'Para oferecer uma experiência de usuário aprimorada, ' +
'precisamos obter a sua localização.'
}
// Mostra mensagem explicando a necessidade de obter a localização.
var showPrompt = function() {
ShowMessage(options.promptMessage, 'INFO', geoRequest );
};
// Callback de sucesso, quando a localização foi obtida
var geoSuccess = function(position) {
options.callback(position.coords);
};
// Callback de erro, quando houve falha ao buscar a localização.
var geoError = function(error) {
//ShowMessage('Error (' + error.code + ') ' + error.message, 'ERROR');
console.log('Error (' + error.code + ') ' + error.message);
};
// Busca a localização
var geoRequest = function(){
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
};
// Verifica as permissões da API Geolocation
navigator.permissions.query({name:'geolocation'})
.then(function(permissionStatus) {
switch(permissionStatus.state) {
case 'prompt': // O usuário ainda não aceitou ou bloqueou
if (options.usePrompt)
showPrompt();
else
geoRequest();
break;
case 'granted': // O usuário aceitou
geoRequest();
break;
case 'denied': // O usuário bloqueou
ShowMessage('O acesso a localização foi bloqueado.', 'WARN');
break;
}
permissionStatus.onchange = function() {
// O usuário bloqueou a geolocalização
if (this.state === 'denied')
ShowMessage('O acesso a localização foi bloqueado.', 'WARN');
};
});
};
//
// =================
//
// Quando o Formulário estiver pronto, busca a localização
latromi.formManager.setOnFormCreatedCallback( function(context) {
getGeolocation({ usePrompt: false,
callback: function(coords) {
context.form.setFieldValue('latitude',coords.latitude);
context.form.setFieldValue('longitude',coords.longitude);
context.form.raiseFieldEvent('btnAtualizarMapa', 'Click');
}
});
});
Usabilidade
Quando a página for carregada na web, será solicitada a permissão para capturar a localização do usuário. Quando for autorizada, os campos de latitude e longitude serão preenchidos com as correspondentes do usuário e o mapa será atualizado.
Nesse exemplo, deixei os campos e o botão habilitados então é possível simular uma mudança de localização do usuário.