Polygones des différents pays du globe

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 ?

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

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

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 ?

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  .

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  !

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 ?

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);
};

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 .

C'est une arrow function : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es

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…

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);
}

Merci pour toutes ces informations. Ça m'a permit d'en apprendre beaucoup plus sur la syntaxe du Javascript ! Je peux marqué le sujet comme résolu.