Blogfreakz - Web Design and Web Development resources » Maps

jVectorMap: An Interactive jQuery Map

Marvin@Blogfreakz — Fri, 03 Feb 2012 12:43:33 +0000

Integrate an interactive map into your website with jVectorMap. This is a jQuery plugin which shows vector maps on HTML pages and applies SVG in all contemporary modern browsers ranging from ancient IE 6 to 8, Chrome, Opera, IE9, Safari, Firefox. All you have to do is connect Javascript and CSS files of plugin and that’s it! You can also change its parameters easily.

You can check out the full tutorial HERE.

Incoming search terms for the article:

Create a Flexible jQuery Data Heat Map

Keith@Blogfreakz — Thu, 26 Jan 2012 10:45:06 +0000

Sometimes reading a table’s long and numerous columns can be quite a very cumbersome and tedious task. You want your readers to immediately see the whole picture once they glance at your table’s contents.

This is where Design Chemical’s Data Heat Map can help. When you’re dealing with hierarchical and/or numeric data, or data with a maximum and minimum value, the heat map adds varying shades of a particular color, making it easier for the viewer to quickly spot the highest and lowest value. It can be a nice alternative for sorting data in ascending or descending order because you eliminate the user’s need to click on a button just to rearrange the data in a particular column.

The two main objectives of this tutorial are:

To capture and statistically analyze all data points
To provide a method of grouping the data and be able to identify what formatting should be applied

Let’s start with the usual basic HTML markup. We’ll just keep the code short by only including one row of data with the CSS classes but feel free to add as many rows as you like if you want to make it look like the one in the demo page or the image sample above:

HTML

Title data 1 data 2 data 3 data 4 data 5 data 6

Wanda 25 55 26 19 39 21

Let’s go over the code first part by part.

First thing we’ll do is capture and analyze the data, meaning we have to find out the largest value within the range. We do this by creating an array of all the data points and then returning the maximum value:

Next is to group the data points. We’ll be using the percentage (%) of each value from the max value to find exactly where the data point is positioned on a scale of 1-100.

This is critical to create the heat map as this scale is what we’ll use to dynamically generate the CSS style. You can adjust the max number (100) to suit your data and style of heat map. In addition, we only want to use integers so we also include the rounding off of the results.

n = 100; // Declare the number of groups

// Loop through each data point and calculate its % value

$(‘.heat-map tbody td’).not(‘.stats-title’).each(function(){

var val = parseInt($(this).text());

var pos = parseInt((Math.round((val/max)*100)).toFixed(0));

});

The above code is still incomplete since we still have to add the actual formatting into the same loop.

To create the heat map effect we are basically going to use background color.

Technically there is no restriction on how you apply the styles, and background color is only one option. The code is fairly flexible and some minor adjustments can be applied to font size, container size, background image, etc.

Color is easy because we can directly calculate each color value between 2 defined colous – our start point and the end point, which across 100 points should create a gradient style effect.

To calculate color we need to use the RGB values, which are 0 to 255 for Red, Blue and Green.

// Define the ending colour, which is white

xr = 255; // Red value

xg = 255; // Green value

xb = 255; // Blue value

// Define the starting colour #f32075

yr = 243; // Red value

yg = 32; // Green value

yb = 117; // Blue value

// Calculate a specific colour point

// pos – calculated in the earlier code identifies where on the scale the data point is

red = parseInt((xr + (( pos * (yr – xr)) / (n-1))).toFixed(0));

green = parseInt((xg + (( pos * (yg – xg)) / (n-1))).toFixed(0));

blue = parseInt((xb + (( pos * (yb – xb)) / (n-1))).toFixed(0));

// Once we have our RGB values we combine them to create our CSS code

clr = ‘rgb(‘+red+’,'+green+’,'+blue+’)';

Finally we apply the new RGB value (heat map style) to each data point by setting the background colour of the table cell.

$(this).css({backgroundColor:clr});

Below are the combined parts of the code to create the complete heat map function.

Complete jQuery code

If you want to completely change the look (i.e. the colors of the cells) of the heat map, all you have to do is change the start and end color RGB values. Have fun experimenting with the values and customizing the look of your tables!

Download Source Files

Incoming search terms for the article:

Leaflet – Lightweight JavaScript Library For Interactive Maps

Mufti Ali — Tue, 17 May 2011 17:54:38 +0000

Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API.

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

Requirements: -
Demo: http://leaflet.cloudmade.com/index.html
License: Other License

Incoming search terms for the article:

iPhone Tracker – Open Source Application To Mapping Your iPhone Movement

Mufti Ali — Tue, 19 Apr 2011 00:28:15 +0000

iPhone Tracker application maps the information that your iPhone is recording about your movements. It doesn’t record anything itself, it only displays files that are already hidden on your computer.

If you run it on an OS X machine that you’ve been syncing with an iPhone or an iPad with cellular plan, it will scan through the backup files that are automatically made, looking for the hidden file containing your location. If it finds this file, it will then display the location history on the map.

The database of your locations is stored on your iPhone as well as in any of the automatic backups that are made when you sync it with iTunes. One thing that will help is choosing encrypted backups, since that will prevent other users or programs on your machine from viewing the data, but there will still be a copy on your device. The visualization is implemented as a view onto a local web page using the OpenHeatMap jQuery plugin.

