ベースマップとズームレベルについて

ベースマップ毎に、地図画像が提供されるズームレベルが違いますので、ご注意ください。
提供されるズームレベルについては 地理院タイル一覧 の各地図画像の説明（タイル一覧の各タイル毎の説明）を参照ください。

また、地図画像が提供されるズームレベルであっても、特定の領域の画像が抜けていることがあります。 特に写真系の地図画像では、山間部などの画像がないことがありますので、 ハザードマップなどを自作される際は、作図を行う前に確認されることをお勧めします。

ズームレベルの確認

現在のズームレベルは、「コンテキストメニュー」の「ズーム」の箇所に表示されます。

地図画面の下側の「コンテキストメニュー」の表示をクリック

「コンテキストメニュー」の「ズーム」の箇所に現在のズームレベルが表示されます

レイヤ（層）について

地理院地図が、地図画像を動的に表示するために使用している JavaScript ライブラリ Leaflet では、 レイヤ（層）機能を使って、地図画面の表示を何層（レイヤ）にも分け、 各レイヤ（層）毎に地図画像や図形を設定・表示できます。

初期表示時の地理院地図では、地図画像のレイヤと「新規作図情報」レイヤが用意されており、作図機能 を使って新たに作成した図形は、 すべて「新規作図情報」レイヤに追加されます。

レイヤの重なりについて

レイヤを非表示にした後、再度表示すると、そのレイヤに属する図形は最前面に表示されます。

以下の例では、"triangle.geojson" のレイヤ（三角形の図形が属するレイヤ）を非表示にした後、再度表示しています。

"triangle.geojson" のレイヤ（三角形の図形が属するレイヤ）を非表示にする前の状態

"triangle.geojson" のレイヤを非表示にした状態

"triangle.geojson" のレイヤを再度表示した状態（最前面に表示される）

選択（クリック）して編集できる図形は、編集中のレイヤに属する図形のみです。 他のレイヤに属する図形を編集するには、一旦レイヤの編集を終了（→ 編集の終了）してから、改めて目的のレイヤの「編集」をクリックしてください。

例１）「新規作図情報」レイヤを編集できる状態にする

「編集」をクリック

レイヤが編集できる状態になり、レイヤに属する個々の図形が赤い点線枠で囲まれる

例２）"steep_slope_collapse_hazard_area.geojson" のレイヤを編集できる状態にする

「編集」をクリック

レイヤが編集できる状態になり、レイヤに属する個々の図形が赤い点線枠で囲まれる

削除したレイヤおよび図形は元に戻せませんので、ご注意ください。

「新規作図情報」の削除について

「新規作図情報」を削除すると、「新規作図情報」レイヤに属する図形は削除されますが、「新規作図情報」レイヤはレイヤ一覧から除外されません。

「新規作図情報」レイヤを削除する

削除後の状態（属する図形は削除されるが、レイヤ一覧からは除外されない）

前に指定したファイル名が残っている場合

「作図・ファイル」パネル（ファイル読み込み）を開いたときに、前に指定したファイル名が残っていることがあります。

たまたま（レイヤを削除してしまったりして）同じファイルを読み込みたい場合、 そのまま「読込を開始」をクリックすると、以下のようなエラーが表示されることがあります。

その際は、ご面倒ですが、「参照」をクリックして、ファイル選択からやり直してください。

例１）保存対象について： すべてのレイヤが表示されている場合

下図の状態で保存を行うと、「新規作図情報」、"square.geojson"、"triangle.geojson" の 3 つのレイヤに属するすべての図形（黄色い丸、赤い四角、青い三角）の作図情報が保存されます。

例２）保存対象について： 一部のレイヤが表示されている場合

下図の状態で保存を行うと、"square.geojson"、"triangle.geojson" の 2 つのレイヤに属するすべての図形（赤い四角、青い三角）の作図情報が保存されます。

ファイル名について

保存されるファイル名は "gsiYYYYMMDDhhmmssnnn" に拡張子（KML形式では ".kml"、GeoJSON 形式では ".geojson"）が付いた形式になります。

YYYYMMDDhhmmss： 西暦年月日時分秒
nnn： ミリ秒（頭にゼロ詰めしない 46 や 971 のような 3 桁以内の数字）

KML 形式について

KML 形式では「テキスト」および「マーカー（円）」の作図情報は保存できません。

下図の例では、「テキスト」および「マーカー（円）」のみ作図し、KML 形式で保存しようとしていますが、作図情報の内容が表示されず、「上記の内容で保存」も有効になりません。

特に事情がなければ、GeoJSON 形式で保存することをお勧めします。

保存対象の図形が存在しない場合

保存対象の図形が存在しない場合、KML 形式では作図情報の内容が表示されず、「上記の内容で保存」も有効になりません。

GeoJSON 形式では空の作図情報の内容が表示され、「上記の内容で保存」が有効になり、保存も可能です。

ただし、空の作図情報を保存した GeoJSON 形式のファイルを、作図情報の読み込み で読み込もうとしても、 エラーが発生して読み込めませんので、ご注意ください。

例１）保存対象が存在しない場合の作図情報の内容（KML 形式）

例２）保存対象が存在しない場合の作図情報の内容（GeoJSON 形式）

ここでは図形の編集に共通的な処理のみ説明しています。

図形の種類毎の編集方法は 作図機能 の各作成方法を参照ください。

例１）「ポリゴン」を編集モードにする

図形をクリック

編集モードに遷移

例２）「マーカー（アイコン）」を編集モードにする

図形をクリック

編集モードに遷移

確定していない作図内容は失われますので、ご注意ください。

図形の作図途中や編集モード時は、「終了」クリック時に編集終了確認のメッセージボックスが表示されず、すぐに作図終了してしまいます。

「終了」をクリックする際は、くれぐれもご注意ください。

「オブジェクトの削除」は編集モード時のみ表示されます。

削除した図形は元に戻せませんので、ご注意ください。

一覧表示のキャンセル方法

値などを選択するための一覧が表示された後で、選択をキャンセルするには、 「作図・ファイル」パネル上の、一覧や入力コントロール以外のところ（下図の赤で塗り潰した領域内）をクリックして、一覧を閉じてください。

例１）値指定の一覧を閉じる場合

例２）色指定の一覧を閉じる場合

入力した「名称」は、作図が確定した図形をクリックした時の ポップアップ表示（吹き出し）のタイトル部として使用されます。

例）「マーカー（アイコン）」でのポップアップ表示（タイトル部のみ）

名称も内容も入力しない場合

名称および内容ともに入力しない場合、作図が確定した図形をクリックしても ポップアップ表示は行われません。

例１）項目名に「店名」、値に「喫茶マーカー」を設定する

例２）次行を追加するには、入力欄右側の鍵矢印マークをクリックする

次行が追加された状態

例３）行を削除するには、入力欄右側のゴミ箱マークをクリックする

行が削除された状態

「項目名」は必ず入力してください。「値」だけ入力すると、作図を確定した際に、その行が消えてしまうことがあります。

入力した内容は、作図が確定した図形をクリックした時の ポップアップ表示（吹き出し）の内容部として使用されます。

例）「マーカー（アイコン）」でのポップアップ表示（内容部のみ）

名称も内容も入力しない場合

名称および内容ともに入力しない場合、作図が確定した図形をクリックしても ポップアップ表示は行われません。

「自由文入力に切替」をクリックする

「自由文入力」に切り替わった状態

「自由文入力」では html 形式で内容を設定します。 style 属性を使い、文字のサイズや色などを指定することができます。

html 形式 および style 属性については、 「HTML（HyperText Markup Language）」、「CSS（Cascading Style Sheets）」の情報をネット等で探してみてください。

入力した内容は、作図が確定した図形をクリックした時の ポップアップ表示（吹き出し）の内容部として使用されます。

入力内容と対応するポップアップ表示例は下記をご覧ください。

例１）文字列 "あいうえお" を指定

※html で使用する記号等を含まないのであれば、文字列を指定することもできます。

入力内容

あいうえお

対応するポップアップ表示

例２）文字列 "あいうえお" を、フォントサイズを 20px、色を赤で指定

入力内容

<span style='font-size: 20px; color: red;'>
あいうえお
</span>

対応するポップアップ表示

例３）文字列 "あいうえお" を、フォントサイズを 16px、色をオレンジ、文字を囲む枠を青い 1px の幅の実線で指定

入力内容

<div style='font-size: 16px; color: orange; border: 1px solid blue;'>
あいうえお
</div>

対応するポップアップ表示

例４）いろいろな指定

入力内容

<div>
<span style='color: blue;'>喫茶 あいうえお</span>
<table>
<tr>
<td>営業日</td><td>月から土曜日</td>
</tr>
<tr>
<td>営業時間</td><td>７時から１９時</td>
</tr>
</table>
<span style='color: red; font-size: x-small;'>営業時間中１５時から３０分ほど休憩する時があります。</span>
</div>

対応するポップアップ表示

名称も内容も入力しない場合

名称および内容ともに入力しない場合、作図が確定した図形をクリックしても ポップアップ表示は行われません。

透過率の値が大きいほど、線の透明度が高くなります。

例１）「マーカー（円）」で線（円周の線）の透過率 10% の場合

例２）「マーカー（円）」で線（円周の線）の透過率 60% の場合

キーボードでのスライダー値の指定

マウスでスライダーを動かしづらい場合は、スライダーをクリックして選択してから、 キーボードの左矢印キー「←」と右矢印キー「→」を操作して、値指定することもできます。

通常の状態

クリックして選択した状態

この状態のときにキーボードの左または右矢印キーを操作します。

透過率の値が大きいほど、塗潰しの透明度が高くなります。

例１）「マーカー（円）」で塗潰し（円内）の透過率 10% の場合

例２）「マーカー（円）」で塗潰し（円内）の透過率 60% の場合

キーボードでのスライダー値の指定

マウスでスライダーを動かしづらい場合は、スライダーをクリックして選択してから、 キーボードの左矢印キー「←」と右矢印キー「→」を操作して、値指定することもできます。

通常の状態

クリックして選択した状態

この状態のときにキーボードの左または右矢印キーを操作します。

例）同じ「マーカー（アイコン）」をズームレベルを変えて表示

ズームレベル 16

ズームレベル 14

ズームレベル 12

例）名称および内容と対応するポップアップ表示（吹き出し）

入力設定

<div style='width: 300px;'>
  <p style='font-size: 12px; margin: 0;'>赤野駅（あかのえき）は、高知県安芸市赤野にある、土佐くろしお鉄道阿佐線（愛称：ごめん・なはり線）の駅である。駅番号はGN30。</p>
  <h3 style='font-weight: bold; font-size: 14px; margin: 0.5em 0;'>歴史</h3>
  <p style='font-size: 12px; margin: 0;'>2002年（平成14年）7月1日 開業</p>
  <h3 style='font-weight: bold; font-size: 14px; margin: 0.5em 0;'>イメージキャラクター</h3>
  <img src='https://upload.wikimedia.org/wikipedia/ja/f/f9/Akano_Kamome_chan_20100516.jpg' style='width: 50%; height: auto; float: left; margin-right: 0.5em;'/>
  <div>
    <p style='font-size: 12px; font-weight: bold; margin: 0 0 0.5em 0;'>あかの カモメちゃん</p>
    <p style='font-size: 12px; margin: 0;'>阿佐線内から望むことのできる太平洋にちなんで、太平洋岸を飛び回るカモメをモチーフにしたキャラクターである。</p>
  </div>
  <div style="clear: both;"></div>
  <h3 style='font-weight: bold; font-size: 14px; margin: 0.5em 0;'>隣の駅</h3>
  <div>
    <p style='font-size: 12px; margin: 0;'>和食駅（上り）、穴内駅（下り）</p>
  </div>
  <p style='font-size: 10px;  margin: 0.5em 0;'>※<a style='font-size: 10px;' href="https://ja.wikipedia.org/wiki/赤野駅" target='_blank'>wikipedia - 赤野駅</a> から引用</p>
</div>

対応するポップアップ表示

削除は編集モード時のみ行えます。

例）同じ「マーカー（円）」をズームレベルを変えて表示

ズームレベル 16

ズームレベル 14

ズームレベル 12

「半径」に指定する値は必ず半角数字で入力してください。それ以外の文字を入力すると正しく認識されません。

半径の「単位」は「px：ピクセル」のみ指定できます。

例）「線幅」に 15px、「線色」に青、「線の透過率」に 60 % を指定

例）「塗潰し色」に緑、「塗潰しの透過率」に 20 % を指定

例）名称および内容と対応するポップアップ表示（吹き出し）

入力設定

