Affichage drapeau / Géolocalisation
Description
Comment afficher le drapeau du pays, du visiteur de mon site.
Ce que j'obtiens
Je souhaite pouvoir afficher sur ma page d'acceuil le drapeau du pays du visiteur de mon site.
j'utilise l'api de : https://www.abstractapi.com/api/ip-geolocation-api. (version gratuite)
L''URL que j'utilise est la suivante :
https://ipgeolocation.abstractapi.com/v1/?api_key=Ma_Clef_API
avec comme réponse :
{"ip_address":"109.0.172.228","city":"Marseille","city_geoname_id":2995469,"region":"Provence-Alpes-Côte d'Azur","region_iso_code":"PAC","region_geoname_id":2985244,"postal_code":"13001","country":"France","country_code":"FR","country_geoname_id":3017382,"country_is_eu":true,"continent":"Europe","continent_code":"EU","continent_geoname_id":6255148,"longitude":5.3861,"latitude":43.2951,"security":{"is_vpn":false},"timezone":{"name":"Europe/Paris","abbreviation":"CEST","gmt_offset":2,"current_time":"14:34:55","is_dst":true},"flag":{"emoji":"🇫🇷","unicode":"U+1F1EB U+1F1F7","png":"https://static.abstractapi.com/country-flags/FR_flag.png","svg":"https://static.abstractapi.com/country-flags/FR_flag.svg"},"currency":{"currency_name":"Euros","currency_code":"EUR"},"connection":{"autonomous_system_number":15557,"autonomous_system_organization":"Societe Francaise Du Radiotelephone - SFR SA","connection_type":"Cable/DSL","isp_name":"SFR SA","organization_name":"Ncnumericable"}}Ce qui ne fct pas
J'arrive à récupérer la ville et l'afficher mais pas son drapeu => flag/emoji ou flag/png, comment faire ?
Par avance merci à tous et avant tout un bon férié et/ou de bonnes vacances.
Bien à vous.
Daniel
2 réponses
Bonjour à tous et désolé pour ma demande, surement l'impatience.
Car après avoir fouillé sur le Net voici la solution que j'utilise pour répondre à mon attente :
<center>
<h1 class="city"></h1>
<img src="" alt="" class="weather-icon">
<h1 class="temp"></h1>
<p class="description"> </p>
<p class="humidity"></p>
<p class="wind"></p>
<p class="pressure"></p>
<!-- <p class="flag"></p>-->
<img src="" alt="Pays" class="urlflag" width="22px" height="15px">
</center>
<script>(()=>{
let url = 'https://ipgeolocation.abstractapi.com/v1/?api_key=Ma_Clef_API';
fetch(url).then(resp => resp.json()).then(data_ipapi =>{
let apiKey = "Ma_Clef_API";
let apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang=fr";
url = `${apiUrl}&appid=${apiKey}&q=${data_ipapi.city}`;
fetch(url).then(resp => resp.json()).then(data =>{
//console.log(data);
document.querySelector(".city").innerHTML = data.name;
document.querySelector(".temp").innerHTML = `${Math.round (data.main.temp)} °c`;
document.querySelector(".description").innerHTML = `Description : ${data.weather[0].description}`;
document.querySelector(".humidity").innerHTML = `Humidité : ${Math.round (data.main.humidity)} %`;
document.querySelector(".wind").innerHTML = `Vent : ${Math.round (data.wind.speed)} km/h`;
document.querySelector(".pressure").innerHTML = `Préssion : ${(data.main.pressure)} hPa`;
document.querySelector(".weather-icon").src = `img/weather/${data.weather[0].main.toLowerCase()}.png`;
/* document.querySelector(".flag").innerHTML = data_ipapi.flag.emoji; */
document.querySelector(".urlflag").src = data_ipapi.flag.png;
});
});})()
</script>
Merci à tous et j'espére que cela pourra aider qq.
Cordialement.
Daniel.
Je dirais par contre attention niveau performance car contacter l'API pour tous les visiteur juste pour afficher un drapeau ce n'est pas forcément optimal non ?
En effet maisi l s´agit d'un site famillial donc je devrai avoir une frequentation reduite.....
Merci a toute l'equipe
Cordialement
En effet maisi l s´agit d'un site famillial donc je devrai avoir une frequentation reduite.....
Merci a toute l'equipe
Cordialement