When building any map-related applications, there are many popular providers to select from like Google Maps or Bing Maps and they provide APIs for integration.

However, using an open source engine and the ability to switch providers anytime offers more freedom + flexibility.

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.

Drawing any type of shapes, highlighting specific regions and interacting with the map using mouse or touch is pretty easy.

Cesium comes as a single JS file and work in all major browsers including mobile.

Map Icons Designer is a free set of 200+ icons that are designed to be used in maps.

The set is available in 2 formats: PSD (vector shape) + PNG and includes items for transportation, hotels, restaurants, animals and much more.

There are also 10 different-styled location pins where all look great.

And, the set is completely free to be used in both personal + commercial projects.

Kartograph is a framework for creating interactive maps without any mapping provider (like Google Maps).

It consists of 2 libraries:

• a Python library thatrenders vector maps from shapefiles or PostGIS and converts them to SVG
• a JavaScript library for turning these SVG data into interactive 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.

Maps are used so widely in web design and they are usually expected to be interactive when presenting data.

It can be the branches of an international company, statistics about  countries or just destinations to visualize. Like said, lots of uses.

Simplemaps is a website that provides professional, highly-customizable and interactive maps built with JavaScript and SVG (or Flash).

SVG has a wide browser-support and it works very well on mobile + tablet as well.

There are maps for “world/countries, continents, USA and Canada” and the usage +customization doesn’t require advanced development knowledge. It works by simply editing a text file and a detailed, step-by-step documentation exists.

Also, Simplemaps website has an online customization tool that enables the users to edit the countries, change colors, descriptions, links and more.

Considering that the maps are in vector (SVG), tiny or huge, they work great on all sizes. And, they even come with a zoom-in functionality.

With some JavaScript, it is so easy to add new features to them like tooltips, selectable regions and much more.

To sum up, SVG maps are definitely the way to go for modern web maps and Simplemaps has a wide range of products on the field.

P.S. For Flash fans, the website also offers similar maps in Flash with their source code.

How to join the giveaway?

Simplemaps is giving away 3 licenses (for a map of your selection). Commenting to this post is enough.

Winners will be selected on 22 April 2013 (1 week later) with the query below and announced as an update to this post.:

SELECT * FROM wp_comments WHERE comment_post_id=3981 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

Good luck to all.

The winners

Here they are:

• Roshin C (comment #1260748)
• Jed (comment #1260726)
• DR (comment #1260708)

1260708

Maplace.js is a jQuery plugin that simplifies integrating Google Maps into websites.

It works with the latest Google Maps API (v3) and has methods for adding markers + custom content and drawing paths, polygons or routes.

There are options for defining the zoom level or controls to be displayed (zoom, map/satellite..).

The plugin allows customizing almost everything from the icons used to texts and colors.

It has callbacks on each action and comes with a very well documentation.

It was very exciting to explore the cities when Google Maps had integrated 3D drawings of each building in some cities.

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.

There are various free sources for such data and the library can be handy when creating such custom visualizations for a limited area.

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.

DataMaps makes use of D3, Backbone + Underscore and comes as a jQuery plugin (or a as a standalone Backbone view).

When browsing through the maps, the hovered or clicked parts can be highlighted and be set to display custom information.

Also, it has support for visualizing data as bubbles in different sizes to show the effect of the data over a region.

Nokia was providing online maps for a long time and, recently, they have renewed it with exciting features and a fresh name: HERE.

HERE Maps is developer friendly, has a complete API and tools that makes any integration possible.

For web developers, to simplify working with HERE even more, there is an unofficial jQuery plugin named jHERE.

The plugin is compatible with both jQuery or Zepto.JS and  has support for creating simple-to-complex maps.

It is possible to define the locations, enable/disable the tools (zoom, scale bar, map type, etc.), add markers or even overlay data from a KML file.

In order to celebrate the 800,000 active users of the Google Maps API, Google has launched a showcase website for their product.

The website, named "More Than A Map", features the capabilities of the API and displays various demos to show its power.

It is possible to find demos of the standard maps to satellite views, usage of the "places", routing and more. The source of the demos is also a good way of finding out their usage.

Also, under the "Developer Stories" menu, selected real-world implementations of the API can be found for inspiration.

TileMill is an application (with Windows, Mac and Linux versions) for creating totally-customized and beautiful maps.

Normally, working with GIS data is complicated but TileMill simplifies that as much as possible by sharing data between projects, downloading and unzipping shapefiles, autodetecting projections, indexing SQLite databases, etc. to help us focus on the output.

It can read from multiple popular data sources and enables us to use any patterns/textures, fonts and images on maps.

As web designers/developers, the part that eases the usage of TileMill is its design language: CartoCSS, which is very similar to CSS and has support for mixins, variables and functions.

Also, interactions like hover tooltips or clickable pop-ups can be added to the maps.