Skip to content

Instantly share code, notes, and snippets.

@evilnapsis

evilnapsis/mapbox1.html

Created November 19, 2019 23:04
Show Gist options
  • Save evilnapsis/7e312141f0d2fa10be035740f19a8a1b to your computer and use it in GitHub Desktop.
Save evilnapsis/7e312141f0d2fa10be035740f19a8a1b to your computer and use it in GitHub Desktop.
Download ZIP
Crear mapa con Mapbox y agregar marcadores
Raw
mapbox1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<h1 style="font-size: 80px;"> Crear mapa con MapBox</h1>
<div id='map' style='width: 960px; height: 540px;'></div>
<div id="info"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZXZpbG5hcHNpcyIsImEiOiJjazM2MHZtbXcwNm11M25reGY3NW1zMHhhIn0.FoA72lWHT4bXe2jxfH5uvQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-99, 18], // starting position
zoom: 5
});
var marker = new mapboxgl.Marker().setLngLat([-99, 18]).addTo(map);
var marker2 = new mapboxgl.Marker().setLngLat([-98, 17]).addTo(map);
map.on('mousemove', function (e) {
document.getElementById('info').innerHTML =
JSON.stringify(e.lngLat.wrap());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment