Skip to content
MapSVG 9/Documentation/Editor

Preview canvas and devices

Use Preview to test the App as a visitor would use it. The editor presents a fixed virtual device viewport rather than squeezing the App to the width of the settings pane.

Choose Desktop, Tablet, or Mobile above the canvas. Tablet and Mobile start in portrait orientation; use Rotate to switch to landscape. Desktop uses a 1280 × 768 viewport; Tablet uses 768 × 1024 in portrait; Mobile uses 380 × 800 in portrait.

Rotation changes the virtual viewport. The active responsive Layout follows its width: a wide mobile landscape viewport can use the Tablet layout. The toolbar’s Layout label helps identify the profile currently being edited.

App width controls how much of the virtual page’s content width the App occupies. Defaults are 50% on Desktop, 70% on Tablet landscape, and 100% on Tablet portrait and Mobile. Mobile stays at 100%.

Canvas zoom controls how large that virtual page appears in the editor:

  • Fit canvas fits the entire device viewport.
  • Fit app fits the App’s visible bounds.
  • Percentage choices set a manual editor scale, up to 100%.

These are preview preferences. They do not set the frontend map’s geographic zoom or the width of your WordPress theme’s content area.

Hand pans the editor canvas and uses the wheel to change its scale. Regions, markers, and frontend controls do not receive those pointer events. Hold Space over the preview to use Hand temporarily.

Arrow lets the embedded App receive mouse input. Use it to test region highlights, popovers, filters, and geographic pan/zoom.

Editor preview deliberately restricts some navigation actions. Test links and embedding behavior on an actual WordPress page before publishing a change to a live site.