<h2 id="%EF%BC%91%EF%BC%8E%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%91%EF%BC%8E%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> １．はじめに</h2>
・GISとは地理情報システム（Geographic Information System）の略称です。 
・地球上に存在する地形物や事象をコンピュータ上の地図に可視化し、空間データの管理・検索・分析等を可能にします。
<h2 id="%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" aria-hidden="true"></a> ２．サンプルプログラム</h2>
<div class="code-block-container">
<div class="code-block-filename-container">index.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="7">&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
 &lt;meta charset='utf-8'&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
 &lt;link href="style.css" rel="stylesheet" /&gt;
 &lt;!-- MapLibre GL JS --&gt;
 &lt;link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.css' /&gt;
 &lt;script src='https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.js'&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;!-- 地図を表示するHTML要素 --&gt;
 &lt;div id="map"&gt;&lt;/div&gt;
 &lt;script src="main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">style.css</div>
<pre class="language-css"><code class="language-css code-line" data-line="24">body { 
 margin: 0;
 padding: 0;
}

html,
body,
#map {
 height: 100%;
}
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">main.js</div>
<pre class="language-js"><code class="language-js code-line" data-line="36">// 地図を初期化
const map = new maplibregl.Map({
 container: 'map', // 地図を表示するHTML要素のidを指定
 style: 'https://api.maptiler.com/maps/basic-v2/style.json?key=XXXXX',
 center: [139.767066, 35.6813], // 地図表示開始位置（経度, 緯度） 
 zoom: 5 // ズームレベル
});

// 現在位置表示
map.addControl(
 new maplibregl.GeolocateControl({
 positionOptions: {
 // より精度の高い位置情報を取得する
 enableHighAccuracy: true
 },
 // ユーザーが移動するたびに位置を自動的に更新
 trackUserLocation: true
 })
);
</code></pre>
</div><h4 id="%E3%83%BB%E8%A1%A8%E7%A4%BA%E7%94%BB%E9%9D%A2" data-line="57" class="code-line">
<a class="header-anchor-link" href="#%E3%83%BB%E8%A1%A8%E7%A4%BA%E7%94%BB%E9%9D%A2" aria-hidden="true"></a> ・表示画面</h4>
<img src="https://storage.googleapis.com/zenn-user-upload/e5ab3de80bd1-20250227.png" loading="lazy" class="md-img">
<aside class="msg alert">!<div class="msg-content">
解説： 
・ブラウザに表示された地図の右上のアイコンをクリックすると、ユーザーの現在位置付近の地図が表示されます。 
・<code>main.js</code> に記述した地図情報URLは、<a href="https://www.maptiler.com/" target="_blank" rel="nofollow noopener noreferrer">こちら</a>より取得しました。
</div></aside>
<h2 id="%EF%BC%93%EF%BC%8E%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83" data-line="66" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%93%EF%BC%8E%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83" aria-hidden="true"></a> ３．実行環境</h2>
・OS: Windows 11（バージョン 24H2） 
・ブラウザ: Microsoft Edge（バージョン 133.0.3065.82） 
・エディタ: Visual Studio Code（バージョン 1.97） 
・MapLibre GL JS: バージョン 5.1.0
<h2 id="%EF%BC%94%EF%BC%8E%E5%8F%82%E8%80%83" data-line="73" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%94%EF%BC%8E%E5%8F%82%E8%80%83" aria-hidden="true"></a> ４．参考</h2>
・<a href="https://www.zenrin.co.jp/product/article/utilization-gis/index.html" target="_blank" rel="nofollow noopener noreferrer">GISとは？メリットや活用例をわかりやすく解説</a> 
・<a href="https://zenn.dev/asahina820/books/c29592e397a35b/viewer/7319c2" target="_blank">用語解説</a> 
・<a href="https://maplibre.org/maplibre-gl-js/docs/examples/locate-user/" target="_blank" rel="nofollow noopener noreferrer">Locate the user</a> 
・<a href="https://www.memo.dayjournal.dev/memo/maplibregljs-017/" target="_blank" rel="nofollow noopener noreferrer">MapLibre GL JS #017 - 現在位置の表示</a> 
・<a href="https://thinkit.co.jp/story/2012/05/18/3550?page=0%2C2" target="_blank" rel="nofollow noopener noreferrer">スマホアプリ開発にも便利な位置情報API - Geolocation API -</a>

【GIS】MapLibre GL JS を使用し、Webマップ上でユーザーの現在地を特定する（備忘録）

Discussion