Dark Map w/ Path

.gitignore

.DS_Store

common.js

var _, buildStack, newStack, buildMap, clr, pathLine, appendPath, setPath, blowBus, appendSVG, buildOverlay;
_ = require("prelude-ls");
buildStack = function(){
  var index, build;
  index = -1;
  return build = function(){
    var ctn;
    ctn = d3.select("body").insert("div", ":first-child").append("div");
    ctn.style({
      "background-color": '#252525',
      "height": "0px",
      "width": "100%"
    }).style({
      "height": "600px"
    });
    return ctn.append("div").style({
      "height": "600px"
    });
  };
};
newStack = buildStack();
buildMap = function(mapStyle, position, overlay){
  var map;
  map = new google.maps.Map(newStack().node(), {
    zoom: position.zoom,
    center: new google.maps.LatLng(position.lat, position.lng),
    disableDefaultUI: true,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    zoomControl: false,
    disableDoubleClickZoom: true,
    mapTypeControlOptions: {
      mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  });
  google.maps.event.addListener(map, "bounds_changed", function(){
    var bounds, northEast, southWest;
    bounds = this.getBounds();
    northEast = bounds.getNorthEast();
    return southWest = bounds.getSouthWest();
  });
  map.mapTypes.set('map_style', mapStyle);
  map.setMapTypeId('map_style');
  if (overlay !== undefined) {
    return overlay.setMap(map);
  }
};
clr = {};
clr.red = "rgb(255, 0, 71)";
clr.brown = "rgb(255, 110d, 100)";
clr.green = "rgb(0,249,153)";
clr.blue = "rgb(104,126,255)";
clr.white = "rgb(226,211,255)";
clr.grey = "rgb(59,50,78)";
clr.purple = "rgb(164, 51, 216)";
pathLine = d3.svg.line().x(function(it){
  return it[0];
}).y(function(it){
  return it[1];
}).interpolate("cardinal");
appendPath = function(it){
  return it.attr({
    "d": function(it){
      return pathLine(
      it.list_coor);
    }
  }).style({
    "fill": "none",
    "stroke": function(it, i){
      return clr.purple;
    },
    "stroke-width": "6px",
    "mix-blend-mode": "screen",
    "opacity": 1
  });
};
setPath = function(it){
  return it.attr({
    "d": function(it){
      return pathLine(
      it.list_coor);
    }
  });
};
blowBus = function(it){
  return it.style({
    "opacity": 1
  }).attr({
    "stroke-dasharray": function(){
      return 100 + " " + this.getTotalLength();
    },
    "stroke-dashoffset": function(){
      return 100;
    },
    "shape-rendering": "geometricPrecision"
  }).transition().ease('linear').duration(function(){
    return this.getTotalLength() * 3;
  }).delay(function(it, i){
    return i * 2000 * Math.random();
  }).attr({
    "stroke-dashoffset": function(){
      return -this.getTotalLength();
    }
  }).each("end", function(){
    return d3.select(this).call(blowBus);
  });
};
appendSVG = function(that, offset){
  var svg, group;
  svg = d3.select(that.getPanes().overlayMouseTarget).append("div").attr("class", "mapOverlay").append("svg");
  group = svg.append("g").attr({
    "class": "class",
    "gPrints": "gPrints"
  });
  svg.attr({
    "width": offset * 2,
    "height": offset * 2
  }).style({
    "position": "absolute",
    "top": -1 * offset + "px",
    "left": -1 * offset + "px"
  });
  return group;
};
buildOverlay = function(pathData){
  var pathOverlay, toMany;
  pathOverlay = new google.maps.OverlayView();
  buildOverlay.mapOffset = 4000;
  toMany = function(it){
    return _.concat(
    [it, it, it]);
  };
  pathOverlay.onAdd = function(){
    var gPrints;
    gPrints = appendSVG(this, buildOverlay.mapOffset);
    return pathOverlay.draw = function(){
      var projection, lsMapXYPathsData, dtb, dt;
      projection = this.getProjection();
      buildOverlay.googleMapProjection = function(coordinates){
        var googleCoordinates, pixelCoordinates;
        googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
        pixelCoordinates = projection.fromLatLngToDivPixel(googleCoordinates);
        return [pixelCoordinates.x + buildOverlay.mapOffset, pixelCoordinates.y + buildOverlay.mapOffset];
      };
      buildOverlay.cellOperation = function(cell){
        var coor;
        coor = buildOverlay.googleMapProjection([cell[0], cell[1]]);
        return [coor[0], coor[1]];
      };
      lsMapXYPathsData = _.each(function(row){
        return row.list_coor = _.map(function(it){
          return buildOverlay.cellOperation(it);
        })(
        row.list_coor);
      })(
      pathData);
      dtb = gPrints.selectAll(".busPathBase").data(lsMapXYPathsData);
      dtb.enter().append("path").attr({
        "class": "busPathBase"
      }).call(appendPath);
      dtb.call(setPath);
      dt = gPrints.selectAll(".busPath").data(toMany(
      lsMapXYPathsData));
      dt.enter().append("path").attr({
        "class": "busPath"
      }).call(appendPath);
      return dt.call(setPath).call(blowBus);
    };
  };
  return pathOverlay;
};

common.ls

_ = require "prelude-ls"

### a new stack
buildStack = ->
	index = -1

	build = ->
		ctn = d3.select "body"
			.insert "div", ":first-child"
			.append "div"

		### animation slide-in
		ctn
			.style {
				"background-color":  '#252525'
				"height": "0px"
				"width": "100%"
				# "margin-top": "3px"
			}
			# .transition!
			# .duration 3000
			.style {
				"height": "600px"
			}

		ctn
			.append "div"
			.style {
				"height": "600px"
			}

newStack = buildStack!




### a map
buildMap = (mapStyle, position, overlay)->

	map = new google.maps.Map(newStack!.node!, {
		zoom: position.zoom,
		center: new google.maps.LatLng(position.lat, position.lng),
		disableDefaultUI: true,
		scrollwheel: false
		navigationControl: false
		mapTypeControl: false
		scaleControl: false
		draggable: false
		zoomControl: false
		disableDoubleClickZoom: true
		mapTypeControlOptions:{
			mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
		}
	})

	google.maps.event.addListener(map, "bounds_changed", -> 
		bounds = @getBounds!
		northEast = bounds.getNorthEast!
		southWest = bounds.getSouthWest!
		# console.log [(southWest.lng! + northEast.lng!) / 2, (southWest.lat! + northEast.lat!) / 2]
	)

	map.mapTypes.set('map_style', mapStyle)
	map.setMapTypeId('map_style')


	if overlay is not undefined then overlay.setMap map




clr = {}
clr.red = "rgb(255, 0, 71)"
clr.brown = "rgb(255, 110d, 100)"
clr.green = "rgb(0,249,153)"
clr.blue = "rgb(104,126,255)"
clr.white = "rgb(226,211,255)"
clr.grey = "rgb(59,50,78)"
clr.purple = "rgb(164, 51, 216)"


pathLine = d3.svg.line!
	.x -> it[0]
	.y -> it[1]
	.interpolate "cardinal"

appendPath = ->
	it.attr {
		"d": -> it.list_coor |> pathLine
	}
	.style {
		"fill": "none"
		"stroke": (it, i)-> clr.purple 
		"stroke-width": "6px" ### "10px" # "1px"
		"mix-blend-mode": "screen" ## look great on safari
		"opacity": 1
	}

setPath = ->
	it.attr {
		"d": -> (it.list_coor |> pathLine)
	}

blowBus = ->
	it
		.style {
			"opacity": 1
		}
		.attr {
			"stroke-dasharray": -> 100 + " " + @.getTotalLength!
			"stroke-dashoffset": -> 100
			"shape-rendering": "geometricPrecision"
		}
		.transition!
		.ease 'linear'
		.duration -> (@.getTotalLength! * 3)
		.delay (it, i)-> i * 2000 * Math.random!
		.attr {
			"stroke-dashoffset": -> -@.getTotalLength!
			### 0
		}
		# .transition!
		# .duration 1000
		# .style {
		# 	"opacity": 0
		# }
		.each "end", -> 
			d3.select @
			.call blowBus



appendSVG = (that, offset)->
	svg = d3.select(that.getPanes!.overlayMouseTarget).append("div")
		.attr("class", "mapOverlay")
		.append "svg"

	group = svg.append "g"
		.attr {
			"class" "gPrints"
		}
	svg
		.attr {
			"width": offset * 2
			"height": offset * 2
		}
		.style {
			"position": "absolute"
			"top": -1 * offset + "px"
			"left": -1 * offset + "px"
		}

	group


buildOverlay = (pathData)->

	pathOverlay = new google.maps.OverlayView!

	buildOverlay.mapOffset = 4000
	toMany = ->
		[it, it, it] |> _.concat

	pathOverlay.onAdd = ->
		gPrints = appendSVG @, buildOverlay.mapOffset

		pathOverlay.draw = ->
			projection = @getProjection!

			buildOverlay.googleMapProjection = (coordinates)->
				googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0])
				pixelCoordinates = projection.fromLatLngToDivPixel googleCoordinates
				[pixelCoordinates.x + buildOverlay.mapOffset, pixelCoordinates.y + buildOverlay.mapOffset]

			buildOverlay.cellOperation = (cell)->
				coor = buildOverlay.googleMapProjection [cell[0], cell[1]] ### [lat, lng]
				[coor[0], coor[1]]

			lsMapXYPathsData = pathData |> _.each ((row)-> row.list_coor = (row.list_coor |> _.map (-> buildOverlay.cellOperation it ) ) )

			dtb = gPrints.selectAll ".busPathBase"
				.data lsMapXYPathsData

			dtb
				.enter!
				.append "path"
				.attr {
					"class": "busPathBase"
				}
				.call appendPath

			dtb
				.call setPath

			dt = gPrints.selectAll ".busPath"
				.data (lsMapXYPathsData |> toMany)

			dt
				.enter!
				.append "path"
				.attr {
					"class": "busPath"
				}
				# .call pathMouseAction
				.call appendPath

			dt
				.call setPath
				.call blowBus

	pathOverlay



# buildOverlay = (pathData)->
# 	pathOverlay = new google.maps.OverlayView!
# 	mapOffset = 4000

# 	blowBus = ->
# 		it
# 			.style {
# 				"opacity": 1
# 			}
# 			.attr {
# 				"stroke-dasharray": -> 100 + " " + @.getTotalLength!
# 				"stroke-dashoffset": -> 100
# 				"shape-rendering": "geometricPrecision"
# 			}
# 			.transition!
# 			.ease 'linear'
# 			.duration -> (@.getTotalLength! * 3)
# 			.delay (it, i)-> i * 2000 * Math.random!
# 			.attr {
# 				"stroke-dashoffset": -> -@.getTotalLength!
# 				### 0
# 			}
# 			# .transition!
# 			# .duration 1000
# 			# .style {
# 			# 	"opacity": 0
# 			# }
# 			.each "end", -> 
# 				d3.select @
# 				.call blowBus

# 	setPath = ->
# 		it.attr {
# 			"d": -> (it.list_coor |> pathLine)
# 		}

# 	pathLine = d3.svg.line!
# 		.x -> it[0]
# 		.y -> it[1]
# 		.interpolate "cardinal"


# 	appendPath = ->
# 		it.attr {
# 			"d": -> it.list_coor |> pathLine
# 		}
# 		.style {
# 			"fill": "none"
# 			"stroke": (it, i)-> clr.purple 
# 			"stroke-width": "6px" ### "10px" # "1px"
# 			"mix-blend-mode": "screen" ## look great on safari
# 			"opacity": 1
# 		}

# 	pathOverlay.onAdd = ->

# 		svg = d3.select(@getPanes().overlayMouseTarget).append("div")
# 			.attr("class", "stationOverlay")
# 			.append "svg"

# 		gPrints = svg.append "g"
# 			.attr {
# 				"class" "gPrints"
# 			}

# 		svg
# 			.attr {
# 				"width": mapOffset * 2
# 				"height": mapOffset * 2
# 			}
# 			.style {
# 				"position": "absolute"
# 				"top": -1 * mapOffset + "px"
# 				"left": -1 * mapOffset + "px"
# 			}

# 		pathOverlay.draw = ->

# 			projection = @getProjection()
			
# 			googleMapProjection = (coordinates)->
# 				googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0])
# 				pixelCoordinates = projection.fromLatLngToDivPixel googleCoordinates
# 				[pixelCoordinates.x + mapOffset, pixelCoordinates.y + mapOffset]

# 			cellOperation = (cell)->
# 				coor = googleMapProjection [cell[0], cell[1]] ### [lat, lng]
# 				[coor[0], coor[1]]

# 			googlePath = d3.geo.path!
# 				.projection googleMapProjection

	
# 			lsMapXYPathsData = pathData |> _.each ((row)-> row.list_coor = (row.list_coor |> _.map (-> cellOperation it )  )  )


# 			# storyID = [2705, 116]
# 			# filterLngLat = -> it |> (->it.filter ((it, i)-> ((storyID.indexOf i) > -1) ) )
# 			# filterManyLngLat = -> it |> (->it.filter ((it, i)-> ( Math.random! < 0.01  ) ) )

# 			toMany = ->
# 				[it, it, it] |> _.concat


# 			# focusDotsData = lsMapXYDotsData |> filterLngLat
# 			# manyFocusDotsData = focusDotsData |> toMany
# 			# manyDotsData = focusDotsData.concat ( lsMapXYDotsData |> filterManyLngLat )
# 			manyDotsData = manyDotsData |> toMany
			
# 			# lsMapXYPathsData = []

# 			# dc = gPrints.selectAll "circle"
# 			# 	.data lsMapXYDotsData

# 			# dc
# 			# 	.enter!
# 			# 	.append "circle"
# 			# 	.call setCircle
# 			# 	.style {
# 			# 		"fill": light_yellow
# 			# 		"opacity": (it, i)-> if (storyID.indexOf i) > -1 then 1 else 0.3
# 			# 	}
# 			# 	# .on "mousedown", (it, i)->
# 			# 	# 	console.log i
			
# 			# dc
# 			# 	.call setCircle


# 			dtb = gPrints.selectAll ".busPathBase"
# 				.data lsMapXYPathsData

# 			dtb
# 				.enter!
# 				.append "path"
# 				.attr {
# 					"class": "busPathBase"
# 				}
# 				.call appendPath

# 			dtb
# 				.call setPath


# 			dt = gPrints.selectAll ".busPath"
# 				.data (lsMapXYPathsData |> toMany)

# 			dt
# 				.enter!
# 				.append "path"
# 				.attr {
# 					"class": "busPath"
# 				}
# 				# .call pathMouseAction
# 				.call appendPath

# 			dt
# 				.call setPath
# 				.call blowBus

# 	pathOverlay


# # newStack!

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Dark Map</title>
    <!-- including from header - start -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
    <script type="text/javascript" src="//muyueh.com/30/lib/js/prelude-browser-min.js"></script>
    <script type="text/javascript">
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      
      ga('create', 'UA-36523378-1', 'auto');
      ga('send', 'pageview');
      
      
      
    </script>
    <!-- including from header - end -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
  </head>
  <body>
    <script type="text/javascript" src="./common.js"></script>
    <script type="text/javascript" src="./index.js"></script>
  </body>
</html>

index.jade

doctype html
html
	head
		title Dark Map
		include ../../header
		script(type="text/javascript", src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false")

	body
		script(type="text/javascript", src="./common.js")
		script(type="text/javascript", src="./index.js")

index.js

var _, taipeiPosition, darkMapStyle;
_ = require("prelude-ls");
taipeiPosition = {
  zoom: 13,
  lat: 25.03930553101857,
  lng: 121.53578906738278
};
darkMapStyle = new google.maps.StyledMapType([
  {
    "featureType": "all",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }, {
        "color": '#000000'
      }, {
        "saturation": -100
      }, {
        "lightness": 33
      }, {
        "gamma": 0.5
      }
    ]
  }, {
    "featureType": "landscape.natural",
    "elementType": "all",
    "stylers": [{
      "visibility": "on"
    }]
  }, {
    "featureType": "water",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "visibility": "on"
      }, {
        "color": '#3887be'
      }
    ]
  }
], {
  name: "Styled Map"
});
d3.json("../cc14c1a8ee27a3072ce2/one_bus_track.json", function(err, jsonData){
  var pathData;
  pathData = _.take(1)(
  _.drop(1)(
  _.map(function(it){
    return {
      "name": it.properties.bad_chines,
      "list_coor": it.geometry.coordinates
    };
  })(
  jsonData.features)));
  return buildMap(darkMapStyle, taipeiPosition, buildOverlay(
  pathData));
});

index.ls

_ = require "prelude-ls"



taipeiPosition = {zoom: 13, lat: 25.03930553101857, lng: 121.53578906738278}

darkMapStyle = new google.maps.StyledMapType([
	{"featureType":"all","elementType":"all","stylers":[{"visibility":"off"},{"color":'#000000'},{"saturation":-100},{"lightness":33},{"gamma":0.5}]},
	{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"on"}]},
	{"featureType":"water","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":'#3887be'}]},
	],
	{name: "Styled Map"}
	)


err, jsonData <- d3.json "../cc14c1a8ee27a3072ce2/one_bus_track.json"

pathData = jsonData.features 
|> _.map (-> {"name": it.properties.bad_chines , "list_coor": (it.geometry.coordinates ) } ) 
|> _.drop 1 |> _.take 1



buildMap darkMapStyle, taipeiPosition , (pathData |> buildOverlay)

one_bus_track.json