Quick start
- Click Add photos (or drag files onto the page) and add your 360° panos plus a floor plan or aerial.
- Put each pano on the map. Drone panos with GPS place themselves on a drone aerial. Otherwise select a pano, click Place on plan, then click its spot.
- Aim each view: drag the white handle on the cone until it points where the pano is looking.
- Add links between panos with Auto-link or + Add link.
- Name the tour at the top left, click Preview to check it, then Export tour.
- Unzip the export and upload the folder to Cloudflare Pages. Send the link to your client.
Nothing is uploaded while you work. Panos are read, placed and packed on your own computer.
Files you can use
Panos: 360° equirectangular images in a 2:1 ratio (for example 8000×4000), as JPG, PNG or WebP.
- Drone panos (DJI): GPS, height and heading are read from the file, so pins and the direction cone set themselves.
- Renders (3ds Max, V-Ray, Corona): export at exactly 2:1, keep the camera height consistent (around 1.6 m) so hotspots sit at the same level, and convert EXR to JPG first.
Maps: any flat image. A straight-down or angled drone photo with GPS lets the tool place GPS panos automatically. Floor plans work as PNG or JPG. For several floors, export every plan with the same canvas size and crop so positions line up between floors.
Images that aren't 2:1 are treated as maps. Use + Floor to force an image to be a map.
Placing panos on the map
- From GPS: pins appear by themselves (shown as “auto”). Drag any pin that's off; it turns yellow. Re-align from my pins then corrects the other GPS pins using the ones you fixed.
- By hand: select a pano, click Place on plan, click its spot. The toast tells you which pano is next.
- Floors: each plan is a tab above the map. Pick the tab before placing. A pano's Floor menu moves it to another floor. Rename a floor in the box under the tabs.
- Aiming: the selected pin shows a cone with a white handle. Look at the pano and drag the handle until the cone points at what you see. The slider in the panel does the same thing. If all renders on a floor face the same way, aim one and use Use this angle for all panos.
Drone panos already know their compass heading, so they rarely need aiming.
Plan scale and distances
Floor plans have no built-in scale. Click Set scale, click both ends of something whose length you know (a wall, a column grid), and enter the distance. That turns on distances on hotspots and lets Auto-link work on that floor. Drone aerials with GPS don't need this.
Links and hotspots
- Auto-link connects each pano to its nearest neighbors within the distance next to the button (up to four each). It needs GPS or a plan scale, stays within one floor, and keeps every link you placed by hand.
- + Add link: click it, click in the pano where the hotspot should sit, then pick the destination.
- In the link list: the dropdown changes the destination, the cross icon moves the hotspot (click it, then click the new spot), and × deletes it. Clicking a hotspot in the pano selects it in the list.
- Auto links follow the pano's aim if you change it later. Links you placed by hand stay exactly where you put them.
- Connect floors (stairs, elevators) with + Add link. The map switches floors automatically when viewers cross.
- Start the tour here picks the first pano. Use current view as opening view saves the direction a pano opens on.
Tour settings
- Title and subtitle at the top left appear in the tour.
- File names shows each pano's original file name under the subtitle, so clients can match views to files.
- Distances shows meters or feet on hotspots. Pick the unit next to it.
- View downloads adds a camera button that saves what the viewer is looking at as a JPG of about 4K.
- Transition between views: Walk in (a forward push), Crossfade, fade through black or white, or an instant cut, at three speeds.
- Site location: paste coordinates or a Google Maps link and the Google Maps button opens satellite view there for panos without GPS. A plain address opens a normal search. Tip: right-click the building in Google Maps and click the coordinates to copy them.
Replacing images with a new version
- Select a pano and click Replace image… at the bottom of its panel. The name, pin, links, aim and opening view stay; only the picture changes, and the file name can be different.
- If a whole batch keeps the same file names, drag them all onto the page and they swap in by name.
Preview and export
- Preview shows the tour exactly as viewers will see it. Press Esc to close.
- Export tour builds a .zip. Choose the pano size: 8K is sharp on desktop and loads on most phones; 6K is lighter and uses less bandwidth.
- Password (optional) encrypts the panos, maps, names and locations. Viewers enter it once. Keep it safe: there's no way to recover it, and you'll need it to reopen that zip here.
- The export dialog warns you about panos that are still low-resolution, not on a map, or not aimed.
Publish on Cloudflare Pages
- Unzip the export. Upload the folder that contains index.html, not the zip.
- In the Cloudflare dashboard go to Workers & Pages → Create application → Pages → Drag and drop your files.
- Name the project (it becomes name.pages.dev), drop the folder, and click Deploy site.
- To update a tour later, open the project and click Create a new deployment, then drop the new folder. The link stays the same.
Cloudflare Pages allows files up to 25 MB, so 8K panos fit. Netlify also works (drag the folder onto its Deploys page), but its free plan has a monthly credit limit that large panos use up quickly.
Saving and reopening
- Your last project is kept in this browser, images included, and comes back when you reopen the page.
- That copy lives only in this browser on this computer. The exported .zip is the real save file: keep it with the project.
- Open tour .zip reopens an export with everything as you left it. Password-protected zips ask for the password.
- New (click twice) clears the current project from this browser.
Troubleshooting
- A pano came in as a map: it isn't exactly 2:1. Re-export it at 2:1.
- The cone points the wrong way: drag the white handle on the map while looking at the pano.
- No distances on hotspots: set the plan scale, or check that Distances is on.
- Auto-link does nothing: the panos need GPS, or need to be placed on a plan that has a scale.
- A GPS pin is off: drag it, then use Re-align from my pins.
- Very large files are slow: each pano is decoded in the browser. 12K images take a few seconds each.
Esc cancels placing, linking or measuring, and closes this panel. Scroll on the map to zoom; drag empty space to pan.