JavaScript Libraries for Building Interactive Map

Here at jQueryHouse we have embarked ourselves to bring some new and useful jQuery plugins and libraries for our readers, we previously featured Best Free jQuery Map Plugins.

For today's roundup we brought 20 Best JavaScript Libraries which you can use to create interactive maps, draw custom route lines or even display a dialog box for certain points of the map.

Let’s explore the list !!

1. amMap

amMap is a tool that you can use to easily add interactive map functionality to your web pages and JavaScript-based applications. You can use this tool to show locations of your offices, routes of your journeys, create your distributor map, etc.

2. Turf.js

Turf is a modular GIS engine written in JavaScript. It performs geospatial processing tasks with GeoJSON data and can be run on a server or in a browser.

3. Planetary.js

Planetary.js is a JavaScript library for building awesome interactive globes. It uses D3 and TopoJSON to parse and render geographic data. Planetary.js uses a plugin-based architecture; even the default functionality is implemented as plugins.

4. Leaflet

Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. It can be extended with many plugins, has an easy to use and well-documented API and a simple, readable source code.

5. GMaps

GMaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code. GMaps is compatible with JSON formatted data which you can utilize to integrate your map with a particular app, like Foursquare.

6. Kartograph

Kartograph is a framework for creating interactive maps without any mapping provider (like Google Maps). If you already have the SVG data (for ex: any drawing can be converted to SVG with Adobe Illustrator), only the JavaScript library can help too. The JS library uses jQuery + Raphaël, outputs can be styled with CSS and a very good documentation is provided.

7. D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

8. jHere

With jHERE, you can easily add interactive maps to your website. In only 4KB, you get a powerful map API, highly customizable markers, event handling and info bubbles.

9. Cesium

Cesium, a WebGL-powered JavaScript mapping library, offers just that by being provider-agnostic. It has support for 3 different views: 3D globe, 2D map, and 2.5D Columbus View where transitioning from one to another is just a line of code.

10. DataMaps

DataMaps is a script to display any data interactively and beautifully inside maps. It comes with ready-to-use maps for world map with countries, USA with states and a combined one. The map data is stored as JSON and any custom maps can be created by following the structure.

11. Stately

Stately is JavaScript library that is developed to generate US maps. The library is comparably lightweight considering that you can add interactive elements on top of your generated maps.

12. MaPlace.js

Maplace.js is a small Google Maps Javascript plugin for jQuery that helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map. It requires jQuery and Google Maps API v3 so you need to have both in your page.

13. SmallWorld.js

small world js
Smallworld.js is a utility for generating simple map previews with GeoJSON and HTML5 Canvas. It has no dependencies, and comes with a simple wrapper for use with jQuery and Zepto.

14. Cartographer

Cartographer is a JavaScript library for creating thematic maps on Google Maps which supports custom styling. It is only a one JavaScript file that relies on the powerful Raphael.js vector-graphics library

15. Polymaps

Polymaps is a free JavaScript library for creating dynamic and interactive maps. Besides the usual cartography from OpenStreetMap, CloudMade, Bing, etc., itworks with image-based and vector-tiled maps by providing a quick display of multi-zoom datasets over maps, and supports a variety of visual presentations.

16. OSM Buildings

OSM Buildings is a JavaScript library that enables us to create a similar functionality using any mapping provider. The library uses Leaflet mapping engine and HTML5 canvas (rather than WebGL) and requires the geometry data of the area to be visualized

17. SpryMap

SpryMap is a super lightweight (2.8 KB), dependency free Javascript widget that turns any HTML element into a Google Maps-like click and drag window. SpryMap is released under the creative commons license, essentially you’re free to use it and adapt it for any personal or commercial purposes.

18. jQuery Geo

jquery geo
jQuery Geo is an open-source geospatial mapping project that provides a streamlined JavaScript API for a large percentage of your online mapping needs. Whether you just want to display a map on a wep-page as quickly as possible or if you are a more advanced GIS user, jQuery Geo can help.

19. Mapstraction

Mapstraction is a Javascript library that provides a single, common interface for a wide variety of Javascript map APIs. It’s designed to enable a developer to switch from one maps API to another as smoothly and as quickly as possible.

20. Geoext

GeoExt brings together the geospatial know how of OpenLayers with the user interface savvy of Ext JS to help you build powerful desktop style GIS apps on the web with JavaScript.