Home>
I want to display CSV file data received from the database with markers on OpenStreetMap

I understand that there are some questions that beginners have difficulty understanding, but please forgive me.
I was able to display the map on HTML using OpenStreetMap and Leaflet library, but I do not know how to display it on the map using the latitude and longitude information in the CSV file. If i can understand, I would appreciate it if you could teach me. Thank you.

Source code used for map drawing
<div></div>
                <script src = "js/map/leaflet.js"></script>
                <script src = "js/map/leaflet-heat.js"></script>
                <script src = "js/map/leaflet.rotatedMarker.js"></script>
                <script src = "js/map/OSMBuildings-Leaflet.js"></script>
                <script src = "js/map/leaflet-hash.js"></script>
                <script src = "js/map/Autolinker.min.js"></script>
                <script src = "js/map/leaflet.markercluster.js"></script>
                <script src = "data/listcsv.js"></script>
                <script>

                L.ImageOverlay.include ({
                        getBounds: function () {
                                return this._bounds;
                        }
                });
                var map = L.map ('map', {
                        zoomControl: true, maxZoom: 28, minZoom: 1
                }). fitBounds ([[35.685721,139.313577], [35.681259,139.520944]]);
                var hash = new L.Hash (map);
                map.attributionControl.addAttribution ('<a href = "https://github.com/tomchadwin/qgis2web" target = "_ blank">qgis2web</a>');
                var feature_group = new L.featureGroup ([]);
                var bounds_group = new L.featureGroup ([]);
                var raster_group = new L.LayerGroup ([]);
                var basemap0 = L.tileLayer ('http: // {s} .tile.openstreetmap.org/{z}/{x}/{y} .png', {
                        attribution: '©<a href = "http://openstreetmap.org">OpenStreetMap</a>contributors,<a href = "http://creativecommons.org/licenses/by-sa/ 2.0/">CC-BY-SA</a>',
                        maxZoom: 28
                });
                basemap0.addTo (map);
                var basemap1 = L.tileLayer ('http://a.tile.stamen.com/terrain/ {z}/{x}/{y} .png', {
                        attribution: 'Map tiles by<a href = "http://stamen.com">Stamen Design</a>,<a href = "http://creativecommons.org/licenses/by/3.0"&gt ;CC BY 3.0</a>—Map data:©<a href = "http://openstreetmap.org">OpenStreetMap</a>contributors,<a href = "http : //creativecommons.org/licenses/by-sa/2.0/ ">CC-BY-SA</a>',
                        maxZoom: 18
                });
                </script>
CSV file I want to load (data.csv)
id, title, address, latlon
1, Test 1, Musashisakai Station, 35.702243 139.550422
2, Test 2, Shinjuku Station, 35.689975 139.699081
Tried

Find a reference site and source the following source code
I tried to add it, but I couldn't read the CSV file.

omnivore.csv ('data.csv', null)
  .on ('ready', function (e) {
    drawMap (e.target.toGeoJSON ());
  })
  .on ('error', function (e) {
    console.log (e.error [0] .message);
  });
function drawMap (shows) {
  var dataLayer = L.geoJson (shows) .addTo (map);
  dataLayer.on ('click', function (e) {
    var properties = e.layer.feature.properties;
    L.popup ()
      .setContent ('<b>Venue id:</b>' + properties.id + '<br><b>title:</b>' + properties.title + '<br>&lt ;b>address:</b>'+ properties.address)
      .setLatLng (e.latlng)
      .openOn (map);
  }). addTo (map);
  map.fitBounds (dataLayer.getBounds ());
  • Answer # 1

    I solved it safely using ajax. I'm sorry.

    <script type = "text/javascript" charset = "utf-8">
    // let's read the csv file.if this is finished we call the function to show it on the map.
    // Load csv using ajax
    $(document) .ready (function () {
      $.ajax ({
        type: "GET",
        url: "data/2.5_month.csv",
        dataType: "text",
        success: function (data) {displayData (data)}
      });
    });
    function displayData (Text) {
      data = $.csv.toObjects (Text);
      var map = L.map ('map', {
        center: [-28.636,137.781],
        zoom: 4
      });
      // notation of the tool used
      var OpenStreetMap_BlackAndWhite = L.tileLayer ('http: // {s} .www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y} .png', {
        attribution: '&copy;<a href = "http://openstreetmap.org">OpenStreetMap</a>contributors,<a href = "http://creativecommons.org/licenses/by-sa/ 2.0/">CC-BY-SA</a> ;, example by<a href =" http://www.digital-geography.com ">digital-geography.com</a>'
      }). addTo (map);
      data_array = [0,0,0];// create it before filling
      for (i = 0;i<data.length;i ++) {
        // Set the data to be displayed on the map
        data_array [i] = [parseFloat (data [i] .latitude), parseFloat (data [i] .longitude), parseFloat (data [i] .mag)];// if values ​​are marked as string in the object else:
    // data_array [i] = [data [i] .lat, data [i] .lon, data [i] .val];
    var heat = L.marker ([(data [i] .latitude), (data [i] .longitude)], {
    // content of popup
    }). bindPopup ((data [i] .mag)). addTo (map);
    };
    };
    </script>