Kreozot · October 28, 2015 08:30
diff --git a/index.html b/index.html
 <!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>
	<!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">
	© 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>