Skip to content

Instantly share code, notes, and snippets.

@ranafaraz

ranafaraz/Place Makers on Map

Created October 15, 2020 21:02
Show Gist options
  • Save ranafaraz/da4466719bccc79e55f513196231f844 to your computer and use it in GitHub Desktop.
Save ranafaraz/da4466719bccc79e55f513196231f844 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Place Makers on Map
<!DOCTYPE html>
<html>
<head>
<title>University Markers on Open Source Maps</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style type="text/css">
#mapid {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([30.3753, 69.3451], 6);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmFuYWZhcmF6YWhtZWQiLCJhIjoiY2tnYjlwNGVnMGYwYjJzcjBhdmo5ZGZtNSJ9.D3X9kKzqrJRnf1BkQwaHJw', {
attribution: 'Developed by &copy; <a href="http://www.ranafaraz.com/">Rana Faraz Ahmed</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoicmFuYWZhcmF6YWhtZWQiLCJhIjoiY2tnYjlwNGVnMGYwYjJzcjBhdmo5ZGZtNSJ9.D3X9kKzqrJRnf1BkQwaHJws'
}).addTo(mymap);
</script>
<script> // Adding a Maker
var marker = L.marker([29.3960, 71.6626]).addTo(mymap);
marker.bindPopup("<b>IUB - BWP</b><br/>35,000 Students<br/>4,000 Employees").openPopup();
var marker2 = L.marker([28.3808, 70.3745]).addTo(mymap);
marker2.bindPopup("<b>KFUEIT - RYK</b><br/>15,000 Students<br/>1,000 Employees").openPopup();
var marker3 = L.marker([30.2606, 71.5071]).addTo(mymap);
marker3.bindPopup("<b>BZU - Multan</b><br/>25,000 Students<br/>2,000 Employees").openPopup();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment