Skip to content

Instantly share code, notes, and snippets.

@Kreozot
Last active October 28, 2015 08:30
Show Gist options
  • Save Kreozot/508b5bf9849dd1709c0e to your computer and use it in GitHub Desktop.
Save Kreozot/508b5bf9849dd1709c0e to your computer and use it in GitHub Desktop.
Polymaps / Andrew Mager
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/polymaps/2.2.0/polymaps.js"></script>
<style type="text/css">
@import url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.css");
@import url("http://github.com/simplegeo/polymaps/raw/v2.2.0/examples/example.css");
.layer circle {
fill: lightcoral;
fill-opacity: .5;
stroke: brown;
stroke-width: 1.5px;
}
.tipsy-inner {
padding: 3px;
line-height: 0;
}
.tipsy-inner img {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: white;
}
</style>
</head>
<body>
<script type="text/javascript">
var po = org.polymaps;
var radius = 10, tips = {};
var map = po.map()
.container(document.body.appendChild(po.svg("svg")))
.center({lon: -122.20877392578124, lat: 37.65175620758778})
.zoom(10)
.add(po.interact())
.on("move", move)
.on("resize", move);
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.geoJson()
.on("load", load)
.on("show", show)
.features([
{
"id": "stanford",
"properties": {
"html": "<img src='http://github.com/simplegeo/polymaps/raw/v2.2.0/examples/tipsy/stanford.png' width=200 height=200>"
},
"geometry": {
"coordinates": [-122.16894848632812, 37.42961865341856],
"type": "Point"
}
},
{
"id": "berkeley",
"properties": {
"html": "<img src='http://github.com/simplegeo/polymaps/raw/v2.2.0/examples/tipsy/berkeley.png' width=200 height=200>"
},
"geometry": {
"coordinates": [-122.26358225200948, 37.872092652605886],
"type": "Point"
}
}
]));
map.add(po.compass()
.pan("none"));
function load(e) {
for (var i = 0; i < e.features.length; i++) {
var f = e.features[i];
f.element.setAttribute("r", radius);
f.element.addEventListener("mousedown", toggle(f.data), false);
f.element.addEventListener("dblclick", cancel, false);
}
}
function show(e) {
for (var i = 0; i < e.features.length; i++) {
var f = e.features[i], tip = tips[f.data.id];
tip.feature = f.data;
tip.location = {
lat: f.data.geometry.coordinates[1],
lon: f.data.geometry.coordinates[0]
};
update(tip);
}
}
function move() {
for (var id in tips) {
update(tips[id]);
}
}
function cancel(e) {
e.stopPropagation();
e.preventDefault();
}
function update(tip) {
if (!tip.visible) return; // ignore
var p = map.locationPoint(tip.location);
tip.anchor.style.left = p.x - radius + "px";
tip.anchor.style.top = p.y - radius + "px";
$(tip.anchor).tipsy("show");
}
function toggle(f) {
var tip = tips[f.id];
if (!tip) {
tip = tips[f.id] = {
anchor: document.body.appendChild(document.createElement("a")),
visible: false,
toggle: function(e) {
tip.visible = !tip.visible;
update(tip);
$(tip.anchor).tipsy(tip.visible ? "show" : "hide");
cancel(e);
}
};
tip.anchor.style.position = "absolute";
tip.anchor.style.visibility = "hidden";
tip.anchor.style.width = radius * 2 + "px";
tip.anchor.style.height = radius * 2 + "px";
$(tip.anchor).tipsy({
html: true,
fallback: f.properties.html,
gravity: $.fn.tipsy.autoNS,
trigger: "manual"
});
}
return tip.toggle;
}
</script>
<span id="copy">
&copy; 2010
<a href="http://www.cloudmade.com/">CloudMade</a>,
<a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors,
<a href="http://creativecommons.org/licenses/by-sa/2.0/">CCBYSA</a>.
</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment