Can I use MapBox for street view like Google Maps street view

Question

I would like to implement street view like google street view in Map box. If anyone has any idea please guide me accordingly.

Answer 1

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.

Answer 2

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()));