Skip to content

Instantly share code, notes, and snippets.

Created September 9, 2020 14:12
Show Gist options
  • Save mapsmania/698c9bf43dfe7c1d487701974e27bf01 to your computer and use it in GitHub Desktop.
Save mapsmania/698c9bf43dfe7c1d487701974e27bf01 to your computer and use it in GitHub Desktop.
mapbox with mapillary images
<!DOCTYPE html>
<meta charset='utf-8'>
<meta content='initial-scale=1,maximum-scale=1,user-scalable=no' name='viewport'>
<script src=''>
<link href='' rel='stylesheet'>
body {
margin: 0;
padding: 0;
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
#plate {
text-align: center;
background-color: #006446;
box-shadow: 5px 5px 5px #888888;
border: 5px solid;
border-style: double;
border-radius: 20px;
position: absolute;
font: 20px arial, sans-serif;
top: 10px;
right: 25px;
width: 500px;
overflow: auto;
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: #E0E4EA;
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
line-height: 18px;
height: 115px;
margin-bottom: 40px;
width: 100px;
<div id='map'></div>
<div id='plate'>
The White House
mapboxgl.accessToken = 'pk.eyJ1IjoiZ21hcHNtYW5pYSIsImEiOiJOYnlnSFpvIn0.5f62d0cnrWCA1KioxzXtqg';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/gmapsmania/ckeupgp365g3q19llpg7l4lin', // stylesheet location
center: [-77.03653,38.897667], // starting position [lng, lat]
zoom: 17 // starting zoom
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
map.on('load', function() {
id: 'san',
type: 'circle',
source: {
type: 'vector',
url: 'mapbox://gmapsmania.carbekh7'
'source-layer': 'centralpark-a2pen7',
paint: {
'circle-opacity': 0.8,
'circle-color': 'blue'
map.on("mousemove", function(e) {
//get the province feature underneath the mouse
var features = map.queryRenderedFeatures(e.point, {
layers: ['san']
//if there's a point under our mouse, then do the following.
if (features.length > 0) {
//use the following code to change the
//cursor to a pointer ('pointer') instead of the default ('')
map.getCanvas().style.cursor = (features[0] !== null) ? 'pointer' : '';
//if there are no points under our mouse,
//then change the cursor back to the default
else {
map.getCanvas().style.cursor = '';
map.on('click', function (e) {
var text = map.queryRenderedFeatures(e.point, { layers: ['san'] });
var title = text[0].properties.key;
document.getElementById('plate').innerHTML = '<img src="' + title + '/thumb-1024.jpg" height="337">';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment