<!-- Mapbox with coordinates -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet"
/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css"
rel="stylesheet"> <!-- A different version of this is in functions.php -->
<style>
body {
margin: 0;
padding: 0;
}
#map {
top: 0;
bottom: 0;
width: 100%;
height: 100%;
min-height: 500px;
}
.marker {
background-image: url('mapbox-icon.png');
background-size: cover;
background-color: red;
width: 15px;
height: 15px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
<h2 class="title is-2">Mapbox Demo 1</h2>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHJpbGxpdW10cmFuc2l0IiwiYSI6ImNqc2R4cGExZTBidDQ0OXBsa2s5Nmo1eGwifQ.9hsJuRJXnFcTc6RCNPWVFQ';
var geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-77.032, 38.913]
},
'properties': {
'title': 'Mapbox',
'description': 'Washington, D.C.'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-122.414, 37.776]
},
'properties': {
'title': 'Mapbox',
'description': 'San Francisco, California'
}
},
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [-112.414, 47.776]
},
'properties': {
'title': 'Mapbox',
'description': 'A new place, Somewhere'
}
}
]
};
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
// add markers to map
geojson.features.forEach(function (marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add it to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(
'<h3>' +
marker.properties.title +
'</h3><p>' +
marker.properties.description +
'</p>'
)
)
.addTo(map);
});
</script>