Skip to content

Instantly share code, notes, and snippets.

@Scemist

Scemist/leaflet-mapa.js

Last active June 7, 2022 14:59
Show Gist options
  • Save Scemist/d59b42f0e31bb04ea788e62247cfd2dd to your computer and use it in GitHub Desktop.
Save Scemist/d59b42f0e31bb04ea788e62247cfd2dd to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Elegant Code
Raw
leaflet-mapa.js
const mapa = _ => {
const mapa = L.map('mapa-div').setView([51.505, -0.09], 13)
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
attribution: 'Map data &copy; <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: 'your.mapbox.access.token'
}).addTo(mapa)
L.marker([51.5, -0.09]).addTo(mapa)
L.circle([51.508, -0.11], {
color: 'none',
fillColor: 'lightblue',
fillOpacity: 0.7,
radius: 1000
}).addTo(mapa)
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mapa)
L.geoJSON(
{
"type": "LineString",
"coordinates": [
[-0.014312267303466795, 51.48724895076999],
[-0.019505023956298825, 51.48858507637934],
[-0.023689270019531254, 51.49128393068314],
[-0.025942325592041012, 51.49657429038565],
[-0.026071071624755863, 51.50163696369762]
]
},
{
color: 'red'
}
).addTo(mapa)
}
Raw
leaflet-structure.html
<!doctype html>
<html lang="pt-BR">
<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.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
<style> body, html { margin: 0; padding: 0; } #mapa-div { width: 100%; height: 100vh; } </style>
<title>Mapa</title>
</head>
<body>
<main>
<div id="mapa-div"></div>
</main>
<script src="mapa.js"></script>
<script>
mapa()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment