Skip to content

Instantly share code, notes, and snippets.

@Marko97IT

Marko97IT/index.html

Created March 12, 2024 15:29
Show Gist options
  • Save Marko97IT/ddb673bc9a6968747e2fc4dd53bd8f4a to your computer and use it in GitHub Desktop.
Save Marko97IT/ddb673bc9a6968747e2fc4dd53bd8f4a to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet map with Bootstrap modal (JavaScript vanilla)
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
</head>
<body>
<div id="modal" class="modal fade modal-dialog modal-lg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Map test</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="map" style="height: 400px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
const modal = document.getElementById('modal');
const modalBs = new bootstrap.Modal(modal);
const map = L.map("map")
map.setView([41.902782, 12.496366], 12);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
modalBs.show();
map.whenReady(() => {
setTimeout(() => {
map.invalidateSize();
}, 250);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment