CSVファイルを地図に表示 - Our Open Data







  <meta charset=utf-8 />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src=''></script>
  <link href='' rel='stylesheet' />
    body {
      margin: 0;
      padding: 0;

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;

  <script src=''></script>

  <div id='map'></div>

    L.mapbox.accessToken = 'トークン入力';
    var map ='map', 'mapbox.streets')
      .setView([34.06611111, 132.99777777], 12);

    // omnivore will AJAX-request this file behind the scenes and parse it:
    // note that there are considerations:
    // - The CSV file must contain latitude and longitude values, in column
    //   named roughly latitude and longitude
    // - The file must either be on the same domain as the page that requests it,
    //   or both the server it is requested from and the user's browser must
    //   support CORS.

    // The omnivore functions take three arguments:
    // - a URL of the file to fetch
    // - options to the parser
    // - a custom layer
    // And they return the custom layer, which is by default an L.geoJson layer.
    // The second two arguments are each optional. In this case we're supplying
    // no arguments to the parser (null), but supplying a custom layer:
    // an instance of L.mapbox.featureLayer
    // This means that rows with simplestyle properties will be styled as they
    // would be in GeoJSON and elsewhere.
    omnivore.csv('hospital.csv', null, L.mapbox.featureLayer()).addTo(map);





ヘッダー名 データ
id ID
title タイトル
description 内容
address 住所
tel 電話番号
latitude 緯度
longitude 経度
marker-size 大きさ large
marker-color 色 #C0C0C0
marker-symbol アイコン名


Maki Icons | By Mapbox

List of Mapbox (v3) / Maki icons