Skip to content

Latest commit

 

History

History
369 lines (316 loc) · 7.52 KB

README.md

File metadata and controls

369 lines (316 loc) · 7.52 KB

Intensity and speed maps (Tilemill)

Intensity and speed maps using Tilemill

screen shot 2017-02-10 at 12 19 10

screen shot 2017-02-10 at 12 10 56

Tools:

Export the tile

screen shot 2017-02-10 at 09 02 49

  • Remove any background or tile that are not needed.
  • Choose the export option: MBTiles.
  • Fill in the filename to export.
  • Crop the area to export.
  • Zoom: 0 - 15
  • Click export

screen shot 2017-02-10 at 09 02 25

Php script to read the MBTiles

mbtiles.ftw2016.intensity.php

<?php
$zoom = $_GET['z'];
$column = $_GET['x'];
$row = $_GET['y'];
$db = "ftw2016.bike.intensity.0-15.mbtiles";
  try
  {
    // Open the database
    $conn = new PDO("sqlite:$db");

    // Query the tiles view and echo out the returned image
    $sql = "SELECT * FROM tiles WHERE zoom_level = $zoom AND tile_column = $column AND tile_row = $row";
    $q = $conn->prepare($sql);
    $q->execute();

    $q->bindColumn(1, $zoom_level);
    $q->bindColumn(2, $tile_column);
    $q->bindColumn(3, $tile_row);
    $q->bindColumn(4, $tile_data, PDO::PARAM_LOB);

    while($q->fetch())
    {
    header("Content-Type: image/png");
    echo $tile_data;
    }
  }
  catch(PDOException $e)
  {
    print 'Exception : '.$e->getMessage();
  }
?>

Visualize the MBTile

Place the files on a web server (e.g. apache2):

  • MBTile
  • PHP script

Create a html file as follows:

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet PHP/MBTiles Example</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
      <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
  <div id="map"></div>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
  <script>
    var map;
    map = new L.Map("map",{
      zoom: 9,
      center: [51,4.2],
      maxZoom: 15
    });

    L.tileLayer("http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png", {
      maxZoom: 17
    }).addTo(map);

    L.tileLayer("mbtiles.ftw2016.intensity.php?z={z}&x={x}&y={y}", {
        tms: true,
        opacity: 0.7
    }).addTo(map);
  </script>
</body>
</html>

Styles (CartoCSS)

Intensity

screen shot 2017-02-10 at 09 29 48

/*********
INTENSITY
**********/

// colours 
@red: #f34b55;
@yellow: #f5f369;
@lightblue: #5cd7f3;
@gray: #dddddd;
@scale: 2; 

#bike {
  line-join: round;
  line-cap: round;
  [density<=2]{line-width:2*@scale; line-color: @lightblue; }
  [density>2][density<=5]{line-width:4*@scale; line-color: @lightblue; }
  [density>5][density<=10]{
    ::case {
      line-width: 4.5*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;
    }
    ::fill {
      line-width: 1*@scale;
      line-color:@yellow;
      line-join: round;
      line-cap: round;      
    }
  }
  [density>10][density<=15]{
    ::case {
      line-width: 5*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;      
    }
    ::fill {
      line-width: 2*@scale;
      line-color:@yellow;
      line-join: round;
      line-cap: round;      
    }
  }
  [density>15][density<=20]{
    ::case {
      line-width: 5*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;      
    }
    ::fill {
      line-width: 3*@scale;
      line-color: @yellow;
      line-join: round;
      line-cap: round;      
    }
    ::line {
      line-width: 1.5*@scale;
      line-color: @red;
      line-join: round;
      line-cap: round;      
    }
  }
  [density>20][density<=30]{
    ::case {
      line-width: 5.5*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;      
    }
    ::fill {
      line-width: 4*@scale;
      line-color: @yellow;
      line-join: round;
      line-cap: round;      
    }
    ::line {
      line-width: 2*@scale;
      line-color: @red;
      line-join: round;
      line-cap: round;      
    }
  }
    [density>20][density<=30]{
    ::case {
      line-width: 6*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;      
    }
    ::fill {
      line-width: 4*@scale;
      line-color: @yellow;
      line-join: round;
      line-cap: round;      
    }
    ::line {
      line-width: 2.5*@scale;
      line-color: @red;
      line-join: round;
      line-cap: round;      
    }
  }
  [density>30][density<=50]{
    ::case {
      line-width: 6.5*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;      
    }
    ::fill {
      line-width: 5*@scale;
      line-color: @yellow;
      line-join: round;
      line-cap: round;      
    }
    ::line {
      line-width: 3*@scale;
      line-color: @red;
      line-join: round;
      line-cap: round;      
    }
  }
  [density>50][density<=100]{
    ::case {
      line-width: 8*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;      
    }
    ::fill {
      line-width: 7*@scale;
      line-color: @yellow;
      line-join: round;
      line-cap: round;      
    }
    ::line {
      line-width: 3.5*@scale;
      line-color: @red;
      line-join: round;
      line-cap: round;      
    }
  }
  [density>100]{
    ::case {
      line-width: 10.5*@scale;
      line-color: @lightblue;
      line-join: round;
      line-cap: round;      
    }
    ::fill {
      line-width: 8*@scale;
      line-color: @yellow;
      line-join: round;
      line-cap: round;      
    }
    ::line {
      line-width: 5*@scale;
      line-color: @red;
      line-join: round;
      line-cap: round;      
    }
  }
}

Speed

screen shot 2017-02-10 at 09 28 56

/***************
SPEED MAP
***************/

// Colours
@color1: #eff3ff;
@color2: #c6dbef;
@color3: #9ecae1;
@color4: #6baed6;
@color5: #3182bd;
@color6: #08519c;

@speed_width: 5; 

#bike::outline[zoom>10]{
  line-width: @speed_width+2;
  line-color: #000000;
  line-join: round;
  line-cap: round;
  line-opacity:0.6;
  ::fill{
   	line-width:@speed_width;
  	line-color:@color2;
    line-join: round;
	line-cap: round;
  }
  
  
}

#bike::blue{
  line-width: @speed_width;
  line-join: round;
  line-cap: round;
  line-color: @color1 ;
  line-opacity: 0.5;
  
  [zoom<11]{
  line-width: 2;}
  
  [avg_speed<=5]{
    line-color: @color1;
  }
  [avg_speed > 5][avg_speed <= 10]{
     line-color: @color2;
  }
  [avg_speed > 10][avg_speed <= 20]{
      line-color: @color3;
  }
  [avg_speed > 20][avg_speed <= 30]{
      line-color: @color4;
  }
  [avg_speed > 30][avg_speed <= 50]{
      line-color: @color5;
  }
  [avg_speed > 50]{
      line-color: @color6;
  }
}