Open Street Map Sample For HTML and JS
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>POCRA MAP</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<style>
#map { height:100vh; }
</style>
</head>
<body>
<form id="form1" runat="server">
<span>Map Location</span>
<div>
<div id="map"></div>
</div>
</form>
<script>
var a = 0;//Latitude
var b = 0;//Longitude
var url = location.search;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for (var i = 0; i < qs.length; i++) {
var m = qs[i].split('=');
if (m[0] == "A") {
a = m[1];
}
if (m[0] == "B") {
b = m[1];
}
}
var map = L.map('map').setView([a, b], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var marker = L.marker([a, b]).addTo(map);
var circle = L.circle([a, b], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 200
}).addTo(map);
var popup = L.popup()
.setLatLng([a, b])
.setContent("Activity Location")
.openOn(map);
</script>
</body>
</html>
Comments
Post a Comment