Skip to content

Instantly share code, notes, and snippets.

@williamho
Created October 10, 2016 03:59
Show Gist options
  • Save williamho/04fd30a800affca3f12e0da384b8b8ee to your computer and use it in GitHub Desktop.
Save williamho/04fd30a800affca3f12e0da384b8b8ee to your computer and use it in GitHub Desktop.
leaflet map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, #map {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
var map = L.map(document.querySelector('#map')).setView([0, 0], 2);
L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
minZoom: 1,
maxZoom: 18,
attribution: 'Wikimedia maps beta | Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
id: 'wikipedia-map-01',
noWrap: true,
bounds: L.latLngBounds(
L.latLng(-85, -180), L.latLng(85, 180)
)
}).addTo(map);
L.control.scale().addTo(map);
L.circleMarker([40.7128, -74.0059], {
/*
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 32000,
weight: 3,
opacity: 0.5
*/
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment