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.
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
XML structure:
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>