Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mapbox GL JS Workshop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxhbnRnZW8tcHJlc2FsZXMiLCJhIjoiY2pxcmZ1cW1mMG1tcDN4bDVvYzA4MWg5MyJ9.7QtVj_0ythHwEg1n_zaRTQ';
var map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {
countries: {
type: 'geojson',
data: 'https://www.alantgeo.com.au/share/countries.geojson',
generateId: true
},
cities: {
type: 'geojson',
data: 'https://www.alantgeo.com.au/share/cities.geojson'
}
},
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
layers: [
{
id: 'background',
type: 'background',
paint: {
'background-color': 'lightblue'
}
},
{
id: 'country-fill',
type: 'fill',
source: 'countries',
paint: {
'fill-color': [
'case',
['boolean', ['feature-state', 'hover'], false],
'#c5b5a9',
'#ffebda'
]
}
},
{
id: 'country-line',
type: 'line',
source: 'countries',
paint: {
'line-width': 0.5
}
},
{
id: 'city-dot',
type: 'circle',
source: 'cities',
paint: {
'circle-color': 'white',
'circle-radius': 3,
'circle-stroke-width': 1,
'circle-stroke-color': 'black'
}
},
{
id: 'city-label',
type: 'symbol',
source: 'cities',
paint: {
'text-halo-color': 'white',
'text-halo-width': 2
},
layout: {
'text-field': ['get', 'name'],
'text-variable-anchor': ['left', 'right', 'top-left', 'bottom-left', 'top-right', 'bottom-right'],
'text-justify': 'auto',
'text-radial-offset': 0.2,
'text-size': [
'interpolate', ['linear'],
['zoom'],
// zoom 4 or less -> size is 10
2, 10,
// zoom 6 or more -> size is 14
3, 14
]
}
}
]
}
})
var navigation = new mapboxgl.NavigationControl({
visualizePitch: true
});
map.addControl(navigation, 'top-right');
var geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
});
map.addControl(geolocate, 'top-right');
var fullscreen = new mapboxgl.FullscreenControl();
map.addControl(fullscreen, 'top-right');
var scale = new mapboxgl.ScaleControl({
unit: 'metric'
});
map.addControl(scale, 'bottom-right');
var marker = new mapboxgl.Marker({
color: 'darkred',
draggable: true
})
.setLngLat([175, -45])
.addTo(map);
var hoveredCountry;
map.on('mousemove', 'country-fill', function (e) {
map.getCanvas().style.cursor = 'pointer';
if (e.features.length) {
if (hoveredCountry) {
map.setFeatureState({
source: 'countries',
id: hoveredCountry
}, {
hover: false
});
}
hoveredCountry = e.features[0].id;
map.setFeatureState({
source: 'countries',
id: hoveredCountry
}, {
hover: true
});
}
});
map.on('mouseleave', 'country-fill', function (e) {
map.getCanvas().style.cursor = '';
if (hoveredCountry) {
map.setFeatureState({
source: 'countries',
id: hoveredCountry
}, {
hover: false
});
hoveredCountry = null;
}
});
map.on('click', 'country-fill', function (e) {
var popup = new mapboxgl.Popup()
.setText(e.features[0].properties.ADMIN)
.setLngLat(e.lngLat)
.addTo(map)
map.fitBounds(e.features[0].properties.bbox.split(','), {
padding: 20
});
});
map.on('load', function (e) {
map.loadImage('https://www.alantgeo.com.au/share/star-15.png', function (err, img) {
if (err) throw err;
map.addImage('star', img);
map.setLayoutProperty('city-label', 'icon-image', 'star');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.