MIERUNE地図 - LocalTile
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
src
.gitignore
README.md

README.md

MIERUNE地図 - LocalTile


Getting Started

タイルデータ準備

①配布タイルディレクトリ
「tilesディレクトリ」にタイル一式を格納し配布

※タイル仕様参考リンク 地理院タイル仕様

タイルディレクトリ


ローカルディレクトリ運用の場合

②ローカルディレクトリへコピー
任意のローカルディレクトリに「tilesディレクトリ」をコピー

③ローカルパス指定

// パス設定(相対パス or 絶対パス)
var url = "./tiles/{z}/{x}/{y}.png";


webサーバー運用の場合

②webサーバーディレクトリへコピー
ApacheやNginx等、任意のwebサーバーディレクトリに「tilesディレクトリ」をコピー

③http指定

// URL設定
var url = "http://ドメイン/tiles/{z}/{x}/{y}.png";



MIERUNE地図表示 - 全プラン

MIERUNE地図表示 - 全プラン

example path

./src

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>LocalMap example</title>

        <!--Leaflet 読み込み-->
        <script src="./library/leaflet-1.3.1/leaflet.js"></script>
        <link href="./library/leaflet-1.3.1/leaflet.css" rel="stylesheet" />

        <link href="./css/stylesheet.css" rel="stylesheet" />

    </head>
    <body>

        <div id="map"></div>

        <script src="./js/script.js"></script>

    </body>
</html>

stylesheet.css

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

script.js

// パス or URL設定
var url = "./tiles/{z}/{x}/{y}.png";

// MIERUNE地図 読み込み
var MIERUNE = new L.tileLayer(url, {
    attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});

// 地図画面表示
var map = L.map('map', {
    center: [35.6823351, 139.7627708],
    zoom: 15,
    zoomControl: true,
    layers: [MIERUNE]
});