Polymaps problem with Google Chrome in Linux

56 views
Skip to first unread message

ZeoS

unread,
Feb 2, 2012, 4:31:55 PM2/2/12
to simp...@googlegroups.com
Hi all,
    I'm testing Polymaps and I'm having an issue with my test map in chrome: basically it's not working I create a div of 900x800 but it shows whatever it wants. If I open the same html with firefox it works great. 
Any Idea of what I'm doing wrong? I don't see a problem when looking at the examples so it's clearly something I'm doing bad, heres my code:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://polymaps.org/polymaps.min.js"></script>
<style type="text/css">
html,body {
height: 100%;
}

body {
margin: 0;
background: #E5E0D9;
}

svg {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}

.compass .back {
fill: #eee;
fill-opacity: .8;
}

.compass .fore {
stroke: #999;
stroke-width: 1.5px;
}

.compass rect.back.fore {
fill: #999;
fill-opacity: .3;
stroke: #eee;
stroke-width: 1px;
shape-rendering: crispEdges;
}

.compass .direction {
fill: none;
}

.compass .chevron {
fill: none;
stroke: #999;
stroke-width: 5px;
}

.compass .zoom .chevron {
stroke-width: 4px;
}

.compass .active .chevron,.compass .chevron.active {
stroke: #fff;
}

.compass.active .active .direction {
fill: #999;
}
</style>
</head>
<body>
<div id="map" style="width: 900px; height: 800px"></div>
<script type="text/javascript">
var po = org.polymaps;

var map = po.map().container(
document.getElementById('map').appendChild(po.svg("svg")))
.center({
lon : -3.703487,
lat : 40.416698
}).zoom(10).add(po.interact());

map.add(po.image().url(
po.url(
"http://{S}tile.cloudmade.com"
+ "/1/256/{Z}/{X}/{Y}.png").hosts(
[ "a.", "b.", "c.", "" ])));

</script>
</body>
</html>


Thanks!
Reply all
Reply to author
Forward
0 new messages