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.

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.

Makisu is an experimental and very original dropdown menu with a 3D appearance which can fold up and down with a slick effect.

The menu uses CSS 3D and comes as a jQuery plugin which auto-converts any targeted list elements.

It has several options for customization like the duration of the animation, shading color, perspective used for the menu and more.

For browsers without CSS 3D support, it falls back to a standard list.

oriDomi is a JavaScript library for beautifully folding up any HTML element just like a paper.

The library doesn't depend on any JavaScript frameworks (but has optional support for jQuery) and uses CSS 3D transitions for creating the effect.

Folding is performed as an animated event where the number of vertical/horizontal slices, speed and shading can all be set.

There are multiple effects and events provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

oriDomi is compatible with all modern browsers (including mobile).

3D effects, if done smoothly, usually looks very good on the web as it is still unexpected for most to see anything that is not 2D online.

Here is a jQuery image slider that offers slick 2D and 3D transitions: Adaptor.

The plugin's 3D effect are supported by WebKit + Mozilla browsers and it falls back to standard fading transitions for the rest.

It is lightweight and has multiple options for customization including: speed of the transitions, delay between each item auto-slideshow being on/off, pauseOnHover and more.

Adaptor can also be controlled with custom events like switching to a desired item, showing the prev-next slide, playing and pausing it.

RefineSlide is a lightweight (4kb gzipped) jQuery plugin for quickly integrating a responsive, image-based slider into our websites.

The slider uses CSS3 transitions + 3D transforms (has JS fallback) and has a bunch of attractive transitions.

It has an option to display thumbnails (auto-formatted and responsive) or arrows as the navigation (and, there is keyboard support as well).

RefineSlide allows defining captions and can display them above the each image.

The plugin can auto-play the items, delay between each slide can be set and callbacks exist on every level.

Photon is a JavaScript library which can add simple lighting effects to any element in the 3D space.

In order to create the effect, it uses the WebKitCSSMatrix object (WebKit is the only supported browser engine).

The angle of the light can be defined and changed anytime with the provided functions.

It is possible to define the objects to be lighted one-by-one or group them at once and we can customize the effect by setting the max black + white usage.

P.S. The effects can be resource intensive if over-used.

The giveaway of 3D Covers Pro -fastest way for creating 3D eCovers- which was announced last week has ended today. The winners are selected and announced below.

Here is a short reminder on "what 3D Covers Pro is" in case you missed:

It is an advanced yet easy-to-use set of Adobe Photoshop action scripts and smart objects for creating such 3D outputs quickly.

They are Win + Mac OS X compatible and support creating the following items with each having more than one designs:

• binders (3 designs)
• magazines (10 designs)
• DVDs (7 designs)
• brochures (3 designs)
• books (13 designs)
• spirals (6 designs)
• boxes (15 designs)
• CDs (11 designs)
• business cards (4 designs)

The winners

• k19s (comment #392870)
• Michael Kaiser (comment #392452)
• Niju mohan (comment #393242)

Congratulations and thanks to everyone for joining the giveaway.

Whether it is web or print, 3D eCovers are popular design objects for illustrating products with boxes, books/magazines, cds, brochures, etc.

3D Covers Pro is a professional set of Adobe Photoshop action scripts and smart objects for creating such 3D outputs in no time.

And, they are giving away 3 licenses ($37/each) to WebResourcesDepot readers (details can be found below).

The bundle includes Photoshop action scripts (PS CS2+) and smart templates (PS CS4+) that are Win and Mac OS X compatible.

Using them is pretty easy and straightforward. Whether you use the smart templates or the action scripts, just placing our designs and waiting for them to get a nice 3D look is almost enough.

3D Covers Pro works for creating the following items with each having several different designs:

• binders (3 designs)
• magazines (10 designs)
• DVDs (7 designs)
• brochures (3 designs)
• books (13 designs)
• spirals (6 designs)
• boxes (15 designs)
• CDs (11 designs)
• business cards (4 designs)

How to join the giveaway?

Just comment to this post and the winners will be selected with the query below on 14 September 2011 (1 week later):

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

Good luck to all!

rotate3Di is a jQuery plugin that makes it possible to perform an isometric 3D flip or 3D rotation of any HTML content.

The plugin uses CSS3 transforms and also helps creating any custom 3D effects.

There are various options offered like the position of the element in degrees, duration/direction of the animation and callbacks on every level.