Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Map’ Category

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.

More Than A Map

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.

  • Tags:
  • Filed under: Goodies, Map, No License
  • 1 Comment
  • 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.

    Google Maps, like any other Google product is already easy-to-use and their API is not that complicated to work with.

    However, things can always be simpler and GMaps.js, a feature-rich jQuery plugin, helps consuming Google Maps much easier.


    Besides adding a standard map of a specific location, we can define the zoom level, add markers, get the location of a user (HTML5 geolocation), define routes, draw polylines and more with only few lines of code.

    And, it has callbacks on every action to integrate any custom events. GMaps.js is not documented in detail, however, it has examples of each feature.

    JQVMap is a jQuery plugin for rendering vector maps by using SVG for modern browsers and VML for the rest.

    It is a heavily modified version of another plugin, jVectorMap, and comes with ready-to-use maps of "world, USA, Europe and Germany".

    There are several customization options for beautifying the maps including colors, borders or their opacities.

    jQuery JQVMAp

    Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

    Also, it is possible to select any regions on initial load or after any custom event.

    The purpose of this tutorial is to show how to create a realtime location aware visitor tracker for a web site or application.

    When a visitor navigates to the page on your site, or accesses your mobile web app, the visitor tracker will display the new visitor hit in realtime, displaying the page they've landed on and where each visitor is on a Google map (lat/long and locality). For the purposes of the tutorial, we'll write our server code in PHP, but you could use any server side language you like.

    Here is how the end result will look like:

    Realtime Vistor Tracker using Pusher

    Realitme Visitor Tracker Demo

    For the realtime functionality we'll use Pusher, who I work for. Pusher is a hosted service for quickly and easily adding realtime features into web and mobile applications. The service is used for all sorts of features such as notifications, game movements, chat, live data feeds and much more, so it fits the bill nicely here too. We'll be using the Pusher JavaScript API and the Pusher PHP Library.

    Here's the order in which we'll cover things:

    1. Get the basics out of the way
    2. Connect to Pusher
    3. Subscribe to new visitor page hits notifications
    4. Get the visitor's location using the HTML5 Geolocation API
    5. Broadcast the visitor location and page to all application visitors using Pusher
    6. Display the visitor location and page information on a Google map

    Read the rest of this entry »

    jQuery Geo is a plugin for the popular framework that provides an easy-to-use API for map/geolocation related actions.

    The plugin uses the open source map servers like Open Street Map, WMS and Esri ArcGIS (Open Street Map by default) for pulling the map data and can:

    • show mapping data and handle direct user interaction with the map
    • use geospatial functions like calculating bounding boxes, measuring the distance between geometries, etc.

    jQuery Geo

    The maps created are mobile-friendly and have lots of built-in methods for customization.

    jQuery Geo is very well-documented and supported with a bunch of examples.

    Inserting Google Maps into web pages is already easy with the simplicity Google offers in all of their products.

    However, things can get easier with GMAP3 jQuery plugin if you are planning to use maps with advanced features (like overlays or callbacks).


    There are simplified functions provided for the popular uses of Google Maps API that would normally require much more coding like:

    • getAddress – which returns a google.maps.GeocoderResult from a google.maps.LatLng
    • getRoute – which returns a google.maps.DirectionsResult from a google.maps.DirectionsRequest

    It is also possible to use the native Google maps functions within the plugin for maximum flexibility.

    Leaflet is a JavaScript library for creating tile-based maps which work in both mobile and desktop browsers.

    With a very easy-to-use API and OOP-based code, the library is modular and extensible.

    It has support for features like drag panning, scroll wheel or double-click zoom, zooming animation, pure CSS3 pop-ups and more.


    Leaflet is lightweight, very well-documented and supported with examples.

    P.S. Although the examples on the resource page use only OpenStreetMap, other popular providers will work with the library as well.

    MobilyMap is a jQuery plugin that can create a Google Maps-like, draggable interface from any image.

    It is possible to add location-based markers and display information when any of these markers are clicked.


    The map can be positioned how you prefer (like top, bottom-right, etc.) or by defining an exact location.

    Map data is mentioned within HTML elements like: <div class="point" id="p-900-130"> which will assign a marker to the specified point.

    The plugin has callback functions including onMarkerClick, onPopupClose and onMapLoad to better interact on every level.

    CartoView is an open source and free JavaScript framework for creating online maps quickly.

    It is integrated with Google Maps, Google Earth + OpenLayers and enables you to take control of the maps in means of function and presentation.


    With the help of its modular architecture, the functionality can be improved without touching the core and there are already extension created like the ones for Flickr, FourSquare, Youtube and more.

    The framework is well-documented and supported with examples.

    Uptime Robot