Skip to content

Instantly share code, notes, and snippets.

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

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.

<!DOCTYPE html>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<style type="text/css">
@import url("");
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;
<script type="text/javascript">
var po = org.polymaps;
var map =
.center({lat: 37.787, lon: -122.228})
+ "/1a1b06b230af4efdbb989ea99e9841af" //
+ "/998/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
+ "/crime-data"
+ "?count=100"
+ "&format=json"
+ "&bbox={B}"
+ "&dstart=2010-04-01"
+ "&dend=2010-04-01"))
.on("load", load)
/* 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");
c.setAttribute("r", 10);
c.parentNode.insertBefore(t, c.nextSibling);
<span id="copy">
&copy; 2010
<a href="">CloudMade</a>,
<a href="">OpenStreetMap</a> contributors,
<a href="">CCBYSA</a>.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment