read data from csv file in javascript

Question

I'm trying to put dots on the map by the csv data. in the csv i have the fields latitude and longitude... how can i do this? maybe get an array from the csv and use it? i tried a lot of things, nothing worked..

Here is my code:

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <script>
        function initialize() {
            var earth = new WE.map('earth_div');
            WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth);
   
            //get the csv file data, create new marker [latitude,longitude]
            //the bind popup will get the field country

        for (var i = 0; i < 5; i++)
        {
            var marker = WE.marker([i,i]).addTo(earth);
            marker.bindPopup("<b>The data </b><br><a target=_blank href='http://www.google.com'>link</a>.<br />"
                , { maxWidth: 150, closeButton: true }).closePopup();
        }//end for i

        var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);

        earth.setView([0, 0], 3);
      }
    </script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #earth_div {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute !important;
        }
    </style>
    <title>WebGL Earth API: Markers</title>
</head>
<body onload="initialize()">
    <div id="earth_div"></div>
</body>
</html>

I think u have to make an array sorted by special number which used in line coordination in the map and call them into ur map — moh89, Jul 10 '17 at 18:26
[link](https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript) u can look at this. — moh89, Jul 10 '17 at 18:38
d3.csv("mycsv.csv", function (d){ d['latitude'] = +d['latitude']; var marker = WE.marker([d['latitude'], 66]).addTo(earth); marker.bindPopup("The data
link.
" , { maxWidth: 150, closeButton: true }).closePopup(); return d; }); this code is not working.. — Nadav, Jul 10 '17 at 18:44
Possible duplicate of [How to read data From \*.CSV file using javascript?](https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript) — EsmaeelE, Jul 10 '17 at 23:48

score 0 · Accepted Answer · answered Jul 10 '17 at 18:42

Does this work for you? Select the csv file with the button and the script will display it on the page.

index.html:

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #earth_div {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute !important;
        }
        #files {
            top: 0;
            left: 0;
            position: absolute;
            z-index: 999;
        }
    </style>
    <title>WebGL Earth API: Markers</title>
</head>
<body>
    <input type="file" id="files" name="file" />
    <div id="earth_div"></div>
    <script>
        var earth = new WE.map('earth_div');
        WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth);
        var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);
        earth.setView([0, 0], 3);
        document.getElementById('files').onchange = function() {
            readFile();
        };
        function readFile() {
            var files = document.getElementById('files').files;
            if (!files.length) {
              alert('Please select a file!');
              return;
            }
            var file = files[0];
            var start = 0;
            var stop = file.size - 1;
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                if (evt.target.readyState == FileReader.DONE) {
                    var text = evt.target.result;
                    var lines = text.split('\n');
                    for (var i = 0; i < lines.length; i++) {
                        lines[i] = lines[i].split(',');
                        lines[i].map(function(val) {
                            return Number(val);
                        });
                    }
                    for (var i = 0; i < lines.length; i++) {
                        var marker = WE.marker([lines[i][0], lines[i][1]]).addTo(earth);
                        marker.bindPopup("<b>The data </b><br><a target=_blank href='http://www.google.com'>link</a>.<br />"
                            , { maxWidth: 150, closeButton: true }).closePopup();
                    }
                }
            }
            var blob = file.slice(start, stop + 1);
            reader.readAsBinaryString(blob);
        }
    </script>
</body>
</html>

points.csv:

1,1
2,2
3,3
4,4

yes! thanks! now, can i load my file without the file chooser? my file name is "mycsv2.csv", and i nead the cols latitude and longitude from it — Nadav, Jul 10 '17 at 18:53
i know how to call the required cols in the csv. but how can i load the file automatically? i don't know how to use the ajax.. — Nadav, Jul 10 '17 at 18:58
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log(this.responseText); } }; xhttp.open("GET", "FILE", true); xhttp.send(); — JakeBoggs, Jul 10 '17 at 19:03
It will not work if you are hosting your files on your machine. — JakeBoggs, Jul 10 '17 at 19:03
in your code, to load the requested file, i need to load it by file browser.. can i load it automatically? — Nadav, Jul 10 '17 at 19:29
I would appreciate it if you would accept and up-vote my answer. I am trying to build my reputation. — JakeBoggs, Jul 11 '17 at 00:06

read data from csv file in javascript

1 Answers1