MIERUNE地図 - Mapbox GL JS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
src mapbox-gl.jsのVersion更新 Jul 9, 2018
README.md 📝 README 修正 Jul 9, 2018

README.md

MIERUNE地図 - Mapbox GL JS


Getting Started

MIERUNE地図表示 -「Free」プラン

MIERUNE地図表示 -「Free」プラン

example path

./src/001

index.html

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

        <!--Mapbox GL JS 読み込み-->
        <script src="https://api.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js"></script>
        <link href="https://api.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.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

// スタイル: mierune, mierune_mono
var style = "mierune_mono";

// URL設定
var url = "https://tile.mierune.co.jp/" + style + "/{z}/{x}/{y}.png";

// 地図画面表示 MIERUNE地図 読み込み
var map = new mapboxgl.Map({
    container: "map",
    style: {
        "version": 8,
        "sources": {
            "MIERUNEMAP": {
                "type": "raster",
                "tiles": [url],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "MIERUNEMAP",
            "type": "raster",
            "source": "MIERUNEMAP",
            "minzoom": 0,
            "maxzoom": 18
        }]
    },
    center: [139.767, 35.681],
    zoom: 11
});

// コントロール関係表示
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.AttributionControl({
    compact: true
}));



MIERUNE地図表示 -「Standard, Premium, Global Scale」プラン

MIERUNE地図表示 -「Standard, Premium, Global Scale」プラン

example path

./src/002

index.html

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

        <!--Mapbox GL JS 読み込み-->
        <script src="https://api.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js"></script>
        <link href="https://api.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.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

// 「Standard, Premium, Global Scale」プラン 認証キー
var apikey = "xxxxxxxxxx";

// スタイル: normal, gray, bright, blue, warm, MIERUNE
var style = "normal";

// URL設定
var url = "https://tile.cdn.mierune.co.jp/styles/" + style + "/style.json" + "?key=" + apikey;

// 地図画面表示 MIERUNE地図 読み込み
var map = new mapboxgl.Map({
    container: "map",
    style: url,
    hash: true,
    attributionControl: false,
    zoom: 11,
    center: [139.767, 35.681]
});

// コントロール関係表示
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.AttributionControl({
    compact: true
}));



マーカー・ポップアップ表示

マーカー・ポップアップ表示

example path

./src/003

stylesheet.css

#marker {
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

script.js

// ポップアップ設定
var popup = new mapboxgl.Popup().setText('東京駅だよ!!');

// マーカー設定
var el = document.createElement('div');
el.id = 'marker';
el.style.backgroundImage = "url('https://www.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg')";
var Map_Point = new mapboxgl.Marker(el)
    .setLngLat([139.767, 35.681])
    .setPopup(popup)
    .addTo(map);



Other information