前回は津波情報を表形式で表示してきましたが、今回は地図形式で表示してみます
前回同様、津波に関する情報は発表頻度が低いため、この通りに書いても動かない場面もあるかもしれません。ご了承ください
apiのURL
- 最近発生した地震のリストは、 https://www.jma.go.jp/bosai/tsunami/data/list.json
- 個別の地震の情報は、
https://www.jma.go.jp/bosai/tsunami/data/{jsonName}.json
に格納されています
これらの詳細は 前々回の記事をご覧ください
また、
- 津波警報の各沿岸の地理データが https://www.jma.go.jp/bosai/common/const/geojson/tsunami.json に格納されています
apiの構造
個別の地震情報(tsunami/data/{jsonName}.json)
個別の津波情報のapiは以下のような構造となっています(観測値・予想値の描画に関わる部分を中心に抜粋)
{
"Control": {
"Title": "津波情報a"
},
"Head": {
"Title": "津波観測に関する情報"
},
"Body": {
"Tsunami": {
"Observation": {
"Item": [
{
"Area": {
"Name": "北海道太平洋沿岸中部"
},
"Station": [
{
"Name": "浦河",
"Code": "10101",
"MaxHeight": {
"DateTime": "2026-04-20T17:46:00+09:00",
"TsunamiHeight": "0.2"
},
"latlon": {
"lat": 42.17,
"lon": 142.77
}
},
{
"Name": "えりも町庶野",
"Code": "10103",
"MaxHeight": {
"DateTime": "2026-04-20T18:08:00+09:00",
"TsunamiHeight": "0.2",
"Revise": "更新"
},
"latlon": {
"lat": 42.05,
"lon": 143.3
}
}
]
},
{
"Area": {
"Name": "北海道太平洋沿岸西部",
"Code": "102"
},
"Station": [
{
"Name": "白老港",
"Code": "10222",
"MaxHeight": {
"DateTime": "2026-04-20T18:00:00+09:00",
"TsunamiHeight": "0.1",
"Revise": "追加"
},
"latlon": {
"lat": 42.52,
"lon": 141.32
}
}
],......
},......
]
},
"Forecast": {
"Item": [
{
"Area": {
"Name": "北海道太平洋沿岸中部",
"Code": "101"
},
"Category": {
"Kind": {
"Name": "津波警報",
"Code": "51"
}
}
},
{
"Area": {
"Name": "青森県太平洋沿岸",
"Code": "201"
},
"Category": {
"Kind": {
"Name": "津波警報",
"Code": "51"
}
},......
}
]
}
},
"Earthquake": [
{
"Hypocenter": {
"Area": {
"Coordinate": "+39.8+143.2-10000/"
}
}
}
]
}
}
津波警報等の描画
Body.Tsunami.Forecast.Item以下が各津波予報区の津波の予想です
"Item": [
{
"Area": {
"Name": "北海道太平洋沿岸中部",
"Code": "101"
},
"Category": {
"Kind": {
"Name": "津波警報",
"Code": "51"
}
}
},...
]
Item.{i}.Area.Codeに津波予報区コードが、Item.{i}.Category.Kind.Codeに津波警報のコードが格納されています。
各津波予報区コードごとの沿岸の地理データは https://www.jma.go.jp/bosai/common/const/geojson/tsunami.json に格納されています。
津波警報コードと警報種別の対応は前回掲載した通りですが、
| コード | 説明 | 備考 |
|---|---|---|
| 00 | 津波なし | |
| 50 | 解除 | (大)津波警報→解除 |
| 51 | 津波警報 | |
| 52 | 大津波警報 | 継続 |
| 53 | 大津波警報 | 新規 |
| 60 | 解除 | 注意報→解除 |
| 62 | 津波注意報 | |
| 71 | 津波予報 | |
| 72 | 津波予報 | 注意報→予報 |
| 73 | 津波予報 | (大)津波警報→予報 |
となっており、各沿岸にそれぞれの警報コードに対応した色で線を引けば描画することができます
津波観測結果の描画
Body.Tsunami.Observation.Item.{i}.Station.{j}以下が各観測点の津波の観測結果です。
正常に観測できた場合には、{j}.MaxHeight.TsunamiHeightに高さが格納されます
正常に観測できた場合の例
"MaxHeight": {
"DateTime": "2026-04-20T19:34:00+09:00",
"TsunamiHeight": "0.3",
"Revise": "更新"
}
水位が上昇中であったり、観測値が機器の限界を振り切っている場合には記号が付くため、除去する処理が必要です(>、≧、<、+を除去すれば大丈夫だと思います)
水位が上昇中の場合の例
"MaxHeight": {
"DateTime": "2026-04-20T19:34:00+09:00",
"TsunamiHeight": "0.2+",
"Revise": "更新"
}
最大波の高さが観測可能範囲を超えた場合の例(推定)
"MaxHeight": {
"DateTime": "2026-04-20T19:15:00+09:00",
"Condition": "重要",
"TsunamiHeight": ">5.5",
"Revise": "更新"
}
観測された津波が数センチの微弱な津波の場合や、観測値がまだ予想より小さい場合は、TsunamiHeight要素はなくなります
微弱な津波の例(推定)
"MaxHeight": {
"DateTime": "2026-04-20T19:31:00+09:00",
"Condition": "微弱",
"Revise": "追加"
}
観測された高さが予想より大幅に小さい場合
"MaxHeight": {
"Condition": "観測中"
}
ざっくり、TsunamiHeightがある場合には記号を除去したうえで数字ごとに色分けしたアイコンを、ない場合には灰色等のアイコンを各観測点の位置に打っていけば描画できるのではないかと思います
震源の描画
Body.Earthquake.{i}.Hypocenter.Area.Coordinateに震源の座標が格納されています。この位置にバツ印を打つことで描画できます
"Earthquake": [
{
"Hypocenter": {
"Area": {
"Name": "三陸沖",
"Coordinate": "+39.8+143.2-10000/"
}
}
}
]
津波情報は原因地震を複数持つ場合があるため、Earthquake要素は配列となっています。また、震源が特定できなかった場合にはCoordinate要素は空白となる場合もあるため注意してください
描画の際の注意点
津波に関する情報には、さまざまな色覚型の人が見分けやすい推奨配色が策定されています。このため、なるべくこの配色に従った、あるいはこの配色の意図を踏まえた表現をすることをお勧めします
配色の設定経緯は 見分けやすい津波警報の配色・色調の策定 をご覧ください。また、気象庁ホームページの配色指針もこの意図を踏まえた配色を掲載しています。(なぜかホームページ自体はこの配色の通りになっていませんが)
| 種類 | 色 | 備考 |
|---|---|---|
| 大津波警報 | 紫 #c800ff 等 |
ライン幅は他の2倍程度が望ましい |
| 津波警報 | 赤 #ff2800 等 |
|
| 津波注意報 | 黄 #faf500 等 |
|
| 陸地 | 灰 #a6a6a6 等 |
|
| 海 | 濃い青 #1a389c 等 |
また、津波は水深が浅くなると急に高くなる性質を持つため、沖合の津波の高さを沿岸の津波の高さと同じ凡例で表してはいけません。沖合の津波が沿岸でどのような高さになるかは電文内に格納されていますが、沿岸から遠く津波予報区との対応付けが難しい観測点などでは省かれる場合もあるため、ざっくり全て同じ色で描画するのが良いのではないかと思います
表示用のコード
ここまでの内容を地図表示していきます
アメダスのデータを地図表示した記事の時などと同様に、Leaflet.jsを用いて地図表示していきます
headタグ内でLeafletのスタイルシートとスクリプトを読み込みます(Leafletのチュートリアルからそのまま拝借)
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
ページのレイアウトを定義します。html、bodyを画面幅いっぱいに表示する設定とし、地図部分(div#map)の背景色には濃い青(#3b4580)を指定します。また、Leafletでは地図にアイコンを載せる際、デフォルトではleaflet-div-iconというクラスがつき、背景色と境界線が付いてしまうため、それらを付けないためのiconというクラスを定義しています
(今回は 見分けやすい津波警報の配色・色調の策定 ではなく 気象庁ホームページの配色指針の配色を使用しています)
<style>
*{ font-family:sans-serif;}
html, body{ width:100%; height:100%; margin:0; overflow:hidden;}
body{ display:flex; flex-direction:column;}
div#map{ flex:1; background:#3b4580;}
.borderBlack{ text-shadow:1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;}
.center{ text-align:center;}
.icon{ background:#0000;}
</style>
津波警報のコード別のレベル・配色を定義します(レベルの数字は、噴火警戒レベルと配色を共用する可能性を考慮して1、2、4、5としています)
// 0 なし、1 予報、2 注意報、4 警報、5 大津波警報
const warnLevels = { "00":0, "50":0, "51":4, "52":5, "53":5, "60":0, "62":2, "71":1, "72":1, "73":1};
const warnColors = { "5":"#c800ff", "4":"#ff2800", "2":"#faf500", "1":"#80ffff", "0":"#c8c8cb"};
危険度の高い順に線が重なるよう、レイヤーの優先度を定義します。今回は「震源と津波観測情報」「地図」「大津波警報～津波予報の線」の7層を定義しています
// <- 表側 pane7(震源・津波観測) pane6(地図) pane5～1(大津波警報～津波予報の線) 裏側->
for( let i=1; i<=7; i++){
map.createPane("pane"+i).style.zIndex = i*10;
}
地図のレイヤーは気象庁ホームページ内の灰色の地図一択としています。(お好きな地図タイルを追加することもできますが、線の上に地図を載せる描画方法では海が透過している地図でないと厳しいでしょう)
paneは手前から2番目のpane6を指定します。この裏に海岸線に沿って津波警報・注意報の線を引くことで、沿岸部を縁取りするような形で津波警報の発表状況を表現することができます
L.control.layers({
"気象庁地図":L.tileLayer('https://www.jma.go.jp/tile/jma/gray-cities/{z}/{x}/{y}.png', { minZoom:4, maxZoom:12, maxNativeZoom:10, attribution: '© <a href="https://www.jma.go.jp/jma/kishou/info/coment.html">気象庁</a>'}).addTo(map)
}).addTo(map);
津波予報区の地域情報ファイルを取得します
fetch("https://www.jma.go.jp/bosai/common/const/geojson/tsunami.json")
.then((response) => response.json())
.then((response) => {
tsunamiPolygons = response;
get();
});
URLパラメータから取得したファイル名をもとに、個別の津波情報のファイルを取得します
fetch("https://www.jma.go.jp/bosai/tsunami/data/" + params.get("json"))
.then((response) => response.json())
.then((response) => {
display( response);
});
表示用のレイヤーを定義します。今回は全ての描画要素を1つのレイヤーの中で、paneによって描画順を指定して描画します
layers['features'] = L.layerGroup();
津波予報区別の警報種別を読み取ります。警報コードから危険度(warnLevel)を計算し、大津波警報(Level=5)の場合は太さを2倍にします。描画順(pane)は危険度が高いほど大きくして、縮小しても危険度の高い情報が埋もれないようにします
if( report['Body']['Tsunami']['Forecast']!=undefined && report['Body']['Tsunami']['Forecast']['Item']!=undefined){
for( let item of report['Body']['Tsunami']['Forecast']['Item']){
let areaName = item['Area']['Name'], areaCode = item['Area']['Code'];
let warnCode = item['Category']['Kind']['Code'], warnName = item['Category']['Kind']['Name'], warnLevel = warnLevels[warnCode], warnColor = warnColors[warnLevel];
for( let tsunamiPolygon of tsunamiPolygons['features']){
if( tsunamiPolygon['properties']['code'] == areaCode){
if( warnLevel==5){
layers['features'].addLayer( L.geoJSON(tsunamiPolygon, { "color":warnColor, "weight":24, "opacity":1, pane:"pane"+warnLevel}).bindTooltip(areaName+" "+warnName));
}else if( warnLevel>0){
layers['features'].addLayer( L.geoJSON(tsunamiPolygon, { "color":warnColor, "weight":12, "opacity":1, pane:"pane"+warnLevel}).bindTooltip(areaName+" "+warnName));
}
}
}
}
}
津波の観測データを描画します。MaxHeightを読み取って記号を除き、数値として解釈できる場合には値に応じて色を決定します。ただし「沖合の津波観測に関する情報」の場合は黄色で固定とします
(クリックした際に値を表示するために、前回作成したformatMaxHeight関数を流用しています
if( report['Body']['Tsunami']['Observation']!=undefined && report['Body']['Tsunami']['Observation']['Item']!=undefined){
for( let item of report['Body']['Tsunami']['Observation']['Item']){
for( let station of item['Station']){
let stationName = station['Name'], stationLatlon = station['latlon'];
let maxHeight = formatMaxHeight(station['MaxHeight']), maxHeightVal = station['MaxHeight']['TsunamiHeight'];
if( maxHeightVal!=undefined){
maxHeightVal = maxHeightVal.replace(">","").replace("≧","");
}
let stationColor = 0;
if( report['Control']['Title']=="沖合の津波観測に関する情報"){
stationColor = 2;
}else if( isNaN(maxHeightVal)){
stationColor = 0;
}else if( maxHeightVal*1 >= 3){
stationColor = 5;
}else if( maxHeightVal*1 >= 1){
stationColor = 4;
}else if( maxHeightVal*1 >= 0.2){
stationColor = 2;
}
let stationIcon = L.divIcon({ html:"<span style='font-size:24px; color:" + warnColors[stationColor] + ";'>●</span>",
iconSize:[30,30], iconAnchor:[15,10], className:"center borderBlack"});
let stationMarker = L.marker( stationLatlon, {icon: stationIcon, pane:"pane7"}).bindTooltip(stationName+" "+maxHeight);
layers['features'].addLayer( stationMarker);
}
}
}
震源アイコンをレイヤーに追加します。津波観測データと同じ、最も手前側のpaneを設定します
if( report['Body']['Earthquake']!=undefined){
for( let earthquake of report['Body']['Earthquake']){
let hypocenter = earthquake['Hypocenter'], hypoName = hypocenter['Area']['Name'];
let hypoLatLon = hypocenter['Area']['Coordinate'].replaceAll("/","").split(/(?=[-+])/);
let hypo = L.divIcon({
html:"<img style='width:30px;' src='./images/hypocenter.png' title='震源 " + hypoName + "'>",
iconSize: [30,30], iconAnchor: [15,15], className:'icon'
});
let hypoMarker = L.marker(hypoLatLon, {icon: hypo, pane:"pane7"});
layers['features'].addLayer( hypoMarker);
}
}
表示ページ全体のソースコード
いつものようにサンプルページを以下に置いているのですが、津波警報等がしばらく発表されていない場合には何も表示されていません。津波警報等発表時に取得したjsonファイルを保存していますので、よろしければ参考にしてください
津波警報等発表時の気象庁ホームページのサンプルファイル
サンプルページ
サンプルページ(Date APIを利用した版)
震源アイコンの例
津波リスト
前回のコードを流用します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>津波情報(一覧)</title>
<style>
*{ font-family:sans-serif;}
table, tr, td, th{ border-collapse:collapse; white-space:nowrap; text-align:center;}
th,td{ padding:2px 8px; border-style:solid; border-width:1px 0; border-color:#d8d8db;}
th{ background-color:#f1f1f4;}
.ev5{ background:#c800ff; color:white;}
.ev4{ background:#ff2800; color:white;}
.ev2{ background:#faf500; color:black;}
.ev0{ background:#80ffff; color:black;}
</style>
</head>
<body>
<h1>津波情報(一覧)</h1>
<div id="out"></div>
<script>
"use strict";
get();
function get(){
fetch("https://www.jma.go.jp/bosai/tsunami/data/list.json")
// fetch("https://mm394587.net/api/tsunami/list.json")
.then((response) => response.json())
.then((reports) => display(reports));
}
function display( reports){
let out = "";
out += "<table><tr><th>発表時刻</th><th>情報の種類</th><th>震源</th><th>M</th><th colspan='2'>詳細</th></tr>";
for( let report of reports){
out += "<tr>";
try{
let reportDatetime = Temporal.ZonedDateTime.from( report['rdt']+"[Asia/Tokyo]");
out += "<td>" + dateFormat(reportDatetime,'m/d h:n') + "</td>";
}catch(e){
out += "<td></td>";
}
let infoTitle = report['ttl'], className = "";
if( infoTitle.includes("大津波警報")){
className = "ev5";
}else if( infoTitle.includes("津波警報")){
className = "ev4";
}else if( infoTitle.includes("津波注意報")){
className = "ev2";
}else if( infoTitle.includes("津波予報")){
className = "ev0";
}
out += "<td class='" + className + "'>" + infoTitle + "</td>";
let areaName = report['anm'];
out += "<td>" + areaName + "</td>";
if( report['mag']==undefined){
out += "<td></td>";
}else{
out += "<td>" + report['mag'] + "</td>";
}
if( report['json']==undefined){
out += "<td></td><td></td>";
}else{
out += "<td><a href='./tsunami.html?json=" + report['json'] + "'>表</a></td>";
out += "<td><a href='./tsunamiMap.html?json=" + report['json'] + "'>地図</a></td>";
}
out += "</tr>";
}
out += "</table>";
document.getElementById("out").innerHTML = out;
}
function dateFormat( t, f='y-m-dTh:n:s', is24=false){ // for Temporal
const j=["","月","火","水","木","金","土","日"];const e=["","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
if(is24&&t.hour==0){t.substract({days:1});f=f.replace(/h/g,"24").replace(/H/g,24);}
const y=t.year,m=t.month,d=t.day,h=t.hour,n=t.minute,s=t.second,w=t.dayOfWeek;
f=f.replace(/y/g,("000"+y).slice(-4)).replace(/Y/g,y).replace(/m/g,("0"+m).slice(-2)).replace(/M/g,m).replace(/d/g,("0"+d).slice(-2)).replace(/D/g,d);
f=f.replace(/w/g,j[w]).replace(/W/g,e[w]);
f=f.replace(/h/g,("0"+h).slice(-2)).replace(/H/g,h).replace(/n/g,("0"+n).slice(-2)).replace(/N/g,n).replace(/s/g,("0"+s).slice(-2)).replace(/S/g,s);
return f;
}
</script>
</body>
</html>
個別の津波情報(地図)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>津波(地図)</title>
<!-- https://leafletjs.com/ -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<style>
*{ font-family:sans-serif;}
html, body{ width:100%; height:100%; margin:0; overflow:hidden;}
body{ display:flex; flex-direction:column;}
div#map{ flex:1; background:#3b4580;}
.borderBlack{ text-shadow:1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000;}
.center{ text-align:center;}
.icon{ background:#0000;}
</style>
</head>
<body>
<div id="map"></div>
<script>
"use strict";
const params = new URLSearchParams(window.location.search);
// 0 なし、1 予報、2 注意報、4 警報、5 大津波警報(噴火警戒レベルの配色と共用する可能性を意識)
const warnLevels = { "00":0, "50":0, "51":4, "52":5, "53":5, "60":0, "62":2, "71":1, "72":1, "73":1};
const warnColors = { "5":"#c800ff", "4":"#ff2800", "2":"#faf500", "1":"#80ffff", "0":"#c8c8cb"};
let tsunamiPolygons = {}, areaCenters = {}, layers = {};
let map = L.map('map').setView([35, 135], 5);
// <- 表側 pane7(震源・津波観測) pane6(地図) pane5～1(大津波警報～津波予報の線) 裏側->
for( let i=0; i<=7; i++){
map.createPane("pane"+i).style.zIndex = i*10;
}
initialize();
function initialize(){
L.control.layers({
"気象庁地図":L.tileLayer('https://www.jma.go.jp/tile/jma/gray-cities/{z}/{x}/{y}.png', { minZoom:4, maxZoom:10, maxNativeZoom:10, pane:"pane6", attribution: '<a href="https://www.jma.go.jp/jma/kishou/info/coment.html">気象庁</a>'}).addTo(map)
}).addTo(map);
getPolygons();
}
function getPolygons(){
fetch("https://www.jma.go.jp/bosai/common/const/geojson/tsunami.json")
.then((response) => response.json())
.then((response) => {
tsunamiPolygons = response;
get();
});
}
function get(){
fetch("https://www.jma.go.jp/bosai/tsunami/data/" + params.get("json"))
.then((response) => response.json())
.then((response) => {
display( response);
});
}
function display( report){
layers['features'] = L.layerGroup();
if( report['Body']['Tsunami']!=undefined){
if( report['Body']['Tsunami']['Forecast']!=undefined && report['Body']['Tsunami']['Forecast']['Item']!=undefined){
for( let item of report['Body']['Tsunami']['Forecast']['Item']){
let areaName = item['Area']['Name'], areaCode = item['Area']['Code'];
let warnCode = item['Category']['Kind']['Code'], warnName = item['Category']['Kind']['Name'], warnLevel = warnLevels[warnCode], warnColor = warnColors[warnLevel];
for( let tsunamiPolygon of tsunamiPolygons['features']){
if( tsunamiPolygon['properties']['code'] == areaCode){
if( warnLevel==5){
layers['features'].addLayer( L.geoJSON(tsunamiPolygon, { "color":warnColor, "weight":24, "opacity":1, pane:"pane"+warnLevel}).bindTooltip(areaName+" "+warnName));
}else if( warnLevel>0){
layers['features'].addLayer( L.geoJSON(tsunamiPolygon, { "color":warnColor, "weight":12, "opacity":1, pane:"pane"+warnLevel}).bindTooltip(areaName+" "+warnName));
}
}
}
}
}
if( report['Body']['Tsunami']['Observation']!=undefined && report['Body']['Tsunami']['Observation']['Item']!=undefined){
for( let item of report['Body']['Tsunami']['Observation']['Item']){
for( let station of item['Station']){
let stationName = station['Name'], stationLatlon = station['latlon'];
let maxHeight = formatMaxHeight(station['MaxHeight']), maxHeightVal = station['MaxHeight']['TsunamiHeight'];
if( maxHeightVal!=undefined){
maxHeightVal = maxHeightVal.replace(">","").replace("≧","");
}
let stationColor = 0;
if( report['Control']['Title']=="沖合の津波観測に関する情報"){
stationColor = 2;
}else if( isNaN(maxHeightVal)){
stationColor = 0;
}else if( maxHeightVal*1 >= 3){
stationColor = 5;
}else if( maxHeightVal*1 >= 1){
stationColor = 4;
}else if( maxHeightVal*1 >= 0.2){
stationColor = 2;
}
let stationIcon = L.divIcon({ html:"<span style='font-size:24px; color:" + warnColors[stationColor] + ";'>●</span>",
iconSize:[30,30], iconAnchor:[15,10], className:"center borderBlack"});
let stationMarker = L.marker( stationLatlon, {icon: stationIcon, pane:"pane7"}).bindTooltip(stationName+" "+maxHeight);
layers['features'].addLayer( stationMarker);
}
}
}
}
if( report['Body']['Earthquake']!=undefined){
for( let earthquake of report['Body']['Earthquake']){
let hypocenter = earthquake['Hypocenter'], hypoName = hypocenter['Area']['Name'];
let hypoLatLon = hypocenter['Area']['Coordinate'].replaceAll("/","").split(/(?=[-+])/);
let hypo = L.divIcon({
html:"<img style='width:30px;' src='./images/hypocenter.png' title='震源 " + hypoName + "'>",
iconSize: [30,30], iconAnchor: [15,15], className:'icon'
});
let hypoMarker = L.marker(hypoLatLon, {icon: hypo, pane:"pane7"});
layers['features'].addLayer( hypoMarker);
}
}
map.addLayer( layers['features']);
}
function formatMaxHeight( maxHeight){
let height = "";
if( maxHeight!=undefined && maxHeight['TsunamiHeight']!=undefined){
height = maxHeight['TsunamiHeight'];
}
try{
if( height.includes("<")){
height = height.replace("<","") + "m未満";
}else if( height.includes(">") || height.includes("≧")){
height = height.replace(">","").replace("≧","") + "m以上";
}else if( height!="" && !height.includes("巨大") && !height.includes("高い")){
height = height + "m";
}
if( height.includes("+")){
height = height.replace("+","") + "(上昇中)";
}
if( maxHeight['Condition']!=undefined){
height += " " + maxHeight['Condition'];
}
return height;
}catch(e){
console.log( e);
return "";
}
}
</script>
</body>
</html>