Last active
August 29, 2015 14:20
-
-
Save muyueh/9af65cb514bba809eaa9 to your computer and use it in GitHub Desktop.
clean up common
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var _, buildStack, newStack, buildMap, clr, pathLine, appendPath, setPath, blowBus, appendSVG, drawOverlay, 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; | |
}; | |
drawOverlay = function(pathData, cellOperation, gPrints){ | |
var lsMapXYPathsData, toMany, dtb, dt; | |
lsMapXYPathsData = _.each(function(row){ | |
return row.list_coor = _.map(function(it){ | |
return cellOperation(it); | |
})( | |
row.list_coor); | |
})( | |
pathData); | |
toMany = function(it){ | |
return _.concat( | |
[it, it, it]); | |
}; | |
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); | |
}; | |
buildOverlay = function(pathData){ | |
var pathOverlay; | |
pathOverlay = new google.maps.OverlayView(); | |
buildOverlay.mapOffset = 4000; | |
pathOverlay.onAdd = function(){ | |
var gPrints; | |
gPrints = appendSVG(this, buildOverlay.mapOffset); | |
return pathOverlay.draw = function(){ | |
var projection; | |
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]]; | |
}; | |
return drawOverlay(pathData, buildOverlay.cellOperation, gPrints); | |
}; | |
}; | |
return pathOverlay; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
_ = 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 | |
drawOverlay = (pathData, cellOperation, gPrints)-> | |
lsMapXYPathsData = pathData | |
|> _.each ((row)-> row.list_coor = (row.list_coor | |
|> _.map (-> cellOperation it ) ) ) | |
toMany = -> | |
[it, it, it] |> _.concat | |
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 | |
buildOverlay = (pathData)-> | |
pathOverlay = new google.maps.OverlayView! | |
buildOverlay.mapOffset = 4000 | |
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]] | |
drawOverlay pathData, buildOverlay.cellOperation, gPrints | |
pathOverlay | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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&sensor=false"></script> | |
</head> | |
<body> | |
<script type="text/javascript" src="./common.js"></script> | |
<script type="text/javascript" src="./index.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
_ = 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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment