A Pen by Donald Zhan.

index.jade

doctype html
html(lang="en")
  head
    title 
      | POP in Taipei
  body
    section.page.header-page
      .text-vertical-center
        h1
          | 公有地大行動
        .ui.three.column.grid
          .column
            .ui.center.aligned.stacked.segment
              每年被賣掉
              h3
                | 800 公頃 
          .column
            .ui.center.aligned.stacked.segment
              每年被都市更新
              h3
                | 200 公頃   
          .column
            .ui.center.aligned.stacked.segment
              每年被BOT
              h3
                | 200 公頃 
        a(href="#area")
          i.big.circular.green.double.angle.down.icon
          
    section#area.area-page.page
      .text-vertical-center
        h1
          | 天龍特公地大搜查
   
        .ui.selection.dropdown.choice-block
          .default.text
            | 行政區
          i.dropdown.icon
          .menu
            a.item(data-value='')
              | 全部
            a.item(data-value='中正區')
              | 中正區
            a.item(data-value='大同區')
               | 大同區
            a.item(data-value='中山區')
               | 中山區
            a.item(data-value='萬華區')
               | 萬華區
            a.item(data-value='信義區')
               | 信義區
            a.item(data-value='松山區')
               | 松山區
            a.item(data-value='大安區')
               | 大安區
            a.item(data-value='南港區')
               | 南港區
            a.item(data-value='北投區')
               | 北投區
            a.item(data-value='內湖區')
               | 內湖區
            a.item(data-value='士林區')
               | 士林區
            a.item(data-value='文山區')
               | 文山區
        .ui.selection.dropdown.choice-area
          .default.text
            | 面積
          i.dropdown.icon
          .menu  
            a.item(data-value='')
              | 全部          
            a.item(data-value=">=500")
              | 500以上
            a.item(data-value="<500")
              | 小於500
        .ui.selection.dropdown.choice-unit
          .default.text
            | 經營單位
          i.dropdown.icon
          .menu  
            a.item(data-value='')
              | 全部
            a.item(data-value="交通部%")
              | 交通部
            a.item(data-value="財政部%")
              | 財政部
    section#map.map-page.page
      #map-canvas
      .text-vertical-center.map-notice
        h1
          | 請選擇地區
    section#request.request-page.page  
      .text-vertical-center
        h1
          | 我們的訴求
        h3
          | 一、不要在賣我們的土地
        .ui.header
          邀請您共同關注
        .circular.ui.icon.button
          i.icon.unhide
          關注
    footer
      .ui.divided.horizontal.link.list
        .item 
          | 資料來源：
          a(href="http://data.g0v.tw")
            | g0v零時資料中心
        .item
          | &copy; 2014 公有地大行動
 
  

script.coffee

taipei =
  "中正區":
    lat: 25.0293008
    lng: 121.5205833

  "大同區":
    lat: 25.0645027
    lng: 121.513314

  "中山區":
    lat: 25.0685028
    lng: 121.5456014

  "萬華區":
    lat: 25.0294936
    lng: 121.4978838

  "信義區":
    lat: 25.0287142
    lng: 121.5723162

  "松山區":
    lat: 25.0601727
    lng: 121.5593073

  "大安區":
    lat: 25.0263074
    lng: 121.543846

  "南港區":
    lat: 25.038392
    lng: 121.6219879

  "北投區":
    lat: 25.1531486
    lng: 121.5174287

  "內湖區":
    lat: 25.0835016
    lng: 121.5903754

  "士林區":
    lat: 25.1347802
    lng: 121.5324453

  "文山區":
    lat: 24.9880073
    lng: 121.5752716

getAPIUrl = (condition) ->
  DEFAULTSQL = "SELECT GeoJSON FROM 1q873lkA80his6hUu9Gm83kRBTR-oRzVghxfc4T9N"
  API = "https://www.googleapis.com/fusiontables/v1/query?"
  API_KEY = "AIzaSyBwIu0_LD5qTx7u11jW_U30xwti9FiL9Es"
  SQLScript = if condition isnt "" then (DEFAULTSQL + condition) else DEFAULTSQL
   
  params =
    sql: SQLScript
    key: API_KEY

  API + $.param(params)

showMap = (condition) ->
  area = "中正區"
  lat = taipei[area].lat
  lng = taipei[area].lng
  popinfo = new google.maps.InfoWindow()
  map = new google.maps.Map(document.getElementById("map-canvas"),
    zoom: 15
    scrollwheel: false
    center:
      lat: lat
      lng: lng
  )

  # get GeoJSON 
  JsonUrl = getAPIUrl condition
  console.log "JSON URL: " + JsonUrl
  
  $.getJSON JsonUrl, (result) ->
    columns = result.columns
    rows = result.rows
    
    GeoJsonList = rows.reduce ((a,b) ->
      a.concat JSON.parse(b)), []
    
    GeoJson = 
      "type": "FeatureCollection",
      "features": GeoJsonList
    
    map.data.addGeoJson GeoJson

    return

  featureStyle =
    fillColor: "red"
    strokeWeight: 1

  map.data.setStyle featureStyle
  
  # show information when user click it.
  map.data.addListener "click", (event) ->
    properties = [
      "面積"
      "路段"
      "地號"
      "管理者"
      "使用分區"
    ]
    content = "<table class='ui table segment'>"
    properties.forEach (element, index, array) ->
      content += "<tr><td>" + element + "</td><td>" + event.feature.getProperty(element) + "</td></tr>"
      return

    content += "</table>"
    popinfo.close()
    popinfo.setContent content
    popinfo.setPosition event.latLng
    popinfo.open map
    return

  return

Search = ->
  @vars = {}
  @condition = ""
  return

Search::setBlock = (block) ->
  @vars.Block = block
  @run()
  return

Search::setArea = (area) ->
  @vars.Area = area
  @run()
  return

Search::setUnit = (unit) ->
  @vars.Unit = unit
  @run()
  return

Search::run = ->
  vars = @vars
  str = @str
  getSymbol = @getSymbol
  query = []
  [
    "Block"
    "Area"
    "Unit"
  ].forEach (field) ->
    if vars[field]
      symbol = getSymbol field
      value = if field isnt 'Area' then str(vars[field]) else vars[field] 
      query.push (field + symbol + value)
    return
  
  @condition = (' WHERE ' + query.join(" AND ") ) if query.length > 0
  console.log "condition: " + @condition
  showMap @condition
  return 

Search::getSymbol = (field) ->
  switch field
    when 'Block' then ' = '
    when 'Area' then ''
    when 'Unit' then ' LIKE '
    
Search::str = (text) ->
  "'"+ text + "'" if text
    
# generate the map

Search::toString = ->
  @condition

search = new Search()

(->
  $(".dropdown").dropdown onChange: (val) ->
    $(".map-notice").hide()
    return
     
  $(".choice-block a").click ->
    val = $(this).attr("data-value")
    search.setBlock val
    return

  $(".choice-area a").click ->
    val = $(this).attr("data-value")
    search.setArea val
    return

  $(".choice-unit a").click ->
    val = $(this).attr("data-value")
    search.setUnit val
    return

  return
)()

style.css

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.text-vertical-center h1 {
    color: #000000;
    margin: 50px;
    padding: 0;
    font-size: 5em;
    font-weight: 800;
}

.text-vertical-center h3 {
    color: #000000;
    padding: 50px;
    font-size: 3em;
}

.page {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #59ABE3;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.header-page {
    background-color: #D2D7D3;
}

.about-page {
     background-color: #65C6BB; 
}

.area-page {
     background-color: #65C6BB; 
}

.map-page {
    background-color: #D2D7D3;
}
.request-page {
     background-color: #F9BF3B;   
}
.choice-area {
  margin: 30px;
  width: 200px;
}
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

footer {
    text-align: right;
    padding: 20px 0;
}

天龍特攻地(修改版).markdown

天龍特攻地(修改版)

A Pen by Donald Zhan on CodePen.

License.