HeatMapWithTime

• HeatMapWithTime: Heatmap with Leaflet.TimeDimension (based on folium.plugins.HeatMapWithTime)
• MarkerStyleWithTime:
  • Change radius of circle marker with Leaflet.TimeDimension (based on folium.plugins.TimestampedGeoJson)
  • Line chart in marker popup
• GeoJsonLayer: deck.gl version of MarkerStyleWithTime
  • deck.gl GeoJsonLayer with time slider for TimestampedGeoJson data
  • Change radius of circle
• cmp.html: Dual maps of GeoJsonLayer
• HexagonLayer: deck.gl HexagonLayer with time slider for heatmap json data
• IconPositionWithTime: deck.gl IconLayer with time slider for TimestampedGeoJson data

HeatMapWithTime

Heatmap with Leaflet.TimeDimension (based on folium.plugins.HeatMapWithTime).

• heatmapwithtime.html

• Show diff data

MarkerStyleWithTime

• Change radius of circle marker with Leaflet.TimeDimension (based on folium.plugins.TimestampedGeoJson)
• Line chart in marker popup

• Demo1 (Kawasaki GBFS)
  • with capacity line: https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=35.5490,139.6806&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata/15-PT30M-capacity.geojson&color=red&color=blue&color=green
  • with population: https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=35.5490,139.6806&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata/15-PT30M-capacity-icon0-population.geojson&opacitykey=v&opacityRange=all
  • with landuse: https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=35.5490,139.6806&zoom=14&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata/15-PT30M-capacity-icon0-landuse.geojson
  • with railstation: https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=35.5854,139.5767&zoom=12&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata/15-PT30M-capacity-icon0-railstation.geojson
  • Voronoi diagram (docomo-cycle): https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=35.6355,139.6561&zoom=11&opacitykey=bikes&opacityRange=atTime&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata/15-PT30M-capacity-docomo-cycle.voronoi.geojson
  • Voronoi diagram (hellocycling): https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=35.6355,139.6561&zoom=11&opacitykey=bikes&opacityRange=atTime&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata/15-PT30M-capacity-hellocycling.voronoi.geojson
• Demo2 (San Francisco GBFS): https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=37.7662,-122.3854&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata2/fgb-0821-PT30M.geojson&color=red&color=blue
• Demo3 (Paris GBFS): https://deton.github.io/HeatMapWithTime/MarkerStyleWithTime.html?latlon=48.8557,2.3334&jsonurl=https://deton.github.io/HeatMapWithTime/sampledata3/Paris-0822-PT30M.geojson&color=red&color=blue
• URL parameters
  • latlon: map center. (default: fitBounds() for geojson)
  • zoom (default: 13). zoom is ignored if latlon is not specified.
  • jsonurl: geojson URL to load
  • radiuskey: key in feature.properties to change radius of circle marker
    • (default: .valuekeys[0] in geojson)
  • opacitykey: key in feature.properties to change fillOpacity of Polygon.
  • opacityRange: Use opacitykey value’s min and max value in this range.
    • attime: min and max at each time.
    • (default: all: min and max thorough all time range)
  • color: line colors in line chart in marker popup (default: Chart.js color palette)
  • filter: filter config.
    • 0: show only features with radiuskey value === 0.

GeoJsonLayer

deck.gl version of MarkerStyleWithTime.

• deck.gl GeoJsonLayer with time slider for TimestampedGeoJson data

• Change radius of circle

• geojsonlayer.html

• Show diff of two TimestampedGeoJson files

• URL parameters

  • latlon: map center. (default: first latlon in json data)
  • zoom (default: 11)
  • pitch (default: 0)
  • mapStyle (default: https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json)
  • intervalMs: animation timer interval in milliseconds. (default: 1000)
  • jsonurl: TimestampedGeoJson file URL to load
    • (default: https://deton.github.io/HeatMapWithTime/sampledata/15-PT30M-capacity.geojson)
  • radiuskey: key in feature.properties to change radius of circle marker
    • (default: .valuekeys[0] in geojson)
  • radiusScale (default: 10)
  • filter: filter config.
    • >0: show only features with radiuskey value > 0.
    • <0: show only features with radiuskey value < 0.

cmp.html

Dual maps of GeoJsonLayer.

Two TimestampedGeoJson files: 2024-08-15 and 2024-10-05

Different times

HexagonLayer

deck.gl HexagonLayer with time slider for heatmap json data.

• hexagonlayer.html

• URL parameters
  • latlon: map center. (default: first latlon in json data)
  • zoom (default: 10)
  • pitch (default: 20)
  • mapStyle (default: https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json)
  • radius (default: 500)
  • elevationScale (default: 20)
  • colorRanges: array of colorRange
    • (default: [ [[165,15,21],[222,45,38],[251,106,74],[252,146,114],[252,187,161],[254,229,217]], [[0,109,44],[49,163,84],[116,196,118],[161,217,155],[199,233,192],[237,248,233]] ]) (6-class Reds reverse, 6-class Greens reverse)
  • intervalMs: animation timer interval in milliseconds. (default: 1000)
  • jsonurl: heatmap json URL to load

IconPositionWithTime

deck.gl IconLayer with time slider for TimestampedGeoJson data.

• IconPositionWithTime.html

• URL parameters
  • latlon: map center. (default: first latlon in json data)
  • zoom (default: 14)
  • pitch (default: 0)
  • mapStyle (default: https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json)
  • intervalMs: animation timer interval in milliseconds. (default: 300)
  • tickSec: time increment on each interval in seconds. (default: 10)
  • jsonurl: heatmap json URL to load
  • tripWidth: trip line width of TripsLayer. (default: 0)
  • lineWidth: line width of timestamped LineString in GeoJSON. (default: 1)
  • iconScale: size scale of moving icon. (default: 1)
  • pointRadius: circle radius for Point in GeoJSON. (default: 2)

Other files

• gbfshist2heatmap.html: Make heatmap json for heatmapwithtime.html from gbfshist.ndjson
  • Sample input: sampledata/15-PT30M.ndjson
  • Sample output: sampledata/15-PT30M.json
• heatmapdiffdata.html: Make diff data json for heatmapwithtime.html from heatmap json
  • Sample input: sampledata/15-PT30M.json
  • Sample output: sampledata/15-PT30M_diff.json
• gbfshist2TimestampedGeoJson.html: Make geojson for MarkerStyleWithTime.html from gbfshist.ndjson
  • Sample input: sampledata/15-PT30M.ndjson
  • Sample output: sampledata/15-PT30M.geojson
• diffTimestampedGeoJson.html: Make diff data json for geojsonlayer.html from two TimestampedGeoJson files
  • Sample input: sampledata/15-PT30M.geojson and 1005-PT30M-icon0.geojson
  • Sample output: sampledata/1005-PT30M_diff.geojson
• fetchGbfs.gs: Google Apps Script to fetch GBFS files and save gbfshist.ndjson (run every 5 minutes)
  • Sample output: sampledata/15-PT30M.ndjson
• gbfs2hist.py: Make gbfshist.ndjson from GBFS files.
  • Sample output: sampledata/15-PT30M-capacity.ndjson

License

• html and *.{py,gs} script files are distributed under the terms of the MIT license.
  • sampledata/landuse.py uses https://www.fttsus.org/worldgrids/?page_id=158&lang=en
• Icons (close_{blue,red}.svg) are from Material Symbols, licensed under Apache License Version 2.0.
• sampledata/*.{ndjson,geojson,json} used in the demo:
  • These sample data use the following copyrighted material with modifications.
    • DOCOMO BIKESHARE, INC. / Association for Open Data of Public Transportation, Bikeshare information of DOCOMO BIKESHARE, INC., CC BY 4.0.
    • OpenStreet Corp. / Association for Open Data of Public Transportation, Bikeshare information of OpenStreet, CC BY 4.0, ODC BY 1.0, ODbL 1.0.
  • 15-PT30M-capacity-icon0-population.geojson file also uses the following copyrighted material with modifications.
    • MLIT Japan. 全国の人流オープンデータ. CC BY 4.0
  • 15-PT30M-capacity-icon0-railstation.geojson file also uses the following copyrighted material with modifications.
    • MLIT Japan. 国土数値情報 鉄道データ. CC BY 4.0
  • 15-PT30M-capacity-icon0-landuse.geojson file also uses the following copyrighted material with modifications.
    • MLIT Japan. 国土数値情報 土地利用詳細メッシュデータ. CC BY 4.0
• sampledata2/ : Bay Wheels
• sampledata3/ : Vélib’ Metropole
• sampledata4/ :
  • These sample data use the following copyrighted material with modifications.
    • Nippon Chuo Bus Co.,Ltd. CC BY 4.0
    • Gunma-Bus Corporation CC BY 4.0
    • Gunmachuo-bus Corporation CC BY 4.0
    • Kan-etsu Transportation Co.,Ltd. CC BY 4.0
    • 永井運輸株式会社 CC BY 4.0
    • 公開元: 横須賀市 CC BY 4.0

This site is open source. Improve this page.