jsongeojsonkepler

How to make geoJson files and visualise them


How can I create geoJson files on Mac? I tried touch new.geojson after which I copied the data into the file but I don't think it gives me the correct file type since I am not able to load the file on Kepler.gl

I tried to upload this data but it never loads on Kepler. If I try some random example from the internet, it loads immediately even though the format seems to be the same.

"{"type":"LineString","coordinates":[[-0.796272,5.225736],[-0.795293,5.228452],[-0.806762,5.222764],[-0.818826,5.23953],[-0.829519,5.260144],[-0.860461,5.273933],[-0.890056,5.309425],[-0.875031,5.326234],[-0.843153,5.323144],[-0.801128,5.339694],[-0.759914,5.337996],[-0.642737,5.383214],[-0.642423,5.383474],[-0.575465,5.454165],[-0.558689,5.486223],[-0.514209,5.512632],[-0.364606,5.552434],[-0.343397,5.546054],[-0.309366,5.553826],[-0.285525,5.569787],[-0.28366,5.57064],[-0.257415,5.603225],[-0.156054,5.629528],[-0.015683,5.684939],[-0.014548,5.685099],[0.054634,5.763615],[0.289173,5.86565],[0.521139,5.896969],[0.530532,6.004213],[0.555024,6.007513],[0.574476,5.990664],[0.595112,5.998843],[0.595206,5.998879],[0.664647,6.019722],[0.665004,6.019413],[0.675656,5.984694],[0.66338,5.964361],[0.690962,5.941331],[0.719717,5.890157],[0.781744,5.843708],[0.830645,5.778435],[0.919066,5.801578],[0.925173,5.788085]]}"

which I think should be turned into this before trying to visualise:

{type:"LineString",coordinates:[[-0.796272,5.225736],[-0.795293,5.228452],[-0.806762,5.222764],[-0.818826,5.23953],[-0.829519,5.260144],[-0.860461,5.273933],[-0.890056,5.309425],[-0.875031,5.326234],[-0.843153,5.323144],[-0.801128,5.339694],[-0.759914,5.337996],[-0.642737,5.383214],[-0.642423,5.383474],[-0.575465,5.454165],[-0.558689,5.486223],[-0.514209,5.512632],[-0.364606,5.552434],[-0.343397,5.546054],[-0.309366,5.553826],[-0.285525,5.569787],[-0.28366,5.57064],[-0.257415,5.603225],[-0.156054,5.629528],[-0.015683,5.684939],[-0.014548,5.685099],[0.054634,5.763615],[0.289173,5.86565],[0.521139,5.896969],[0.530532,6.004213],[0.555024,6.007513],[0.574476,5.990664],[0.595112,5.998843],[0.595206,5.998879],[0.664647,6.019722],[0.665004,6.019413],[0.675656,5.984694],[0.66338,5.964361],[0.690962,5.941331],[0.719717,5.890157],[0.781744,5.843708],[0.830645,5.778435],[0.919066,5.801578],[0.925173,5.788085]]}

But both of them don't really work when I try to upload them to kepler. How else can I create geoJson files?

I also tried copying the first format here: https://geoman.io/geojson-editor

After which I downloaded the geoJSON file and tried to load it into Kepler. Nothing happens even though the uploading window closes.

Edit:

I tried to do this on TurfJs on JsFiddle:

var stringnew = turf.lineString([-0.796272,5.225736],[-0.795293,5.228452],[-0.806762,5.222764],[-0.818826,5.23953],[-0.829519,5.260144],[-0.860461,5.273933],[-0.890056,5.309425],[-0.875031,5.326234],[-0.843153,5.323144],[-0.801128,5.339694],[-0.759914,5.337996],[-0.642737,5.383214],[-0.642423,5.383474],[-0.575465,5.454165],[-0.558689,5.486223],[-0.514209,5.512632],[-0.364606,5.552434],[-0.343397,5.546054],[-0.309366,5.553826],[-0.285525,5.569787],[-0.28366,5.57064],[-0.257415,5.603225],[-0.156054,5.629528],[-0.015683,5.684939],[-0.014548,5.685099],[0.054634,5.763615],[0.289173,5.86565],[0.521139,5.896969],[0.530532,6.004213],[0.555024,6.007513],[0.574476,5.990664],[0.595112,5.998843],[0.595206,5.998879],[0.664647,6.019722],[0.665004,6.019413],[0.675656,5.984694],[0.66338,5.964361],[0.690962,5.941331],[0.719717,5.890157],[0.781744,5.843708],[0.830645,5.778435],[0.919066,5.801578],[0.925173,5.788085])

console.log(stringnew);
console.log('hi');

But I never see any output on the console. How else can I make the conversion?

http://jsfiddle.net/ed8hx01c/1/

If I run this example, I do see an output on the console:

http://jsfiddle.net/andi_lo/o1wysgtj/


Solution

  • A valid geojson LineString would look like this:

    {
       "type":"Feature",
       "properties":{
    
       },
       "geometry":{
          "type":"LineString",
          "coordinates": [[-0.796272,5.225736],[-0.795293,5.228452],[-0.806762,5.222764],[-0.818826,5.23953],[-0.829519,5.260144],[-0.860461,5.273933],[-0.890056,5.309425],[-0.875031,5.326234],[-0.843153,5.323144],[-0.801128,5.339694],[-0.759914,5.337996],[-0.642737,5.383214],[-0.642423,5.383474],[-0.575465,5.454165],[-0.558689,5.486223],[-0.514209,5.512632],[-0.364606,5.552434],[-0.343397,5.546054],[-0.309366,5.553826],[-0.285525,5.569787],[-0.28366,5.57064],[-0.257415,5.603225],[-0.156054,5.629528],[-0.015683,5.684939],[-0.014548,5.685099],[0.054634,5.763615],[0.289173,5.86565],[0.521139,5.896969],[0.530532,6.004213],[0.555024,6.007513],[0.574476,5.990664],[0.595112,5.998843],[0.595206,5.998879],[0.664647,6.019722],[0.665004,6.019413],[0.675656,5.984694],[0.66338,5.964361],[0.690962,5.941331],[0.719717,5.890157],[0.781744,5.843708],[0.830645,5.778435],[0.919066,5.801578],[0.925173,5.788085]]
       }
    }
    

    (generated using TurfJS)

    Download it and have fun visualizing!

    enter image description here


    EDIT: how to use turf.js

    1. go to turfjs.org & open up the dev tools console

    2. paste in the following:

    const pseudo_line_string = {type:"LineString",coordinates:[[-0.796272,5.225736],[-0.795293,5.228452],[-0.806762,5.222764],[-0.818826,5.23953],[-0.829519,5.260144],[-0.860461,5.273933],[-0.890056,5.309425],[-0.875031,5.326234],[-0.843153,5.323144],[-0.801128,5.339694],[-0.759914,5.337996],[-0.642737,5.383214],[-0.642423,5.383474],[-0.575465,5.454165],[-0.558689,5.486223],[-0.514209,5.512632],[-0.364606,5.552434],[-0.343397,5.546054],[-0.309366,5.553826],[-0.285525,5.569787],[-0.28366,5.57064],[-0.257415,5.603225],[-0.156054,5.629528],[-0.015683,5.684939],[-0.014548,5.685099],[0.054634,5.763615],[0.289173,5.86565],[0.521139,5.896969],[0.530532,6.004213],[0.555024,6.007513],[0.574476,5.990664],[0.595112,5.998843],[0.595206,5.998879],[0.664647,6.019722],[0.665004,6.019413],[0.675656,5.984694],[0.66338,5.964361],[0.690962,5.941331],[0.719717,5.890157],[0.781744,5.843708],[0.830645,5.778435],[0.919066,5.801578],[0.925173,5.788085]]}
    
    const line_string = turf.lineString(pseudo_line_string.coordinates);
    
    JSON.stringify(line_string);
    copy(line_string) 
    
    1. that's it.