Skip to content

Instantly share code, notes, and snippets.

@junkor-1011

junkor-1011/README.md

Last active November 28, 2020 13:08
Show Gist options
  • Save junkor-1011/c9c3ef2561b76d540b681ad4a6be75a0 to your computer and use it in GitHub Desktop.
Save junkor-1011/c9c3ef2561b76d540b681ad4a6be75a0 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet get BBox by drawing rectangle
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Leaflet get BBox by drawing rectangle</title>
<!-- style sheet -->
<!-- bootstrap4 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<!-- Leaflet -->
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
/>
<!-- leaflet-plugin -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
/>
<!-- jQuery UI -->
<link
rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
/>
<!-- Javascript -->
<!-- jQuery & bootstrap4 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
async
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
async
></script>
<!-- jQuery-UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Leaflet -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- leaflet-plugin -->
<script src="https://unpkg.com/[email protected]/leaflet-hash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<!-- d3.js -->
<script src="https://d3js.org/d3.v6.min.js" async></script>
<!-- custom -->
<!-- <script src="./main.js"></script> -->
<style>
html,
body {
height: 100%;
}
#map {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.leaflet-control-container::after {
content: url(https://maps.gsi.go.jp/image/map/crosshairs.png);
z-index: 1000;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 h-100">
<!-- control parameters -->
<h3>controls</h3>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="lat_min">lat_min</label>
<input type="text" id="lat_min" class="form-control" />
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="lat_max">lat_max</label>
<input type="text" id="lat_max" class="form-control" />
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="lng_min">lng_min</label>
<input type="text" id="lng_min" class="form-control" />
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="lng_max">lng_max</label>
<input type="text" id="lng_max" class="form-control" />
</div>
</div>
</div>
</div>
<div class="col-8 h-100">
<!-- Leaflet -->
<div class="row h-100 m-4">
<div class="col-12 h-75 m-4">
<div id="map" class="h-100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- custom -->
<script src="./main.js"></script>
</body>
</html>
Raw
main.js
// ***
// Initalize map
const map = L.map(
'map',
L.extend(
{
minZoom: 5,
zoom: 13,
maxZoom: 22,
center: [36.5, 139.9],
},
L.Hash.parseHash(location.hash)
)
);
map.zoomControl.setPosition('bottomright');
L.hash(map);
map.on('click', (e) => {
L.popup()
.setLatLng(e.latlng)
.setContent(
`
<p class="p-small">
lat: ${e.latlng.lat}
</p>
<p class="p-small">
lng: ${e.latlng.lng}
</p>
`
)
.openOn(map);
});
// draw
const fg_draw = L.featureGroup().addTo(map);
const draw_options = {
draw: {
polyline: false,
polygon: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: fg_draw,
edit: false,
},
};
const drawControl = new L.Control.Draw(draw_options).addTo(map);
map.on('draw:created', (e) => {
// reset featureGroup
fg_draw.clearLayers();
// get & set bbox
const bbox = e.layer.getBounds().toBBoxString().split(',');
document.getElementById('lng_min').value = bbox[0];
document.getElementById('lat_min').value = bbox[1];
document.getElementById('lng_max').value = bbox[2];
document.getElementById('lat_max').value = bbox[3];
const geojson = e.layer.toGeoJSON();
console.log(geojson); // for Test
new L.GeoJSON(geojson, {
style: {
fillOpacity: 0.0,
color: 'black',
weight: 1.5,
dashArray: '10, 10',
},
}).addTo(fg_draw);
});
// basemap layers
const osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
attribution:
"<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors",
// minZoom: 10,
maxNativeZoom: 18,
maxZoom: 22,
});
// Stamen Terrain
const stamen_terrain = L.tileLayer(
'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png',
{
attribution:
'<a id="home-link" target="_top" href="http://maps.stamen.com/">Map tiles</a> by <a target="_top" href="http://stamen.com">Stamen Design</a>, under <a target="_top" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data © <a target="_top" href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>.',
maxNativeZoom: 14,
maxZoom: 22,
}
);
const stamen_toner = L.tileLayer(
'http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png',
{
attribution:
'<a id="home-link" target="_top" href="../">Map tiles</a> by <a target="_top" href="http://stamen.com">Stamen Design</a>, under <a target="_top" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
maxNativeZoom: 18,
maxZoom: 22,
}
);
const stamen_watercolor = L.tileLayer(
'http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png',
{
attribution:
'Map tiles by <a href="https://stamen.com/" target="_blank">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>. © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors.',
maxNativeZoom: 16,
maxZoom: 22,
}
);
// ArcGIS World Imaginary
const arcgis_world_imaginary = L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{
attribution:
'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
maxNativeZoom: 17,
maxZoom: 22,
}
);
const gsi_std = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
{
attribution:
"<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（標準地図）</a>",
maxNativeZoom: 18,
maxZoom: 22,
opacity: 1,
}
);
const gsi_pale = L.tileLayer(
'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
{
attribution:
"<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（淡色地図）</a>",
maxNativeZoom: 18,
maxZoom: 22,
}
);
const gsi_ort = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg',
{
attribution:
"<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（オルソ）</a>",
maxNativeZoom: 17,
maxZoom: 22,
opacity: 0.9,
}
);
const gsi_blank = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
{
attribution:
"<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル（白地図）</a>",
maxNativeZoom: 14,
maxZoom: 22,
opacity: 1,
}
);
const gsi_relief = L.tileLayer(
'https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',
{
attribution:
"<a href='http://maps.gsi.go.jp/development/ichiran.html'>地理院タイル</a>",
maxNativeZoom: 15,
maxZoom: 22,
}
);
L.control
.scale({
imperial: false,
metric: true,
})
.addTo(map);
const baseLayers = {
'地理院タイル（標準地図）': gsi_std,
'地理院タイル（淡色地図）': gsi_pale,
'地理院タイル（オルソ）': gsi_ort,
'地理院タイル（白地図）': gsi_blank,
'地理院タイル（標高図）': gsi_relief,
'Stamen Terrain': stamen_terrain,
'Stamen Toner': stamen_toner,
'Stamen WaterColor': stamen_watercolor,
'World Imaginary': arcgis_world_imaginary,
osm: osm.addTo(map),
};
const overlays = {};
const map_control = L.control
.layers(baseLayers, overlays, { position: 'topright', collapsed: true })
.addTo(map);
const hash = L.hash(map);
document.addEventListener('DOMContentLoaded', (event) => {
// Test
console.log('DOMContentLoaded');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment