Dear all,
I’ve been using corvid code for geolocating (generated by Yisrael in one of his examples, credits to him). The code generates latitude and logitude. I initially had two fields named #latitude and #longitude where the user could add his data manually and once submit is pressed, data was stored in the database. With the goelocating code, I thought I could automatize that step, so the user only types in zip & location, longitude & latitude data are directly send/shown in the two fields mentioned above (#long… and #lat…) and store in the database once submit is clicked.
What is the smartest way to move the data generated in the corvid code to the field added to the website?
My apologies if I’m expressing myself a bit unclear.
Many thanks,
Constantin
import wixWindow from 'wix-window';
import {local} from 'wix-storage';
import {autocomplete} from 'backend/gapi';
import {details} from 'backend/gapi';
import {reverse} from 'backend/gapi';
$w.onReady(function () {
// handle each suggestion repeater item
$w("#repeater1").onItemReady( ($w, itemData, index) => {
const text1 = $w("#text1");
text1.text = itemData.text1;
const text2 = $w("#text2");
text2.text = itemData.text2;
});
$w("#repeater1").collapse(); // hidden on page load
// handle each location detail line
$w("#repeater2").onItemReady( ($w, itemData, index) => {
const text3 = $w("#text3");
text3.text = itemData.text3;
const text4 = $w("#text4");
text4.text = itemData.text4;
});
$w("#repeater2").hide(); // hidden on page load
});
function randomFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
let debounceTimer;
export function input4_keyPress(event, $w1) {
$w("#repeater2").data = [];
$w("#repeater2").hide();
if (debounceTimer) {
clearTimeout(debounceTimer); // ignore error
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => { // ignore error
// use the current value to get a list of location suggestions
// we call the autocomplete() web module from the backend
let val = event.target.value;
if(val.length === 0)
return;
autocomplete(val).then(function (resp) {
// create an array of suggestions for the repeater
let predictions = resp.predictions;
let suggestions = [];
predictions.forEach(function (prediction) {
let item = { "_id": prediction.id, "text1": prediction.description, "text2": prediction.place_id };
suggestions.push(item);
});
$w("#repeater1").data = []; // clear the repeater contents
$w("#repeater1").data = suggestions; // add the suggestions to the repeater
$w("#repeater1").expand(); // we have data so we can expand the repeater
});
}, 150);
}
// this function is triggered when clicking on a suggestion list repeater item
export function container1_click(event, $w) {
let place_id = $w("#text2").text;
set_details(place_id);
$w("#repeater1").collapse();
}
function set_details(val) {
$w("#spinner").show();
details(val).then(function(resp) {
// find the city (locality) and country of our location
let place = resp.result;
var filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("country");
});
var country = filtered_array.length ? filtered_array[0].long_name: "";
filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("locality");
});
var locality = filtered_array.length ? filtered_array[0].long_name: "";
let name = place.formatted_address;
let id = place.place_id;
let utc = place.utc_offset;
let lat = place.geometry.location.lat;
let lng = place.geometry.location.lng;
local.setItem("place_city", name);
local.setItem("place_lat", lat);
local.setItem("place_lng", lng);
local.setItem("place_utc", utc);
local.setItem("place_id", id);
$w("#input4").value = name;
let detailsList =
[
{
"_id": "1",
"text3": "place name",
"text4": name
},
{
"_id": "2",
"text3": "latitude",
"text4": "" + lat
},
{
"_id": "3",
"text3": "longitude",
"text4": "" + lng
},
/* {
"_id": "4",
"text3": "utc",
"text4": "" + utc
},
{
"_id": "5",
"text3": "place id",
"text4": id
} */
];
$w("#repeater2").data = []; // clear our repeater
$w("#repeater2").data = detailsList; // add data to our repeater
$w("#repeater2").show();
$w("#spinner").hide();
});
}
export function button1_click(event, $w) {
$w("#repeater1").collapse();
$w("#repeater2").data = [];
$w("#repeater2").hide();
geoloc();
//testing
$w('#input5').setFieldValue("lat", $w('#text4').text);
}
export function geoloc() {
$w("#spinner").show();
wixWindow.getCurrentGeolocation()
.then( (obj) => {
let lat = obj.coords.latitude;
let lng = obj.coords.longitude;
reverse(lat, lng).then(function(resp) {
let status = resp.status;
if(status === "ZERO_RESULTS") {
let name = "Pittsburgh, PA, USA";
local.setItem("place_city", name);
local.setItem("place_lat", "40.44062479999999");
local.setItem("place_lng", "-79.9958864");
local.setItem("place_utc", "-240");
local.setItem("place_id", "ChIJA4UGSG_xNIgRNBuiWqEV-Y0");
$w("#input4").value = name;
return;
}
let results = resp.results;
var country = null, city = null, place_id = null;
var c, lc, component;
for (var r = 0, rl = results.length; r < rl; r += 1) {
let result = results[r];
// look for city (locality) and country
if (!city && result.types[0] === 'locality') {
for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
component = result.address_components[c];
if (component.types[0] === 'locality') {
city = component.long_name;
continue;
}
if (component.types[0] === 'country') {
country = component.long_name;
if(city && country)
break;
}
}
}
else {
continue;
}
if (city && country) {
place_id = result.place_id;
set_details(place_id);
break;
}
}
$w("#spinner").hide();
});
} )
.catch( (error) => {
let errorMsg = error;
console.log(errorMsg);
});
}
Glad I could help. Btw when you write the selector and add the dot at the end $w(“blabla”). Then the editor will give you a list of functions that can be applied to the element.