iovmap
Version:
a map sdk base on leaflet
49 lines (47 loc) • 1.97 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<title>Document</title>
<style>
#mapid {
height: 400px;
width: 400px;
}
</style>
</head>
<body onload="init()">
<div id="mapid"></div>
<button onclick="load()">load</button>
<button onclick="open1()">open</button>
<button onclick="close1()">close</button>
<script>
let mymap = null;
function init() {
mymap = L.map("mapid").setView([51.505, -0.09], 13);
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
accessToken: "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
}).addTo(mymap);
}
let popup = null;
function load() {
popup = L.popup().setLatLng([51.5, -0.09]).setContent("I am a standalone popup.").openOn(mymap);
}
function open1() {
mymap.openPopup(popup);
}
function close1() {
mymap.closePopup(popup);
}
</script>
</body>
</html>