13 bibliothèques JavaScript pour créer des cartes interactives et personnalisées

Nous avions précédemment présenté Google Map Maker et 10 autres outils pour vous aider à créer des cartes. Toutefois, si vous préférez utiliser des bibliothèques Javascript, nous avons ce message pour vous. Voici les bibliothèques JS que vous pouvez utiliser pour afficher des repères de carte spéciaux, dessiner des lignes de route personnalisées ou même afficher une boîte de dialogue lorsque vous survolez ou cliquez sur certains points de la carte..

Personnalisez vos cartes dans le style de votre choix - certaines peuvent être stylées avec CSS - ou personnalisez votre carte pour qu'elle soit aussi interactive que vous le souhaitez. La source des données cartographiques, les dépendances et les licences de chaque bibliothèque ont été incluses pour votre commodité..

Plus sur Hongkiat:

• Comment styliser Google Maps
• Obtention de l'emplacement de l'utilisateur avec l'API HTML5 de géolocalisation
• Visualisation des données: plus de 20 outils et ressources utiles

GMaps

GMaps ajoute et personnalise Google Maps en un tournemain. Outre l'ajout d'une carte, vous pouvez également ajouter quelques éléments à la carte, tels que des polylignes qui peuvent être utiles pour tracer un itinéraire, un contrôle de menu spécial et même des éléments HTML..

GMaps est compatible avec les données au format JSON que vous pouvez utiliser pour intégrer votre carte à une application particulière, telle que Foursquare..

• Source de données cartographiques: Google Maps
• Les dépendances: aucun
• Licence: Licence MIT

ici

À 5Ko, jHERE vous montre que la taille importe peu; vous pouvez toujours créer une carte interactive puissante avec quelques options de personnalisation. jHERE dérive la visualisation de carte de HERE map, l’un des fournisseurs de carte les plus populaires pour Windows Phone.

La bibliothèque peut être étendue avec de nouvelles fonctionnalités. Deux extensions ont été développées pour cette bibliothèque, dont une pour l'ajout de formes, d'itinéraires et de marqueurs personnalisés..

• Source de données cartographiques: ICI Cartes
• Les dépendances: jQuery ou ZeptoJS
• Licence: Licence MIT

Kartographe

Kartographe se compose de deux fichiers, Kartograph.ph pour générer la carte au format SVG et Kartograph.js pour ajouter des éléments interactifs au-dessus de la carte. Puisque Kartograph.js est construit sur Raphael.js, la carte fonctionnerait bien jusqu'à IE7. Vous pouvez consulter les démonstrations de cartes interactives pour découvrir ce que Kartograph peut faire..

• Source de données cartographiques: Kartographe
• Les dépendances: Kartograph.py, Raphael et jQuery
• Licence: AGPL et LGPL

Mapael

jQuery Mapael vous permet de créer des cartes avec une visualisation de données élégante ainsi qu'une interactivité. Vous pouvez, par exemple, créer une carte et désigner chaque région sur la carte avec des couleurs différentes en fonction de la région. Vous pouvez également ajouter une info-bulle sur la région, ainsi que des gestionnaires d'événements tels que Cliquez sur ou flotter.

La carte est conçue avec le souci du référencement en fournissant un contenu alternatif aux robots des moteurs de recherche qui ne sont pas capables d'explorer le contenu généré par JavaScript..

• Source de données cartographiques: Raphael.js
• Les dépendances: jQuery
• Licence: Licence MIT

D3js

D3.js est une bibliothèque JavaScript complète qui donnera vie à vos données via HTML, SVG et CSS. L'utilisation de D3 est très variée, notamment pour créer une carte hautement interactive. Voir cette carte du développement mondial de la Banque mondiale et vous verrez les possibilités de ce que vous pouvez construire avec D3.js.

• Source de données cartographiques: D3.js
• Les dépendances: aucun
• Licence: Indéfini

DataMaps

