サンプル

HTML

http://imabari.jpn.org/map/hospital_map.html

CSV

http://imabari.jpn.org/map/hospital.csv

ソース

html

<html>

<head>
  <meta charset=utf-8 />
  <title>今治市の病院</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

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

  <script>
    L.mapbox.accessToken = 'トークン入力';
    var map = L.mapbox.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);
  </script>
</body>

</html>

CSV

CSVのヘッダーに色「marker-color」とアイコン「marker-symbol」を追加すると表示される

www.mapbox.com

UTF-8で保存

ヘッダー名	データ
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

メモ

mapboxでCSVファイル（色分け・アイコン表示）

サンプル

HTML

CSV

ソース

html

CSV

アイコン種類