JS - leafletにてCSVファイルを読み込み地図上に表示したい

Question

データベースから受け取ったCSVファイルのデータを「OpenStreetMap」上にマーカー付きで表示させたい

初心者の質問で分かりづらい点があるかと存じますが、ご容赦くださいませ。
OpenStreetMapとLeaflet ライブラリを使用しHTML上に地図を表示させる事まではできましたが、CSVファイル内の緯度経度情報を使い、地図上に表示する方法がわかりません。 お分かりになる方、ご教授頂けますと幸いで御座います。宜しくお願い致します。

地図描画に使用したソースコード

				<div id="map"></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: '&copy; <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">CC BY 3.0</a> &mdash;Map data: &copy; <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ファイル(data.csv)

id,title,address,latlon
1,テスト1,武蔵境駅,35.702243 139.550422
2,テスト2,新宿駅,35.689975 139.699081

試したこと

参考サイトを見つけ、以下のソースコードを
追加してみましたが、CSVファイルを読み込む事はできませんでした。

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><b>address: </b>' + properties.address)
      .setLatLng(e.latlng)
      .openOn(map);
  }).addTo(map);
  map.fitBounds(dataLayer.getBounds());

Comments

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

[jam912sh]

ご指摘頂き有難うございます。パースエラー: 構文エラーというエラーが表示されておりました。
url: "data/2.5_month.csv",に問題があるようで御座います。
こちらのエラーが原因でChromeやサファリブラウザでうまく表示されないのでしょうか。。
改善方法等、調査致します。有難うございます！

Answer 1

ajaxを使い無事に解決致しました。お騒がせ致しました。

<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.

//ajaxを使い、csvを読み込む
$(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
  });
  //使っているツールの表記
  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++) {
    //地図上に表示するデータの設定
    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)],{
//ポップアップの内容
}).bindPopup((data[i].mag)).addTo(map);
};

};

</script>