Can I use MapBox for street view like Google Maps street view
I would like to implement street view like google street view in Map box. If anyone has any idea please guide me accordingly.
Note (Update): Combining non-google map with StreetView is not compliant with Google's Terms of Service: http://cloud.google.com/maps-platform/terms
Technically speaking it is possible:
You can use the Google Street View Service together with a custom mapbox map.
To create a street view panorama, you need to initialize it:
panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
position: { lng: 23.332791136054766, lat: 42.69581966446731 },
pov: { heading: 165, pitch: 0 },
addressControl: false,
linksControl: true, // guide arrows
panControl: false, // compass
zoomControl: false,
/*
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},*/
fullscreenControl: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
zoom: 5,
visible: true,
mode: 'html5' // fixes bug in FF: http://stackoverflow.com/questions/28150715/remove-google-street-view-panorama-effect
});
Then you can update the panorama position based on events coming from your mapbox map:
panorama.setPov({
heading: +building.heading || 0,
pitch: +building.pitch || 0,
zoom: +building.zoom || 1
});
panorama.setPosition({
lng: +building.lng,
lat: +building.lat
});
// NOTE: this fixes broken behavior:
panorama.setVisible(false);
panorama.setVisible(true);
Alternatively, you can have a look at Mapillary which is a more open alternative to Google Street View. They are actually using mapbox-gl in their explorer UI.
2022 Update
I know this question is old. I'm late to the party but I do want to add an answer because I was looking for this specifically and I found an answer that does not require to use Google at all. If you're like me and looking for solutions that are Google-free and independent, this will do.
Mapbox and Mapillary have actually paired together to offer street view.
L.mapbox.accessToken = 'pk.eyJ1Ijoid2ViYjI0aCIsImEiOiJjazU3a2lkbW4wNGJrM2RvNnNrNnBzbGlxIn0.GGnF34IsMQyqKNoam241tA';
var map = L.mapbox.map('map')
.setView([38.9, -77.0346], 13)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
map.attributionControl
.addAttribution('<a href="https://mapillary.com/">Images from Mapillary</a>');
var API_ENDPOINT = 'https://api.mapillary.com/v1/im/search?' +
'min-lat=SOUTH&max-lat=NORTH&min-lon=WEST&max-lon=EAST&' +
'max-results=100&geojson=true';
var images = L.mapbox.featureLayer()
.on('layeradd', function(e) {
e.layer.bindPopup('<img src="' + e.layer.feature.properties.image + '" />', {
minWidth: 340
});
})
.addTo(map);
images.loadURL(API_ENDPOINT
.replace('SOUTH', map.getBounds().getSouth())
.replace('NORTH', map.getBounds().getNorth())
.replace('WEST', map.getBounds().getWest())
.replace('EAST', map.getBounds().getEast()));