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

Archive for the ‘Map’ Category

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).

GMAP3

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.js

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.

MobilyMap

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.

CartoView

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.

Tile5 is an open source HTML5 mapping JavaScript library that enables developers to integrate existing mapping platforms for providing a rich HTML5 experience.

It is compatible with most of the mapping providers like Google, Bing, Yahoo, MapQuest and more.

Tile5

Besides the API for mapping, the library is also functional for creating more generic tiling application interfaces.

With the compatibility HTML5 offers, Tile5 is targeted at both desktop and mobile browsers.

Tip: there are very nice demos offered to see the power of the library.

Polymaps is a free JavaScript library for creating dynamic and interactive maps.

Besides the usual cartography from OpenStreetMap, CloudMade, Bing, etc., it works 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.

Polymaps

As Polymaps can load data at a full range of scales, it’s a good fit for showing information from country level on down to states, cities, neighborhoods, and individual streets.

And, as it uses SVG to display information, you can use CSS rules to define the design of the data.

OpenHeatmap is a highly customizable mapping resource that comes in 2 flavors:

  • web-based free service:  creating maps that can be shared easily (for end-users)
  • jQuery plugin: more flexible choice with using either Flash or HTML5’s Canvas element to create maps (for developers).

OpenHeatmap

It makes generating thematic maps possible by using the OSM XML file format (OpenStreetMap).

And, if wanted, density/blob based traditional heatmaps can be created too.

The plugin has a feature-rich API and every aspect of the maps can be controlled with JavaScript (like adding pop-ups, allowing zoom, changing colors and sizes, etc.).

MooGeo is a MooTools plugin that makes accomplishing common geolocation tasks easy.

These tasks include getting detailed info about an IP (country, city, longitude, latitude, etc.), parsing geographical data from text and even finding Flickr photos about a given place.

MooGeo MooTools Geolocation Plugin

The plugin makes use of multiple free-to-use services like:

  • Yahoo PlaceMaker
  • Yahoo GeoPlanet
  • jsonip.appspot.com
  • W3C Geo location
  • Flickr.places.findLatLon

and wraps them into a single package.

MooGeo has also support for events on every level (when a request is sent, completed, success or error) which helps offering a better experience to end users.

Geolocation is one of the most popular subjects for today's web & there are many solutions that help geo-enabling web applications.

YQL Geo Library is an impressive resource for geolocation as it is totally free & JavaScript-based.

It has various powerful features like:

  • detecting the visitor’s location with the W3C geo API and with IP as a fallback
  • find geo location from text
  • find location from lat/lon pair
  • find locations in a certain web document (by URL)
  • get the location for a certain IP number

YQL Geo Library

The library is lightweight (4kb uncompressed) & non-complicated. It just works by calling a function like:

yqlgeo.get('217.12.14.240',function(o){
  alert(o.place.name + ',' + o.place.country.content +
        ' (' + o.place.centroid.latitude + ',' +
               o.place.centroid.longitude + ')'
        );
});

will get you the city, country, latitude & longitude of any given IP.

Uptime Robot
feed-holder
FeedBurner
  • ManageWP
  • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
  • PSD to HTML
    PSD to HTML