Polygones des différents pays du globe

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonsoir,

Je cherche à créer une carte interactive où des données seront affiché dans une bulle dépendant du pays où l'on clique. J'ai d'abord opté pour Google Maps mais je me suis dis qu'au final, j'aimerai tenter une solution libre. Je me suis donc tournée vers Open Street Map et Leaflet.

J'ai créé mon fond de carte à l'aide de Mapbox. Ce que je souhaite, c'est d'obtenir un fichier contenant les polygones de tous les pays du monde à intégrer à ma carte. Il y a un exemple (pour seulement les pays d'Europe) sur leur site avec : http://leafletjs.com/examples/map-panes.html.

Carto a été utilisé il me semble mais contrairement à Mapbox, je n'ai pas compris son utilité.

Savez-vous comment je pourrais faire la même chose pour tous les pays existants ?

+0 -0
Auteur du sujet

Peut-être qu'un des outils proposés ici te conviendra : http://www.blogduwebdesign.com/ressources-javascript/7-ressources-Javascript-pour-manipuler-des-cartes-de-maniere-interessante/2065

Demandred

Il s'agit d'une liste intéressante mais qui n'est pas utile dans mon cas.

Tu peux trouver ça ici : http://thematicmapping.org/downloads/world_borders.php et l'utiliser dans Leaflet.

victor

J'ai vu ton lien et il me semble que c'est ce que dont j'ai besoin. Par contre, je n'ai pas trouvé comment l'intégrer à ma carte. Serait-il possible d'avoir des explications ?

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

Yep, regarde par ici : http://oramind.com/country-border-highlighting-with-leaflet-js/

Tu prends les données géographiques, t'en fais un geojson, tu overlay le truc dans ta map. J'ai jamais fait ça et je connais rien aux maps donc peut-être que je me plante, mais ça me semble tout à fait jouable. :)

Aucun rapport avec ta question, mais petit rapport avec ton topics, t'as vu ça : http://watersheds.fernleafinteractive.com/ ? C'est hyper bien. En gros : "Si une goutte d'eau tombe à l'emplacement du curseur de ma souris, où arrive cette goutte ?"

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+0 -0
Auteur du sujet

J'ai fait pas mal de recherches mais je n'ai pas trouvé de lien. Merci beaucoup ! C'est exactement ça que je cherche à faire.

En fait, le fonctionnement de la bibliothèque ne me pose pas vraiment de soucis mais c'était plutôt chercher le calque des pays car tout dessiner à la main, c'est pas forcément évident :-° .

Aucun rapport avec ta question, mais petit rapport avec ton topics, t'as vu ça : http://watersheds.fernleafinteractive.com/ ? C'est hyper bien. En gros : "Si une goutte d'eau tombe à l'emplacement du curseur de ma souris, où arrive cette goutte ?"

victor

Je commence tout juste à m'intéresser à ce qui a été fait avec des fonds de carte et je ne connaissais pas ce site. J'adore le concept ! Y a tellement de possibilités :pirate: !

+0 -0
Auteur du sujet

J'ai fais plusieurs tests et mon projet avance pas mal. Par contre, n'était pas familiariser avec Javascript, je souhaiterais savoir quelle est la meilleure façon d'organiser ce morceau de code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
function init() {
    var map = L.map('map', {
        center: [40.743, -74.176],
        zoom: 2
    });

    L.tileLayer('https://api.mapbox.com/styles/v1/helmasaur/cit1pspiy002x2xplr0j7t6ul/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGVsbWFzYXVyIiwiYSI6ImNpdDFwODA5MDAwYTMydG8zNnl4eDBvNGsifQ.HMpvNm7VkZeHC4kSGYR5fA', {
        attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var countries = L.geoJson(dataCountries).addTo(map);
    countries.eachLayer(function(layer) {
        layer.bindPopup(layer.feature.properties.NAME);
    });
}

J'aime beaucoup l'orienté objet mais je ne pense pas que ça soit judicieux dans mon cas. Sinon, j'ai l'habitude de fragmenter mon code en différente fonctions. Est-il bien de le faire dans mon cas ?

Édité par Helmasaur

+0 -0
Staff

Yep, en JS on préfère souvent le fonctionnel à l'OO, notamment parce que l'OO du JS est très différente de l'OO du Java, C#, Ruby, Python, C++, etc. Du coup si tu veux faire de l'OO en JS, faut vraiment apprendre comment ça fonctionne (et tu seras très surpris, notamment par l'absence de classes).

Du coup plutôt comme ça :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const createMap = (center, zoom) => L.map('map', { center, zoom });

const addCountries = (dataCountries, map) => {
  const countries = L.geoJson(dataCountries).addTo(map);
  countries.eachLayer((layer) => {
    layer.bindPopup(layer.feature.properties.NAME);
  });
};

const init = () => {
  const map = createMap([40.743, -74.176], 2);
  L.tileLayer('https://api.mapbox.com/styles/v1/helmasaur/cit1pspiy002x2xplr0j7t6ul/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGVsbWFzYXVyIiwiYSI6ImNpdDFwODA5MDAwYTMydG8zNnl4eDBvNGsifQ.HMpvNm7VkZeHC4kSGYR5fA', {
    attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  addCountries(dataCountries, map);
};

Je parle de JavaScript et d'autres trucs sur mon blog : https://draft.li/blog

+0 -0
Auteur du sujet

Il y a une énorme différence entre le code que j'ai tapé et celui que tu as écris. Je ne comprends pas trop le but des « => ». Par exemple, la syntaxe de la première ligne est inconnue pour moi.

EDIT : je comprends ce que fais le code mais j'aimerai comprendre les symboles :) .

Édité par Helmasaur

+0 -0
Auteur du sujet

Oh ce n'est pas du procédurale ? Par contre le débugger de mon navigateur me met une erreur sur la première ligne au caractère « > ».

1
Unexpected token '>'

EDIT : non en fait, ça fonctionne sur Firefox mais pas sur Safari…

Édité par Helmasaur

+0 -0
Auteur du sujet

Du coup, je suis parti pour quelque chose de plus traditionnel, si je puis dire :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const MAP_CENTER = [40.743, -74.176];
const MAP_ZOOM = 2;

function createMap(center, zoom) {
    return L.map('map', {
        center,
        zoom
    });
}

function addCountries(dataCountries, map) {
    const countries = L.geoJson(dataCountries).addTo(map);
    countries.eachLayer(function(layer) {
        layer.bindPopup(layer.feature.properties.NAME);
    });
}

function loadMap() {
    const map = createMap(MAP_CENTER, MAP_ZOOM);
    L.tileLayer('https://api.mapbox.com/styles/v1/helmasaur/cit1pspiy002x2xplr0j7t6ul/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGVsbWFzYXVyIiwiYSI6ImNpdDFwODA5MDAwYTMydG8zNnl4eDBvNGsifQ.HMpvNm7VkZeHC4kSGYR5fA', {
        attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    addCountries(dataCountries, map);
}
+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

Oh ce n'est pas du procédurale ? Par contre le débugger de mon navigateur me met une erreur sur la première ligne au caractère « > ».

1
Unexpected token '>'

EDIT : non en fait, ça fonctionne sur Firefox mais pas sur Safari…

Helmasaur

Safari a encore du mal avec la syntaxe ES6 (ES2015 pour les intimes). La version 10 devrait mieux s'en sortir, mais si tu veux un bon support (y compris IE et Android), il vaut mieux rester sur une syntaxe ES5 ;)

Édité par viki53

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte