Skip to content

paradox010/ThreeGeoJSON

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ThreeGeoJSON

This project aims to be a simple way to render geojson data in 3D with three.js.

Demo

http://jdomingu.github.io/ThreeGeoJSON/

Note: To view the demo, ensure that your browser supports WebGL rendering.

Instructions

Enter the following code to render a geoJSON file in 3D:

drawThreeGeo(json, radius, shape, {options});   

You can enter the following parameters:

Parameter Description
json The variable that contains the geoJSON that you want to render.
radius The radius of the sphere that you want to render.
shape The 3D shape to use when rendering the geoJSON. Either 'sphere' or 'plane'.
options The threeJS options that you want to use to style the line or particle material.
container Optional. THREE.Object3D instance which will be used as a container for threejson shapes.

For example, you might enter:

drawThreeGeo(json, 10, 'sphere', {
    color: 'green'
}); 

Important Note About Parsing geoJSON

The demo uses the jquery $.getJSON method to pass the geoJSON to the drawThreeGeo function. You can only use this method if the geoJSON is hosted on a server that allows requests for json data. To test this code locally, complete the following steps:

  1. Add var json = to the beginning of the geoJSON file that you want to display.
  2. Change the file extension of your geoJSON file to .js.
  3. Add the json.js file to the head of your HTML page. For example, you might add the following line:
<script src="test_geojson/json.js"></script>

About

Rendering GeoJSON with three.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 90.1%
  • HTML 9.9%