Si la construction d’une carte avec D3.js est trop lourde, vous pouvez utiliser DataMaps. DataMaps est essentiellement un plugin D3.js qui a été développé spécialement pour construire des cartes. Il hérite de la plupart des capacités de D3.js. Vous pouvez ainsi créer des cartes simples ou très personnalisées. Ai-je mentionné que la carte est sensible?

• Source de données cartographiques: D3.js
• Les dépendances: D3.js et TopoJSON
• Licence: Licence MIT

GeoChart

GeoChart est une carte Google simplifiée qui rend la région, les marqueurs et le texte au lieu d'une carte complète avec des détails minuscules. La carte est générée en SVG et peut être personnalisée de nombreuses manières, notamment en modifiant les couleurs de la région, en ajoutant des fenêtres contextuelles et des marqueurs de carte personnalisés..

• Source de données cartographiques: Google Maps
• Les dépendances: aucun
• Licence: Lisez les conditions d'utilisation de Google Maps

Maplace

Maplace, un plugin jQuery pour générer des cartes via l'API Google Maps v3. Maplace fonctionne dans tous les navigateurs, y compris IE6. C'est donc un autre plugin qui mérite toute votre attention si vous voulez construire la carte de la manière la plus simple possible..

• Source de données cartographiques: Google Maps
• Les dépendances: jQuery
• Licence: Licence MIT

Majestueux

Stately est une bibliothèque JavaScript développée pour générer des cartes des États-Unis. La bibliothèque est relativement légère étant donné que vous pouvez ajouter des éléments interactifs en plus des cartes générées..

• Source de données cartographiques: Stately / SVG
• Les dépendances: aucun
• Licence: Licence MIT

GeoComplete

GeoComplete est une bibliothèque JavaScript distincte. La bibliothèque ajoutera un champ de saisie avec la carte, qui montrera des suggestions de villes, pays ou états au fur et à mesure que vous tapez.

• Source de données cartographiques: Google Maps
• Les dépendances: jQuery
• Licence: Licence MIT

Outils de carte

Map Tools fournit une API intuitive pour ajouter Google Maps. Il prend en charge le chargement de données JSON géographiquement formatées telles que TopoJSON et GeoJSON pour restituer la carte. En plus de cela, vous pouvez ajouter des marqueurs animés qui rendront la carte plus vivante, insérer du contenu HTML avec des variables ou des espaces réservés à l'aide du guidon..

• Source de données cartographiques: Google Maps
• Les dépendances: GeoJSON / TopoJSON
• Licence: Licence MIT

OpenLayers

OpenLayers est un framework JavaScript open source hautes performances permettant de créer des cartes interactives à l'aide de divers services de cartographie. Vous pouvez choisir la source de la couche de carte en utilisant une couche en mosaïque ou une couche vectorielle à partir de plusieurs services de carte..

OpenLayer est prêt à l'emploi pour la téléphonie mobile, il est idéal pour créer des cartes sur plusieurs appareils et navigateurs. Vous pouvez utiliser CSS pour un look différent de votre carte. Pour implémenter la carte dans votre site Web avec OpenLayers, voici un tutoriel qui vous aidera.

• Source de données cartographiques: OpenStreetMap
• Les dépendances: aucun
• Licence: Indéfini

Brochure

Les développeurs ont donné Brochure les fonctions de base fonctionnent parfaitement, en gardant une taille réduite, parfait pour les appareils mobiles. Pour des fonctions spécifiques, il suffit d’étendre Leaflet à l’aide de plugins. Leaflet propose la plupart des fonctionnalités de carte en ligne dont vous avez besoin: calques de tuiles, fenêtres contextuelles, marqueurs et calques de vecteurs libres tels que des polylignes, des polygones, des cercles ou des rectangles. Il vient avec de jolis motifs par défaut bien que vous puissiez personnaliser le style en utilisant CSS3 avec facilité.

Leaflet possède les fonctionnalités d'interaction les plus utilisées à la fois pour les navigateurs mobiles et de bureau.

• Source de données cartographiques: OpenStreetMap
• Les dépendances: aucun
• Licence: Indéfini