Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 8, 2016 23:13
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/601639 to your computer and use it in GitHub Desktop.
Save mbostock/601639 to your computer and use it in GitHub Desktop.
Download ZIP
Labeled points
Raw
.block
license: gpl-3.0
Raw
README.md

This example shows how to add text labels to GeoJSON point features in Polymaps. We create a new svg:text element and insert it as a following sibling to the default svg:circle element provided by the GeoJSON layer. The “dy” and “text-anchor” attributes are used to center the text horizontally and vertically.

Implementation Note: This example depends on the circle element’s “transform” attribute. In release 2.2.0, the circle element used the “cx” and “cy” attributes instead. Release 2.3.0 will use the “transform” attribute and is available in my personal fork.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.rawgit.com/mbostock/polymaps/2142f192bc527e4cb17a113ef46219bf1999b269/polymaps.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mbostock/polymaps/2142f192bc527e4cb17a113ef46219bf1999b269/lib/crimespotting/crimespotting.js"></script>
<style type="text/css">
@import url("https://cdn.rawgit.com/mbostock/polymaps/2142f192bc527e4cb17a113ef46219bf1999b269/examples/example.css");
html, body {
height: 100%;
background: #E6E6E6;
}
svg {
display: block;
font: 10px sans-serif;
}
circle {
fill: white;
fill-opacity: .6;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var po = org.polymaps;
var map = po.map()
.container(document.body.appendChild(po.svg("svg")))
.center({lat: 37.787, lon: -122.228})
.zoomRange([12,12])
.add(po.interact());
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()
.url(crimespotting("http://oakland.crimespotting.org"
+ "/crime-data"
+ "?count=100"
+ "&format=json"
+ "&bbox={B}"
+ "&dstart=2010-04-01"
+ "&dend=2010-04-01"))
.on("load", load)
.clip(false)
.zoom(12));
/* Post-process the GeoJSON points and add text labels. */
function load(e) {
for (var i = 0; i < e.features.length; i++) {
var f = e.features[i],
c = f.element,
t = po.svg("text");
t.setAttribute("transform", c.getAttribute("transform"));
t.setAttribute("text-anchor", "middle");
t.setAttribute("dy", ".35em");
t.appendChild(document.createTextNode(i));
c.setAttribute("r", 10);
c.parentNode.insertBefore(t, c.nextSibling);
}
}
</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