Tag Archives: map

Interactive Internet Map

Posted on by

The Internet Map is an interactive, searchable, bubble-filled visualization of the Internet showing 350,000 websites, based on a traffic snapshot of the Internet from late 2011. It has been created by Ruslan Enikeev and went  public on July 24, 2012.

The Internet Map shows each website as a circle, sized according to levels of web traffic. The circle’s colour indicates the country to which it relates. User’s switching between websites forms links, and the stronger the link, the closer the websites tend to arrange themselves to each other. Clusters on the map are semantically charged, they join websites together according to their content.

Internet Map by Ruslan Enikeev

The mathematical model is based on the thesis A Numerical Optimization Approach
to General Graph Drawing, submitted in 1999 by Daniel Tunkelang at the School of Computer Science, Carnegie Mellon University. The engineering solution is based on the Fast N-Body Simulation with CUDA, described by Lars Nyland and Mark Harris from NVIDIA Corporation and by Jan Prins from the University of North Carolina at Chapel Hill.

The technologies used  to present the Internet map are Google maps engine for the visual display, Microsoft’s .net technologies for web query processing and Amazon AWS  (S3, Cloudfront, Relational Database Services RDS and Elastic Beanstalk) for hosting and content delivery.

About 30 million picture tiles (256 x 256 pixels) are used to form the map. More than one million unique visitors saw the map during the first week after the project went online.

HTML client-side image maps

Posted on by

Last update : June 24, 2014

You can create different clickable areas within an image using the usemap attribute together with the map tag. The usemap attribute of the img tag points to an map tag containing a description of the clickable areas that the map is divided into. The map tag has a id attribute to define its name, and also declares which areas are clickable by using the area tags.

An example of HTML code is shown below :

<img src="image.jpg"
	width="150"
	height="70"
	usemap="#mymap">
<map id="mymap">
	<area shape="rect"
		   href="start.html"
		   coords="0,0,48,28"
                   alt="blablabla" />

	<area shape="circle"
		   href="previous.html"
		   coords="50,30,10"
                   alt="blablabla" />

	<area shape="poly"
		   href="next.html"
		   coords="60,50,80,30,100,40,50,100"
                   alt="blablabla" />
</map>

The coordinates for the different shapes are :

  • rect (rectangle) : top left x, y ; bottom right x, y
  • circle : center x, y ; radius
  • poly (polygon) : list of x, y coordinates, separated by commas

In XHTML 1.0, the “usemap” attribute in the “img” element is defined as being a URI. This means that # (pound sign) can be used, as it specifies a link to a ‘fragment identifier’ in the current page. For the “map” element, the “id” attribute is required. In XHTML 1.1, the “usemap” attribute for the “map” element is an IDREF rather than a URI. This means that this value must be the same value as the “id” attribute of the other element.

The problem is that the valid code does’nt work in all browsers. If you want an image map that functions, you must write invalid XHTML 1.1 code. More infos about this topic are available at the Randsco website.

The name tag is required besides the id tag for the Firefox and Chrome browser’s. To embed a usemap in another HTML page, the object tag returns a wrong URL with embedded links. A workaround is to use iframes which work in most browsers.

ISMAP is part of the old-fashioned way of making image maps which originally required a server-side file as well as the HTML in the page.

We can add events (that can call a javascript) to the tags inside the image map. The tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.

A code example is shown hereafter :

<area shape =”circle” coords =”90,58,3″
onMouseOver=”writeText(‘The mouse is inside the circle.’)”
href =”about.html” target =”_blank” alt=”Blablabla” />

A useful program to set up image maps is Mapedit 4.0 5 from Boutell.com.