In my initial task with the help of RoelN, I was able to convert the provinces of South Africa into SVG maps and piece the map together quite nicely
I now need to animate this map which I have started doing but because the maps are all absolutely positioned and overlapping one another it is buggy when you try to select the right map.
Simple animation:
- Rollover a province, province scales up by 50%
- Rollout of current province, map scales back to original size.
Perhaps the best way to do this is to deactivate all other maps when the current map is in activate mode?
Here's the latest Fiddle (aaaaaargh not allowed to post Fiddle links! so much duplication and I have a working version over at jsFiddle!!!!) EDIT: See jsFiddle link in comment below
Here's the code.
<div class="maps">
<div class="mini-map-wrapper">
<div class="mini-map">
<span class="prov-North-West"></span>
<span class="prov-Limpopo"></span>
<span class="prov-Mpumalanga"></span>
<span class="prov-KwaZulu-Natal"></span>
<span class="prov-Gauteng"></span>
<span class="prov-Free-State"></span>
<span class="prov-Eastern-Cape"></span>
<span class="prov-Western-Cape"></span>
<span class="prov-Northern-Cape"></span>
</div>
</div>
</div>
<div class="map-0"></div>
<div class="map-1"></div>
<div class="map-2"></div>
<div class="map-3"></div>
<div class="map-4"></div>
<div class="map-5"></div>
<div class="map-6"></div>
<div class="map-7"></div>
<div class="map-8"></div>
@font-face {
font-family: 'za-provinces';
src:url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.eot');
src:url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.eot?#iefix') format('embedded-opentype'),
url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.woff') format('woff'),
url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.ttf') format('truetype'),
url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.svg#za-provinces') format('svg');
font-weight: normal;
font-style: normal;
}
.maps {
position: relative;
.mini-map-wrapper {
position: absolute;
top: 10px;
left: 50px;
width: 330px;
height: 330px;
padding:10px;
background-color: rgba(255,255,255,0.5);;
}
.mini-map {
width: 100%;
height: 100%;
margin: 0 auto;
background-color: white;
position: relative;
}
}
[class^="prov-"], [class*=" prov-"] {
font-family: 'za-provinces';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size:8em;
color: $corp-blue;
}
.prov-Western-Cape:before,
.prov-Northern-Cape:before,
.prov-Free-State:before,
.prov-Eastern-Cape:before,
.prov-North-West:before,
.prov-Mpumalanga:before,
.prov-Limpopo:before,
.prov-KwaZulu-Natal:before,
.prov-Gauteng:before
{
position: absolute;
}
.prov-Western-Cape:before {
content: "\e600";
bottom: 0;
left: 30px;
color: green;
}
.prov-Northern-Cape:before {
content: "\e601";
bottom: 84px;
left: 14px;
color: orange;
}
.prov-Free-State:before {
content: "\e602";
bottom: 51px;
left: 114px;
color: yellow;
}
.prov-Eastern-Cape:before {
content: "\e603";
bottom: 8px;
left: 98px;
color: pink;
}
.prov-North-West:before {
content: "\e604";
top: 116px;
left: 93px;
color: #0f0;
}
.prov-Mpumalanga:before {
content: "\e605";
bottom: 94px;
left: 169px;
color: brown;
}
.prov-Limpopo:before {
content: "\e606";
top: 80px;
right: 62px;
color: #87ceeb;
}
.prov-KwaZulu-Natal:before {
content: "\e607";
bottom: 52px;
right: 32px;
color: teal;
}
.prov-Gauteng:before {
content: "\e608";
top: 126px;
left: 154px;
color: red;
}
var provArr = [["prov-Eastern-Cape" , "map-0"],
["prov-Free-State" , "map-1"],
["prov-Gauteng" , "map-2"],
["prov-KwaZulu-Natal" , "map-3"],
["prov-Limpopo" , "map-4"],
["prov-Mpumalanga" , "map-5"],
["prov-North-West" , "map-6"],
["prov-Northern-Cape" , "map-7"],
["prov-Western-Cape" , "map-8"]
];
// first map is eastern cape is current
var currProv = provArr[0][2];
// deactivate all maps first
function deActivateMaps () {
jQuery.each( provArr, function( i, val ) {
jQuery( "." + provArr[i][0] ).hover(function(e) {
e.preventDefault();
//do other stuff when a click happens
});
});
}
jQuery (".map-0").slideDown();
//affect only the current map
jQuery.each( provArr, function( i, val ) {
jQuery( "." + provArr[i][0] ).hover(function() {
jQuery(this).css("cursor","pointer");
//jQuery(this).animate({"border":"1px solid red"}, 500);
jQuery(this).animate({"color":"#efbe5c","font-size":"12em","left":"600px;"}, 500);
// on click load maps
jQuery( "." + provArr[i][0] ).click(function() {
jQuery("." + currProv).hide();
jQuery("." + provArr[i][3]).show();
currProv = provArr[i][4];
});
}, function() {
jQuery(this).animate({"font-size":"8em","z-index":"1"}, 500);
//deActivateMaps ();
});
});
