About map

Javascript map with tooltip - dynamic XML content.

As you know the biggest companies on the internet (Yahoo and Google) have created web applications/API's and that have a positive effect on mapping applications and that's the main reason that their number has increased substantially.

But not everybody has the same needs when it comes to accessibility. Most online mapping applications have the same purpose and the same options.
That's why for most of the users, these maps are kind of useless.

Is there a way to combine the design with the data , keeping all things simple ,useful and accessible?
Yes: using the Javascript map with tooltip - dynamic XML content !

The design is totally separated from the data! You only have an image and a XML file!

Let's presume your company is the Envato Marketplace. And Envato Marketplace has the folowing marketplaces : Graphic River , Code Canyon, ThemeForest , 3dOcean etc. So - Envato - mother company , the others "subdivisions".

Let's say that envato works with people around the world (USA in my example) and has offices in the 7 locations that are shown on the map.
Using the Javascript map with tooltip - dynamic XML content you can add custom informations about your companies around the world! (in my example (logo, position, name) adress, phone, email)
That information it's gonna be stored in a XML. That's the easiest way posibile ever!
You can see below how to install & modify the Javascript map with tooltip - dynamic XML content for your own needs.

Europe map example

Install and config

So , you have downloaded the Javascript map dynamic xml content.zip file. When you extract the contents you will find:

HTML - index.html
- usamap.html
- eu.html
Image map & xml
- asset/ -> [alias]/ -> map image file
- asset/ -> [alias]/ -> map xml file
CSS
- css/ -> map.css/ file
Javascript
- js/ -> map.class.js


need to config:
	mapUrl = url to map image
	xmlUrl  = url to map xml pattern
	mapElm = element were to append map
	mapMargin = map margin


in head tag insert html and js:
<!-- Map includes -->
<script type="text/javascript" src="js/map.class.js"></script>
<link rel="stylesheet" type="text/css" href="css/map.css" media="screen" />


in body tag insert html and js:
<!-- map replace code -->
<div class="map" id="roMap"></div>
<script type="text/javascript">
$(document).ready(function() {
	// ro map init
	javascriptMap.init({
		'mapUrl': 'asset/ro/map.png',
		'xmlUrl': 'asset/ro/map.xml',
		'mapElm': '#roMap',
		'mapMargin': '13px 0 0 10px'
	});
});
</script>

XML structure:

position:
	- attributes: 
		id = uniq id of location
		left = location left position
		top = location top position
		loadbitmap = logo (url to logo)
		bitmapsize = logo width
		align = anchor point position (left or right)
	
	- node (show in tooltip):
		name = Location name (show in tooptip)
		details:
			adress = location address
			telephone = location telephone
			email = email
		close details	
close position	


example:
<position id="TL" left="515" top="250" loadbitmap="images/map/logo.png" bitmapsize="36" align="left">
	<name>Tulcea</name>
	<details>
		<adress>Tulcea location</adress>
		<telephone>0728 703 942</telephone>
		<email>email@test.com</email>
	</details>
</position>