{"id":10730,"date":"2016-07-08T18:15:14","date_gmt":"2016-07-08T16:15:14","guid":{"rendered":"http:\/\/flaven.fr\/?p=10730"},"modified":"2016-07-13T05:01:15","modified_gmt":"2016-07-13T03:01:15","slug":"geolocalisation-pays-latitude-longitude-decouvrir-leaflet-js-pour-placer-des-marqueurs-sur-une-carte-avec-les-coordonnes-de-chaque-pays","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2016\/07\/geolocalisation-pays-latitude-longitude-decouvrir-leaflet-js-pour-placer-des-marqueurs-sur-une-carte-avec-les-coordonnes-de-chaque-pays\/","title":{"rendered":"G\u00e9olocalisation, pays, latitude, longitude &#8211; D\u00e9couvrir leaflet.js pour placer des marqueurs sur une carte avec les coordonn\u00e9s de chaque pays"},"content":{"rendered":"<p>C&#8217;est un sujet r\u00e9current d\u00e9j\u00e0 maintes fois abord\u00e9 dans ce blog. Un &#8220;must-have&#8221; dans ce que l&#8217;on nomme g\u00e9n\u00e9ralement la <strong>datavisualisation<\/strong>. Le principe en est simple : il s&#8217;agit de g\u00e9olocaliser un ensemble de contenu sur une carte par exemple. En l&#8217;occurrence, notre besoin \u00e9tait d&#8217;avoir sur une carte du monde, la dispersion d&#8217;un ensemble d&#8217;articles consacr\u00e9s \u00e0 des initiatives men\u00e9es en faveur de l&#8217;environnement.<\/p>\n<p>Tout le code de cet article est disponible sur github :<br \/>\n<i><a href=\"https:\/\/github.com\/bflaven\/BlogArticlesExamples\/tree\/master\/lat_long_countries_capital\" target=\"_blank\">https:\/\/github.com\/bflaven\/BlogArticlesExamples\/tree\/master\/lat_long_countries_capital<\/a><\/i><\/p>\n<p>Il nous fallait donc la latitude et la longitude moyenne pour chaque pays en vue d&#8217;afficher un marqueur sur le pays en question et non \u00e0 cot\u00e9 ! Attention aux \u00eeles. Ce marqueur sera cliquable et permettra d&#8217;acc\u00e9der \u00e0 la page de r\u00e9sultat de tags combinant le tag pays et le tag environnement.<\/p>\n<p>On a donc rapproch\u00e9 diff\u00e9rentes sources de donn\u00e9es glan\u00e9es sur le web notamment la liste des codes pays ISO 3166 dont on va se servir comme d&#8217;un pivot pour g\u00e9rer nos traductions. Pour l&#8217;instant, nous ne g\u00e9rons que le nom anglais, le nom en fran\u00e7ais, toutefois rien n&#8217;emp\u00eache d&#8217;ajouter des colonnes pour g\u00e9rer la traduction dans d&#8217;autres langues. Le tout a ensuite \u00e9t\u00e9 int\u00e9gr\u00e9 dans une BDD MySQL.<\/p>\n<p>Pour information, une autre structure de cette table sera peut-\u00eatre fournie avec des colonnes additionnelles pour g\u00e9rer les langues suivantes notamment : swahili, arabe, persan, russe, anglais, chinois, fran\u00e7ais, cambodgien, portugais br\u00e9silien, vietnamien, haoussa, espagnol.<\/p>\n<p><b>La traduction de Australie dans les langues cit\u00e9es ci-dessus<\/b><\/p>\n<pre lang=\"json\">\t  \r\n      \"sw-SW\": \"Australia\",\r\n      \"ar-AR\": \"\u0623\u0633\u062a\u0631\u0627\u0644\u064a\u0627\",\r\n      \"fa-IR\": \"\u0627\u0633\u062a\u0631\u0627\u0644\u06cc\u0627\",\r\n      \"ru-RU\": \"\u0410\u0432\u0441\u0442\u0440\u0430\u043b\u0438\u044f\",\r\n      \"en-US\": \"Australia\",\r\n      \"zh-ZH\": \"\u6fb3\u6d32\uff0c\u6fb3\u5927\u5229\u4e9a\",\r\n      \"fr-FR\": \"Australie\",\r\n      \"km-KM\": \"\u17a2\u17bc\u179f\u17d2\u178f\u17d2\u179a\u17b6\u179b\u17b8\",\r\n      \"pt-BR\": \"Austr\u00e1lia\",\r\n      \"vi-VI\": \"\u00dac\",\r\n      \"ha-HA\": \"Ostraliya\",\r\n      \"es-SP\": \"Australia\"\r\n<\/pre>\n<h4>Quelques explications sur la table<\/h4>\n<p><b>Une ligne d&#8217;exemple tir\u00e9e de la table, celle de l&#8217;Australie<\/b><\/p>\n<pre lang=\"sql\">(14, 'AU', 'Australia', 'Australie', -27.0000000, 133.0000000),<\/pre>\n<ul>\n<li>1. Les codes pays ISO 3166 ex : AU pour Australie<\/li>\n<li>2. Le nom en anglais du pays ex : Australia<\/li>\n<li>3. La traduction en fran\u00e7ais ex : Australie<\/li>\n<li>4. La latitude et la longitude d&#8217;un point moyen dans le pays ex : -27.0000000, 133.0000000 en Australie. Pour information, il ne s&#8217;agit pas de Canberra (Latitude : -35.3075 | Longitude : 149.124417), la capitale de l&#8217;Australie mais un trou perdu dans le bush&#8230;<\/li>\n<\/ul>\n<p>La liste des pays est dans une table nomm\u00e9e <code>location_fr_en<\/code> dans une BDD<br \/>\nVoir : <code>countries_capitals_location_fr_en.sql sur gihub<\/code><\/p>\n<p><b>Le r\u00e9sultat de la carte<\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2016\/07\/lat_long_countries_capital_1.jpg\" width=\"640\" height=\"480\" alt=\"g\u00e9olocalisation, pays, latitude, longitude - D\u00e9couvrir leaflet.js pour placer des marqueurs sur une carte avec les coordonn\u00e9s de chaque pays\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2016\/07\/lat_long_countries_capital_2.jpg\" width=\"640\" height=\"480\" alt=\"g\u00e9olocalisation, pays, latitude, longitude - D\u00e9couvrir leaflet.js pour placer des marqueurs sur une carte avec les coordonn\u00e9s de chaque pays\"><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Leaflet, an open-source JavaScript library<br \/>\nfor mobile-friendly interactive maps<br \/><a href=\"http:\/\/leafletjs.com\/\" target=\"_blank\">http:\/\/leafletjs.com\/<\/a><\/li>\n<li>OpenStreetMap est une carte du monde, cr\u00e9\u00e9e par des gens comme vous et libre d\u2019utilisation sous licence libre.<br \/><a href=\"http:\/\/www.openstreetmap.org\/\" target=\"_blank\">http:\/\/www.openstreetmap.org\/<\/a><\/li>\n<li>Average Latitude and Longitude for Countries<br \/><a href=\"http:\/\/dev.maxmind.com\/geoip\/legacy\/codes\/country_latlon\/\" target=\"_blank\">http:\/\/dev.maxmind.com\/geoip\/legacy\/codes\/country_latlon\/<\/a><\/li>\n<li>ISO 3166 Country Codes<br \/><a href=\"http:\/\/dev.maxmind.com\/geoip\/legacy\/codes\/iso3166\/\" target=\"_blank\">http:\/\/dev.maxmind.com\/geoip\/legacy\/codes\/iso3166\/<\/a><\/li>\n<li>World City Locations Database, une source compl\u00e8te sur g\u00e9olocalisation<br \/><a href=\"https:\/\/github.com\/bahar\/WorldCityLocations\" target=\"_blank\">https:\/\/github.com\/bahar\/WorldCityLocations<\/a><\/li>\n<li>How to parse JSON file with PHP<br \/><a href=\"http:\/\/www.bewebdeveloper.com\/tutorial-about-how-to-parse-json-file-with-php\" target=\"_blank\">http:\/\/www.bewebdeveloper.com\/tutorial-about-how-to-parse-json-file-with-php<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>C&#8217;est un sujet r\u00e9current d\u00e9j\u00e0 maintes fois abord\u00e9 dans ce blog. Un &#8220;must-have&#8221; dans ce que l&#8217;on nomme g\u00e9n\u00e9ralement la datavisualisation. Le principe en est&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2016\/07\/geolocalisation-pays-latitude-longitude-decouvrir-leaflet-js-pour-placer-des-marqueurs-sur-une-carte-avec-les-coordonnes-de-chaque-pays\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">G\u00e9olocalisation, pays, latitude, longitude &#8211; D\u00e9couvrir leaflet.js pour placer des marqueurs sur une carte avec les coordonn\u00e9s de chaque pays<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"La g\u00e9olocalisation pr\u00e9cise des pays avec Leaflet.js place des marqueurs exacts sur une carte mondiale. Utilisez latitude et longitude.","bf_ai_og_title":"G\u00e9olocalisation avec Leaflet.js","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3437,3454,3442,3444,3447,3448,3449,3450,3435,3452],"tags":[277,452,2348,2346,2349,2347,2350,2345],"class_list":["post-10730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business-case-studies","category-journalism-writing","category-mobile-devices","category-programming-databases","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-ux-product-design","category-web-development","category-wordpress-cms","tag-carte","tag-geolocalisation","tag-googlemap","tag-latitude","tag-leaflet-js","tag-longitude","tag-marqueurs","tag-pays"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-2N4","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2016\/07\/lat_long_countries_capital_b.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=10730"}],"version-history":[{"count":8,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10730\/revisions"}],"predecessor-version":[{"id":10742,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/10730\/revisions\/10742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/10734"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=10730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=10730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=10730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}