Skip to content

Instantly share code, notes, and snippets.

@yuskesuzki

yuskesuzki/sample1.html

Last active August 2, 2017 02:05
Show Gist options
  • Save yuskesuzki/f333ed41118714e5961a198132bb0e2a to your computer and use it in GitHub Desktop.
Save yuskesuzki/f333ed41118714e5961a198132bb0e2a to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet.jsで指定した範囲のみ閲覧可能な地図を作ってみるサンプル
Raw
sample1.html
<html>
<head>
<meta charset="utf-8">
<style>
html,body{
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="/bower_components/leaflet/dist/leaflet.css" />
<script src="/bower_components/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 地図の中心緯度経度初期値
var mapInitLatLng = [
43.10379, 141.53621
];
// 地図を定義
var mymap = L.map('map', {
maxZoom: 24,
minZoom: 10,
}).setView(mapInitLatLng, 16);
// 地理院地図のタイルをセット
L.tileLayer(
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://maps.gsi.go.jp/">地理院地図</a>',
maxZoom: 18,
}).addTo(mymap);
// 地図移動時に発生させるイベントをセット
mymap.on('moveend', moveInitLatLng);
/**
* 地図の中心位置を mapInitLatLng に強制的に移動する
*/
function moveInitLatLng(e) {
mymap.panTo(mapInitLatLng);
}
</script>
</body>
</html>
Raw
sample2.html
<html>
<head>
<meta charset="utf-8">
<style>
html,body{
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="/bower_components/leaflet/dist/leaflet.css" />
<script src="/bower_components/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 地図の中心緯度経度初期値
var mapInitLatLng = [
43.10379, 141.53621
];
// 地図を定義
var mymap = L.map('map', {
maxZoom: 24,
minZoom: 10,
}).setView(mapInitLatLng, 11);
// 市全体を囲む矩形を定義
var cityBounds = [[43.17293, 141.44430], [43.01615, 141.6684]];
L.rectangle(cityBounds, {color: "red", fillColor: '#f03', fillOpacity: 0.5, weight: 1}).addTo(mymap);
// 地理院地図のタイルをセット
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://maps.gsi.go.jp/">地理院地図</a>',
maxZoom: 18,
}).addTo(mymap);
// 地図移動時に発生させるイベントをセット
mymap.on('moveend', moveInitLatLng);
/**
* 地図の中心位置を mapInitLatLng に強制的に移動する
*/
function moveInitLatLng(e) {
mymap.panTo(mapInitLatLng);
}
</script>
</body>
</html>
Raw
sample3.html
<html>
<head>
<meta charset="utf-8">
<style>
html,body{
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="/bower_components/leaflet/dist/leaflet.css" />
<script src="/bower_components/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 地図の中心緯度経度
var mapInitLatLng = [
43.10379, 141.53621
];
// 地図を定義
var mymap = L.map('map', {
maxZoom: 24,
minZoom: 10,
}).setView(mapInitLatLng, 11);
// 市全体を囲む矩形を定義
var cityBounds = [[43.17293, 141.44430], [43.01615, 141.6684]];
var cityRect = L.rectangle(cityBounds, {color: "red", fillColor: '#f03', fillOpacity: 0.5, weight: 1});
cityRect.addTo(mymap);
// 地理院地図のタイルをセット
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://maps.gsi.go.jp/">地理院地図</a>',
maxZoom: 18,
}).addTo(mymap);
// 地図移動時のイベントをセット
mymap.on('moveend', moveInsideCityBound);
/**
* 地図の中心位置を市全体を囲む矩形内に移動する
*/
function moveInsideCityBound(e) {
// 表示してる地図の中心座標を取得
var mapCenter = mymap.getCenter();
// 市全体を囲む矩形の LatLngBounds オブジェクトを取得する
var checkBounds = cityRect.getBounds();
// 現在の地図の中心位置が checkBounds に含まれてるかチェック。
// 含まれてない場合、地図の中心座標を矩形内部に戻す。
if(!checkBounds.contains(mapCenter)) {
mymap.panTo(mapInitLatLng);
}
}
</script>
</body>
</html>
Raw
sample4.html
<html>
<head>
<meta charset="utf-8">
<style>
html,body{
margin: 0px;
padding: 0px;
}
#map {
width: 100%;
height: 100%;
}
</style>
<link rel="stylesheet" href="/bower_components/leaflet/dist/leaflet.css" />
<script src="/bower_components/leaflet/dist/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 地図の中心緯度経度
var mapInitLatLng = [
43.10379, 141.53621
];
// 地図を定義
var mymap = L.map('map', {
maxZoom: 24,
minZoom: 10,
}).setView(mapInitLatLng, 11);
// 市全体を囲む矩形を定義
var cityBounds = [[43.17293, 141.44430], [43.01615, 141.6684]];
var cityRect = L.rectangle(cityBounds, {color: "red", fillColor: '#f03', fillOpacity: 0.5, weight: 1});
cityRect.addTo(mymap);
// setMaxBounds を指定して地図の表示範囲を制限
mymap.setMaxBounds(cityBounds);
// 地理院地図のタイルをセット
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://maps.gsi.go.jp/">地理院地図</a>',
maxZoom: 18,
}).addTo(mymap);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment