TerraFirma.js

This is a library for rendering 3D maps from geoJSON pbjects. It is not a slippy map renderer and only generates a specific area. It supports drawing lines and markers on the map, as well as some basic animations.

Its great for visualizing hiking trails and could be a cool way to display them in a blog.

Currently it only supports mapbox tiles but I would like to possibly add more. DISCLAIMER: it can be fairly heavy on tile requests if you try to generate to large of an area.

Built with THREE.js and turf.js

Note: still trying to figure out how NPM works once I figure that out it will be available there.

Basic usage

import TerraFirma from 'terra-firma'

// Define a geoJSON Feature. Can be anything but keep in
// mind the result will always be reqtangular. This is just
// telling it what area you want it to generate for.
let polygon = {
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [-107.810905, 38.014829],
                [-107.810905, 37.975056],
                [-107.758338, 37.975056],
                [-107.758338, 38.014829],
                [-107.810905, 38.014829]
            ]
        ]
    }
}


window.addEventListener('DOMContentLoaded', (event) => {

  let mapElemenat = document.getElementById('map')

  let map3d = new TerraFirma({
    element: mapElemenat,
    feature: polygon,
    buffer: 10, // extra tile area outside main feature to render.
    bufferUnit: 'meters', // unit of measure for buffer. Ex. meters miles feet
    resolutionMultiple: 1, // Allows you to render higher res satallite tiles. Will slow things down a lot.
    apiToken: "Your Mapbox Key here"
  })

})

This will output a rendering like.

To point the camera to a new center

map3d.focusOn(geojsonPoint)

To add a marker

map3d.drawMarker(geojsonPoint)

And to draw a linestring

map3d.drawLine(linstring)

Inputs are all geojson types.