front range polymap

_.md

[ Launch: front range polymap ] 11292469 by hartzis

cities.json

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;
}