front range polymap

_.md

[ Launch: front range polymap ] 11292469 by hartzis

cities.json

{
    "type": "Topology",
    "objects": {
        "collection": {
            "type": "GeometryCollection",
            "geometries": [{
                "type": "Point",
                "properties": {
                    "city": "Fort Collins",
                    "state": "CO",
                    "population": 148616
                },
                "coordinates": [3242, 9999]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Loveland",
                    "state": "CO",
                    "population": 70223
                },
                "coordinates": [3304, 8735]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Greeley",
                    "state": "CO",
                    "population": 95357
                },
                "coordinates": [9999, 8788]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Longmont",
                    "state": "CO",
                    "population": 88669
                },
                "coordinates": [3032, 6338]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Boulder",
                    "state": "CO",
                    "population": 101808
                },
                "coordinates": [0, 4773]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Louisville",
                    "state": "CO",
                    "population": 19074
                },
                "coordinates": [2469, 4433]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Broomfield",
                    "state": "CO",
                    "population": 58298
                },
                "coordinates": [3295, 3847]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Arvada",
                    "state": "CO",
                    "population": 109745
                },
                "coordinates": [3371, 2657]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Lakewood",
                    "state": "CO",
                    "population": 145516
                },
                "coordinates": [3320, 1707]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Golden",
                    "state": "CO",
                    "population": 19186
                },
                "coordinates": [848, 2175]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Aurora",
                    "state": "CO",
                    "population": 339030
                },
                "coordinates": [7883, 1903]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Westminster",
                    "state": "CO",
                    "population": 109169
                },
                "coordinates": [4102, 3297]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Denver",
                    "state": "CO",
                    "population": 634265
                },
                "coordinates": [5097, 2015]
            }, {
                "type": "Point",
                "properties": {
                    "city": "Highlands Ranch",
                    "state": "CO",
                    "population": 101898
                },
                "coordinates": [5501, 0]
            }]
        }
    },
    "arcs": [],
    "bbox": [-105.26962280273436, 39.54085217181931, -104.71481323242188, 40.52423878069866],
    "transform": {
        "scale": [0.000055486505681816764, 0.00009834849573750874],
        "translate": [-105.26962280273436, 39.54085217181931]
    }
}

config.json

{"description":"front range polymap","endpoint":"","display":"svg","public":true,"require":[{"name":"polymaps","url":"http://polymaps.org/polymaps.min.js?2.5.0"},{"name":"topojson","url":"http://cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"},{"name":"tip","url":"http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"cities.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/0yqPqGv.png"}

inlet.js

//var tip = d3.tip()
//  .attr('class', 'd3-tip')
//  .html(function(d) {
//    return "<span style='color:red'>" + d.properties.city + "</span>";
//  });

var svg = d3.select('svg');

var po = org.polymaps;

// Create the map object, add it to #map…
var map = po.map()
    .container(svg.node())
	.center({lat: 40.05, lon: -105.0})
    .zoom(9)
  //  .add(po.interact());

// Add the image tiles as a base layer…
map.add(po.image()
    .url(po.url("http://{S}.tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg")
    .hosts(["a", "b", "c", "d"])));

//http://{S}.tile.stamen.com/watercolor/{Z}/{X}/{Y}.jpg

//http://{S}.tiles.mapbox.com/v3/pinterest.map-ho21rkos/{Z}/{X}/{Y}.jpg

var citiesJson = tributary.cities;
//console.log(cities);

var cities = topojson.feature(citiesJson, citiesJson.objects.collection);
console.log(cities);

var tooltip = svg.append('div')
	.style('position', 'absolute')
	.style('z-index', '10')
	.style('visibility', 'hidden')
	.text('a tooltip')

var layer = svg.insert("svg:g");

  // Add an svg:g for each station.
  var marker = layer.selectAll("g")
      .data(cities.features)
    .enter().append("svg:g")
      .attr("transform", transform)
  .on('click', function(d){console.log(d.properties.city)})
  .on("mouseover", function(d){
    //console.log(this);
    d3.select(this).select('.city-label')
    .transition().duration(500)
    .attr('opacity', 1)
  })
  .on("mouseout", function(d){
    //console.log(this);
    d3.select(this).select('.city-label')
    .transition().duration(500)
    .attr('opacity', 0)
  });

  // Add a circle.
var markerCircle = marker.append("svg:circle")
      .attr("r", 9.5)
		.classed("city-marker", true)
  .on('mouseover', function(d){
    console.log('circle:',this)
    
  })
  ;

//	marker.append("svg:title")
//   .text(function(d) { return d.properties.city; })

  // Add a label.
  var label = marker.append("svg:text")
		//.attr('class', 'tooltip')
		.attr("y", -15)
		.style("text-anchor", "middle")
		.classed("city-label", true)
		.attr('opacity', 0)
        .text(function(d) { return d.properties.city; });


  function transform(d) {
    d = map.locationPoint({lon: d.geometry.coordinates[0], lat: d.geometry.coordinates[1]});
    return "translate(" + d.x + "," + d.y + ")";
  }

styles.css

.city-label {
 stroke: #000;
  stroke-width:1;
  fill: #000;
  pointer-events: none;
  
}

.city-marker {
 fill: #000;
 stroke-width:3;
  stroke: #aaa;
  opacity: 0.45;
}