<div style='width: 500px;'>
  <div>
    <img src='http://tkb11.com/misc/supdoc-gsimaps-drawing-figures-and-file-tool/akano_sisimai_sign.jpeg' style='width: 100%; height: auto; '/>
  </div>
  <p style='font-size: 14px; font-weight: bold;'>赤野獅子舞</p>
  <p style='font-size: 12px; margin: 0; text-indent: 1em;'>大元神社の祭神は<ruby>天御中主神<rt style='font-size: 6px;'>あめのみなかぬしのかみ</rt></ruby>、<ruby>高皇産霊神<rt style='font-size: 6px;'>たかみむすびのかみ</rt></ruby>、<ruby>神皇産霊神<rt style='font-size: 6px;'>かみむすびのかみ</rt></ruby>で創建の時期等は不明であるが、室町時代の<ruby>応永<rt style='font-size: 6px;'>おうえい</rt></ruby>三十三年（一四二六年）の銘のある<ruby>鰐口<rt style='font-size: 6px;'>わにぐち</rt></ruby>があったことがわかっており、それ以前であるのは確かである。その鰐口は現在他に移っている。</p>
  <p style='font-size: 12px; margin: 0; text-indent: 1em;'>赤野の獅子舞のはじまった時期は不詳であるが、夏祭（七月二十二日～二十三日、二十二日は宵祭）と秋祭（十月第二日曜日）に大元神社の境内や御旅所である住吉神社の前の浜で奉納されている。</p>
  <p style='font-size: 12px; margin: 0; text-indent: 1em;'>「<ruby>飛脚<rt style='font-size: 6px;'>ひきゃく</rt></ruby>」、「<ruby>目白<rt style='font-size: 6px;'>めじろ</rt></ruby>おとし」など様々な演目があり、一年毎に各地区が持ち回りで独自の獅子舞を奉納する。二人立ちの獅子で、テガイ子が一～三名、太鼓が一名で構成される。テガイ子は演目により様々に扮装し、その扮装に応じた仕種をおもしろ、おかしく演じながら寝ている獅子を起こし、荒れる獅子を制するように舞う。テガイ子の服装や身のこなしが素朴でユーモラスなところに特徴がある。</p>
  <p style='font-size: 12px; margin: 0; text-indent: 1em;'>昭和四十四年に高知県の無形民俗文化財に指定されている。</p>
  <p style='font-size: 13px; text-align: right;'>安芸市教育委員会</p>
  <p style='font-size: 10px;'>※看板写真で夏祭が（七月十九日～二十日、十九日は宵祭）となっているのは誤り。上記文章では訂正した。</p>
</div>

対応するポップアップ表示

削除は編集モード時のみ行えます。

例）同じ「線」をズームレベルを変えて表示

ズームレベル 16

ズームレベル 14

ズームレベル 12

作図を完了するには、「線」を構成する点が 2 つ以上必要です。

例）「線幅」に 5px、「線色」に赤、「線の透過率」に 20 % を指定

例）名称および内容と対応するポップアップ表示（吹き出し）

入力設定

対応するポップアップ表示

削除は編集モード時のみ行えます。

作図を完了するには、「ポリゴン」を構成する点が 3 つ以上必要です。

作図途中のエラー

作図を完了する際に輪郭線が交差した状態だとエラーになり、作図を完了できませんので、ご注意ください。

このような状態になってしまった時は、一旦輪郭線が交差しない形状にして作図を完了し、その後、目的の形に変更してください。

作図途中では輪郭線が交差しても問題ない

作図を完了する際に輪郭線が交差した状態だとエラーになる
※最終点（右下）を再度クリックして作図を完了しようとしている

輪郭線が交差しない余分な点を指定する

もう一度クリックして、一旦作図を完了する

余分な点をクリックして削除する

目的の形になった

例）「線幅」に 10px、「線色」に紫、「線の透過率」に 15 % を指定

例）「塗潰し色」に水色、「塗潰しの透過率」に 10 % を指定

例）名称および内容と対応するポップアップ表示（吹き出し）

入力設定

対応するポップアップ表示

削除は編集モード時のみ行えます。

例）同じ「円」をズームレベルを変えて表示

ズームレベル 16

ズームレベル 14

ズームレベル 12

値の単位はメートルまたはキロメートルで、「半径」の横の一覧で指定します。

「半径」に指定する値は必ず半角数字で入力してください。それ以外の文字を入力すると正しく認識されません。

例）「線幅」に 10px、「線色」に黄、「線の透過率」に 10 % を指定

例）「塗潰し色」にマゼンタ、「塗潰しの透過率」に 80 % を指定

例）名称および内容と対応するポップアップ表示（吹き出し）

入力設定

<table>
<tr><td>日付</td><td>９月３０日</td></tr>
<tr><td>時間</td><td>１０時から１２時</td></tr>
</table>
<p style='color: red;'>雨天決行</p>
<p>※ほうき等は各自準備してください。</p>

対応するポップアップ表示

削除は編集モード時のみ行えます。

例）同じ「テキスト」をズームレベルを変えて表示

ズームレベル 16

ズームレベル 14

ズームレベル 12

例）名称および内容と対応するポップアップ表示（吹き出し）

入力設定

対応するポップアップ表示

削除は編集モード時のみ行えます。

手軽な反面、線を構成する点の数はかなり多くなります。 最終的な作図情報の量を抑えたい場合には、「線」を新たに作成する での手順もご検討ください。

作成した線の移動、変更や設定等については、「線」の作成方法 を参照ください。