Skip to content

Latest commit

 

History

History
97 lines (75 loc) · 3.23 KB

README.md

File metadata and controls

97 lines (75 loc) · 3.23 KB

geojson-to-maptile

geojson-to-maptile is a tool converting depth contour GeoJSON into map tile png image.

Source GeoJSON file

16 57508 25958 geojson

Output png file

converted image

Prerequisite

Make sure you have GeoJSON file whose features have the following properties.

property format description
maxDepth Floating Number Maximum depth in the feature
minDepth Floating Number Minimum depth in the feature

Here is a sample json file.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": { "maxDepth": 2.0, "minDepth": 1.5 },
      "geometry": { "type": "MultiPolygon", "coordinates": ... }
    },
    ...
  ]
}

The files have to be named ${zoom}.${x}.${y}.geojson. The zoom, x, and y are based on the tile system.

Quick Start

  1. Install via yarn
yarn install
  1. Create convert-config.json

Create convert-config.json on the base directory.

Here is an example convert-config.json.

{
  "geojsonDirectory": "./geojsons",
  "outputDirectory": "./images",
  "outputWidth": 256,
  "outputHeight": 256,
  "colors": [
    { "minDepth": 0.0, "maxDepth": 0.5, "code": "rgb(240, 250, 255)"},
    { "minDepth": 0.5, "maxDepth": 1.0, "code": "rgb(210, 225, 240)"},
    { "minDepth": 1.0, "maxDepth": 1.5, "code": "rgb(180, 200, 225)"},
    { "minDepth": 1.5, "maxDepth": 2.0, "code": "rgb(150, 175, 210)"},
    { "minDepth": 2.0, "maxDepth": 2.5, "code": "rgb(120, 150, 195)"},
    { "minDepth": 2.5, "maxDepth": 3.0, "code": "rgb(90, 125, 180)"},
    { "minDepth": 3.0, "maxDepth": 3.5, "code": "rgb(60, 100, 165)"},
    { "minDepth": 3.5, "maxDepth": 4.0, "code": "rgb(30, 75, 150)"},
    { "minDepth": 4.0, "maxDepth": 4.5, "code": "rgb(0, 50, 135)"},
    { "minDepth": 4.5, "maxDepth": 5.0, "code": "rgb(0, 25, 120)"},
    { "minDepth": 5.0, "maxDepth": 5.5, "code": "rgb(0, 0, 105)"},
    { "minDepth": 5.5, "maxDepth": 6.0, "code": "rgb(0, 0, 90)"},
    { "minDepth": 6.0, "maxDepth": 6.5, "code": "rgb(0, 0, 75)"},
    { "minDepth": 6.5, "maxDepth": 7.0, "code": "rgb(0, 0, 60)"},
    { "minDepth": 7.0, "maxDepth": 7.5, "code": "rgb(0, 0, 45)"},
    { "minDepth": 7.5, "maxDepth": 8.0, "code": "rgb(0, 0, 30)"},
    { "minDepth": 8.0, "maxDepth": 8.5, "code": "rgb(0, 0, 15)"}
  ]
}
config format description
geojsonDirectory String Directory you place the source GeoJSON files
outputDirectory String Directory you save the output png files
outputWidth Int Number Output image's width
outputHeight Int Number Output Image's height
colors Array Array of output image's coloring settings
  1. Convert GeoJSON into png files

Run the command below to convert.

yarn convert