leaflet-pegman/leaflet-pegman.css

A Leaflet plugin that allows easy integration with the Google StreetView Service API

.pano-canvas {
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 1000;
  display: none;
}

.pegman-control {
  width: 30px;
  height: 30px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
}

.pegman-control.dragging {
  cursor: grabbing;
}

.pegman-control .pegman-button {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("maps.gstatic.com/api-3/cb_scout5.png");
  background-position: -145px -23px;
  background-repeat: no-repeat;
}

.pegman-control:hover .pegman-button {
  background-position: -145px -75px;
}

.pegman-control.dragging .pegman-button {
  background-position: -145px -50px;
}

.pegman-control.active .pegman-button {
  background-position: -145px -50px;
}

.pegman-control.active .pegman-button:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: ' ';
  display: block;
  z-index: -1;
  opacity: 0.5;
  background: linear-gradient(#d1d1d1, #F5F5F5, #fbfbfb);
}

.pegman-control.streetview-layer-active {
  background: linear-gradient(#d1d1d1, #F5F5F5, #fbfbfb);
  background-clip: padding-box;
}

.pegman {
  position: absolute;
  z-index: 9999999;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.pegman::before {
  position: relative;
  z-index: 5;
  display: block;
  width: 19px;
  height: 32px;
  content: ' ';
  background-image: url("maps.gstatic.com/api-3/cb_scout5.png");
  background-repeat: no-repeat;
  background-position: -112px -4px;
}

.pegman::after {
  position: absolute;
  width: 22px;
  height: 22px;
  content: ' ';
  bottom: -18px;
  left: 50%;
  margin-left: -11px;
  z-index: 4;
  display: block;
  overflow: visible;
  visibility: visible;
  border: 1px dotted rgba(51, 51, 51, 0.9);
  border-radius: 30px;
  background-color: rgba(105, 185, 70, 0.7);
  box-shadow: 3px 10px 25px rgba(105, 185, 70, 0.9);
}

.pegman.active {
  opacity: 1 !important;
}

.pegman.active.left::before {
  background-position: -119px -55px;
}

.pegman.active.right::before {
  background-position: -114px -158px;
}

.pegman.active.top::before {
  background-position: -112px -4px;
}

.pegman.active.bottom::before {
  background-position: -112px -4px;
}

.pegman.dropped {
  opacity: 1.00;
}

.pegman.dropped::before {
  background-position: -112px -4px;
}

.pegman-marker {
  background: transparent url("maps.gstatic.com/api-3/cb_scout5.png") no-repeat scroll 0 -364px;
}

.pegman-marker:not(.leaflet-drag-target) {
  transition: transform .2s linear;
}

.leaflet-left .pegman-control:hover .pegman-button {
  transform: scale(-1, 1);
}

/*Pegman v3 default theme*/
.leaflet-pegman-v3-default .pegman-control {
  width: 40px;
  height: 40px;
}

.leaflet-pegman-v3-default .pegman-control .pegman-button {
  background-image: url("maps.gstatic.com/pegman_v3/runway-2x.png");
  background-position: -3px -55px;
  background-size: 45px;
}

.leaflet-pegman-v3-default .pegman-control.streetview-layer-active .pegman-button {
  background-position: -3px -7px;
}

.leaflet-pegman-v3-default .pegman-control:hover .pegman-button {
  background-position: -3px -152px;
}

.leaflet-pegman-v3-default .pegman-control.dragging .pegman-button {
  background-position: -3px -104px;
}

/*Pegman v3 small theme*/
.leaflet-pegman-v3-small .pegman-control {
  width: 30px;
  height: 30px;
}

.leaflet-pegman-v3-small .pegman-control .pegman-button {
  background-image: url("maps.gstatic.com/pegman_v3/runway-1x.png");
  background-position: 2px -27px;
  background-size: 25px;
}

.leaflet-pegman-v3-small .pegman-control.streetview-layer-active .pegman-button {
  background-position: 2px 0;
}

.leaflet-pegman-v3-small .pegman-control:hover .pegman-button {
  background-position: 2px -79px;
}

.leaflet-pegman-v3-small .pegman-control.dragging .pegman-button {
  background-position: 2px -53px;
}

.leaflet-container:not(.leaflet-touch).leaflet-pegman-v3-small .pegman-control {
  width: 26px;
  height: 26px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.leaflet-container:not(.leaflet-touch).leaflet-pegman-v3-small .pegman-control .pegman-button {
  background-position: 0 -29px;
}

.leaflet-container:not(.leaflet-touch).leaflet-pegman-v3-small .pegman-control:hover .pegman-button {
  background-position: 0 -81px;
}

.leaflet-container:not(.leaflet-touch).leaflet-pegman-v3-default .pegman-control {
  width: 36px;
  height: 36px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.leaflet-container:not(.leaflet-touch).leaflet-pegman-v3-default .pegman-control .pegman-button {
  background-position: -3px -53px;
  background-size: 42px;
}

.leaflet-container:not(.leaflet-touch).leaflet-pegman-v3-default .pegman-control:hover .pegman-button {
  background-position: -3px -143px;
}