Website: http://petewarden.github.com/iPhoneTracker

Incoming search terms for the article:

Subway Map Visualization With jQuery

Mufti Ali — Tue, 01 Mar 2011 09:20:51 +0000

subwayMap is plugin for jQuery that allow you create a beautiful, interactive subway map visualization for your website using HTML markup. It use the power of jQuery and HTML5. The map size, line width and colors can all be customizable. The markup used to create the map is search engine friendly too. The map should be as faithful as possible to the London Underground map style with smooth curves and interchange connectors and 45-degree diagonals.

Before you get started, there’s one thing you’ll want to keep in mind — beautiful subway maps are never automatic; they are almost always the result of care in design and placement to ensure that the resulting map is functional, legible and beautiful. This plugin is just a tool…you will still need to plan and design your map in order to produce a good result.

Like most navigation plugins, subwayMap uses an unordered list. The basic markup consists of the following:

An outer DIV element to control general placement, background etc.

One UL element for each “line” desired in the map.

For each UL element, one or more LI elements with either plain text or an A element with plain text. An LI element provides coordinates for drawing lines and/or markers on the map.

Requirements: jQuery Framework
Demo: http://www.kalyani.com/2010/10/subway-map-visualization
License: License Free

Incoming search terms for the article:

MobilyMap – Converts Simple Image Into Functional Map

Mufti Ali — Thu, 09 Dec 2010 15:43:15 +0000

MobilyMap is lightweight (5KB), fully configurable jQuery plugin that converts an simple image into a functional map. MobilyMap has some option for customization such as position, use popup, buble, cookies, caption, on marker click, on popup close and on map load.

Map data is mentioned within HTML elements, “

” which will assign a marker to the specified point. MobilyMap is free to use and released under MIT License.

Requirements: jQuery Framework
Demo: http://playground.mobily.pl/jquery/mobily-map/demo.html
License: MIT License

Incoming search terms for the article:

How To Styled Maps Using Google Maps API Version 3

Mufti Ali — Sat, 09 Oct 2010 09:49:35 +0000

With Google Maps API V3, you can customize Google Maps’s styling in three new ways:

You can selectively remove map elements
You can “simplify” certain map elements
You can modify the coloring of most map elements

There are many reasons for creating custom map styles, including:

Matching the coloring of a website or corporate logo
Matching the coloring of your mashup’s map markers
Removing or simplifying map elements so that your data stands out more
Removing map elements that have no relevance to your data
Making your mashup more attractive and memorable

41latitude is sharing tutorial How To Styled Maps Using Google Maps API Version 3. The goal of the tutorial is to give us an overview of how we can use Google Maps API V3 to create unique map styles.

Website: http://www.41latitude.com/post/1268734799/google-styled-maps

Incoming search terms for the article:

Tile5 – Opensource HTML5 Mapping Javascript Library

Mufti Ali — Tue, 28 Sep 2010 01:37:30 +0000

Tile5 is an opensource HTML5 mapping javascript library that provides developers the ability to integrate existing mapping platforms to provide a rich HTML5 experience. In addition to providing a great API for mapping, Tile5 also excels at building more generic tiling application interfaces.

Tile5 is targeted at both mobile and desktop browsers that support HTML5. The long-term goal is to achieve compatibility with all mobile devices considered “Class A” on the jQuery Mobile GBS chart, as well as modern desktop browsers (including IE once Microsoft get their act together).

Requirements: HTML5 Enabled Browsers
Demo: http://www.tile5.org/demos/mapping
License: MIT License

Incoming search terms for the article:

bMap – Google Maps jQuery Plugin

Mufti Ali — Thu, 16 Sep 2010 02:29:22 +0000

bMap is jQuery plugin that allows you to quickly and easily add mapping to your website. It has been designed from the beginning to handle lots of markers, lots of layers, and custom marker icons.

The plugin can manage a sidebar for you, one with a list of markers, one with a list of layers. The sidebars can be styled with CSS. The internal Google object is exposed, so you can continue to use all of the power of the Google Maps API. You can also access the internals of the bMap object.

Requirements: jQuery framework, google maps, Google API Key
Demo: http://www.blocsoft.com/bmap
License: GPL Licensi

Incoming search terms for the article:

OpenHeatMap – Turn Your Spreadsheet Into a Map

Mufti Ali — Mon, 23 Aug 2010 10:35:28 +0000

OpenHeatMap is a service designed to make it easy for non-specialists to create maps communicating information. It transforms data from a traditional data source such as a spreadsheet into an interactive animated view of a particular area. You can then share that map online, a bit like YouTube for geographic visualizations.

For developers, it’s a JQuery plugin that makes it easy to create a completely open-source mapping component on any web page, using either Flash or HTML5’s Canvas element under the hood depending on the platform and preferences.

erything but the core rendering is designed to be controlled by Javascript within the hosting page. You can get a list of the event hooks and callable functions at the Component API calls page.

The website backend and map processing tools are built using PHP. The overall control of the component is handled through Javascript, and there’s two alternative rendering engines; a Flash SWF file written in Flex and a pure Javascript implementation using Canvas on modern browsers.

Requirements: jQuery framework
Demo: http://www.openheatmap.com/gallery.html
License: GPL License