Getting started with Leaflet.js

<head><!--  import leaflet  -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin="">
</script>
<style>
#mymap{height:180px}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">

var au = new L.LatLng(38.956379, -77.106342);
var mymap = L.map('mymap').setView(au, 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>


<title>Title</title>
<!-- import leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin="">
</script>

<style>
#mymap{height:180px}
</style>

</head>
<body>
<div id="mymap"></div>
<script type="text/javascript">

var au = new L.LatLng(38.956379, -77.106342);
var mymap = L.map('mymap').setView(au, 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
</script>


</body>
</html>

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Symfony 4: Unpack the Packs

Hacker News Progressive Web Apps

Atomic Design Thinking

How To Solve Cyclic Rotation

STATE of PROPS Beyond Coding

Working with states with a minimal framework: HyperApp

Lazy loading concept in Angular

Java script Key Points-Functions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bella Sims

Bella Sims

More from Medium

Understand HTTP 3

Dynamic Server Pages(DSP) on webMethods IS — With Demo.

basic DSP exmple

Text Translation using Powershell

How to revert to a previous commit and push to the remote repository.

Github logo