Zenn
🗾

MapTiler SDKを使ってSvelteKitでマップを表示する

2023/09/14に公開
map
Svelte
SvelteKit
maptailer
tech

MapTiler SDKについて

https://docs.maptiler.com/sdk-js/

MapTiler API Keyを取得する

アカウント登録すると、無料で利用できるAPI Keyを取得できる
https://cloud.maptiler.com/account/keys/

SvelteKitプロジェクトを作成する

https://kit.svelte.jp/docs/creating-a-project

npm create svelte@latest demo-svelte-maptiler
cd demo-svelte-maptiler
npm install

MapTiler SDKをインストールする

npm install --save @maptiler/sdk

CSSファイルを読み込む

src/app.htmlでmaptiler-sdk.cssファイルを読み込む

src/app.html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v1.1.1/maptiler-sdk.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>

マップを表示する

src/routes/+page.svelte
<script lang="ts">
  import * as maptilersdk from '@maptiler/sdk';

  maptilersdk.config.apiKey = '<your api key>';
  maptilersdk.config.primaryLanguage = maptilersdk.Language.JAPANESE;

  const initMap = (container: HTMLElement) => {
    const map = new maptilersdk.Map({
      container: container,
      style: maptilersdk.MapStyle.STREETS,
      center: [139.7017, 35.6581], // 渋谷
      zoom: 12,
      fullscreenControl: true,
    });
  };
</script>

<div use:initMap style="height: 100vh;" />

Discussion