Best jQuery Maps Plugins & Tutorials with Demo

Kartograph : jQuery Interactive map applications without Google Maps

Kartograph : jQuery Interactive map applications without Google Maps

Kartograph is a new framework for building interactive map applications without Google Maps or any other mapping service. It was created with the needs of designers and data journalists in mind.

The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundreds of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.

MapQuery : jQuery Map plugin with Demo

MapQuery : jQuery Map plugin with Demo

MapQuery is a jQuery plugin that you can use to add mapping to your website. Whether you quickly want to add a simple map to a page, or build a feature rich web application, MapQuery is just the thing you need.

Leaflet : JavaScript library for mobile-friendly interactive maps

Leaflet : JavaScript library for mobile-friendly interactive maps with Demo

Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by CloudMade to form the core of its next generation JavaScript API. Weighing just about 21kb of gzipped JS code, it still has all the features you will ever need for your web mapping needs, while providing a fast, smooth, pleasant user experience.

It is built from the ground up to work efficiently and smoothly on both desktop and mobile platforms like iOS and Android, utilizing cutting-edge technologies included in HTML5 and CSS3. The focus is on usability, performance, small size, A-grade browser support, flexibility and an easy-to-use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.

goMap : jQuery Map Plugin

goMap : jQuery Map Plugin with Example

gomap is a jquery map plugin.

jQuery and HTML5 Interactive Map : MigrationsMap

jQuery and HTML5 Interactive Map : MigrationsMap

Interactive map of the origin-destination stocks by country.The map allows you to see for every country X in the world either the top ten providing countries of lifetime migrants to X or the top ten receiving countries of lifetime migrants from X. On top of that, when you let your mouse hover over a country, you can see the total population, the GDP per capita, the HIV and Tuberculosis prevalences and the death rate of children under five.

Add automatic area highlighting to image Maps with javascript : Mapper.js

Add automatic area highlighting to image Maps with javascript : Mapper.js

mapper.js allows you to add automatic area highlighting to image maps on your webpages (inc. export to SVG).

jQuery Mapz

jQuery Mapz

With Mapz you can easily create draggable image maps by just calling one function and by using some simple and clean HTML mark-up.This plugin lets you create draggable image maps.

Features

  • Draggable map which means there are no image dimension limits.
  • Zooming, no limit on the number of zooming levels.
  • Zoom by arrow keys or by mousewheel (note: when using zoom by mousewheel, you’ll need Brandon Aaron’s mousewheel plugin)
  • Use HTML <map> elements to create links inside your image maps. Let the plugin create multiple image maps for the different zooming levels.

Address Picker: Display Real Time Map Location in jQuery

Address Picker: Display Real Time Map Location

Address Picker is a jQuery plugin with autocomplete and location on map features. It displays map for the selected address, even while you navigate in autocomplete suggestions.Autocomplete filled by Google Map Geocoder suggestions.

jQuery ExCanvas World Map

jQuery ExCanvas World Map

Google Analytics has an excellent map of the world showing where your website visitors come from.While I can’t ever hope to compete with Google’s product, I do want to have a similar map within JAWStats which shows roughly the same sort of information. Ignoring the “clickable” nature of Google’s map at this stage (I’ll tackle that another day), dynamically drawing a map in a web browser isn’t so easy. Naturally, I thought Flash would be the answer but, never one for doing things the easy way, I wanted to try doing this directly in HTML’s <canvas> tag.

ImageMapster a jQuery plugin makes HTML image maps useful

ImageMapster a jQuery HTML image maps

ImageMapster is a jQuery plugin that brings HTML image maps to life. With this tool, any image map can be highlighted, selected, and manipulated in all kinds of ways. ImageMapster is 100% Javascript and it works on every major browser, without Flash or any other dependencies (except jQuery), including Internet Explorer 6. Some advanced effects require HTML5 support, but will still fall back to work in older browsers.