189 lines
No EOL
5.2 KiB
HTML
189 lines
No EOL
5.2 KiB
HTML
<!-- <!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<title>Display a map</title>
|
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
|
|
<style>
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id='map'></div>
|
|
<script>
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/najomar68/cjfkqhna10mvf2rnvnn0nhf8o',
|
|
center: [151.209240, -33.878838],
|
|
zoom: 13.8
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> -->
|
|
<!-- <!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<title>Attach a popup to a marker instance</title>
|
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
|
|
<style>
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
|
|
#marker {
|
|
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
|
|
background-size: cover;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mapboxgl-popup {
|
|
max-width: 200px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id='map'></div>
|
|
|
|
<script>
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
|
|
|
var monument = [-77.0353, 38.8895];
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/light-v10',
|
|
center: monument,
|
|
zoom: 15
|
|
});
|
|
|
|
// create the popup
|
|
var popup = new mapboxgl.Popup({ offset: 25 })
|
|
.setText('Construction on the Washington Monument began in 1848.');
|
|
|
|
// create DOM element for the marker
|
|
var el = document.createElement('div');
|
|
el.id = 'marker';
|
|
|
|
// create the marker
|
|
new mapboxgl.Marker(el)
|
|
.setLngLat(monument)
|
|
.setPopup(popup) // sets a popup on this marker
|
|
.addTo(map);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> -->
|
|
|
|
<!-- <!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<title>Display a map</title>
|
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
|
|
<style>
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id='map'></div>
|
|
<script>
|
|
|
|
</script>
|
|
<script>
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/najomar68/cjw0120761syu1cmzhptjbahc',
|
|
center: [151.209240, -33.878838],
|
|
zoom: 13.8
|
|
});
|
|
|
|
map.on('click', function(e) {
|
|
var features = map.queryRenderedFeatures(e.point, {
|
|
layers: ['airports-1'] // replace this with the name of the layer
|
|
});
|
|
|
|
if (!features.length) {
|
|
return;
|
|
}
|
|
|
|
var feature = features[0];
|
|
|
|
var popup = new mapboxgl.Popup({ offset: [0, -15] })
|
|
.setLngLat(feature.geometry.coordinates)
|
|
.setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.city + '</p>')
|
|
.setLngLat(feature.geometry.coordinates)
|
|
.addTo(map);
|
|
});
|
|
// Add zoom and rotation controls to the map.
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
</script> -->
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<title>Display a map</title>
|
|
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
|
|
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
|
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
|
|
<style>
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id='map'></div>
|
|
<script>
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/najomar68/cjw02ixkt1u6i1cp6uw0zbphb',
|
|
center: [-89.352858, 39.329402],
|
|
zoom: 2.8
|
|
});
|
|
// Add popups
|
|
map.on('click', function(e) {
|
|
var features = map.queryRenderedFeatures(e.point, {
|
|
layers: ['airports-1'] // replace this with the name of the layer
|
|
});
|
|
|
|
if (!features.length) {
|
|
return;
|
|
}
|
|
|
|
var feature = features[0];
|
|
|
|
var popup = new mapboxgl.Popup({ offset: [0, -15] })
|
|
.setLngLat(feature.geometry.coordinates)
|
|
.setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.city + '</p>')
|
|
.setLngLat(feature.geometry.coordinates)
|
|
.addTo(map);
|
|
});
|
|
// Add zoom and rotation controls to the map.
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
</script>
|
|
|
|
</body>
|
|
</html> |