Luke: Created page with "A slippy map is a UI component which can zoom and pan (think something like Google Maps). On a desktop this is with dragging the mouse and the scrollwheel. On mobile it is thr..."

2022-09-01T22:11:33Z

Created page with "A slippy map is a UI component which can zoom and pan (think something like Google Maps). On a desktop this is with dragging the mouse and the scrollwheel. On mobile it is thr..."

New page

A slippy map is a UI component which can zoom and pan (think something like Google Maps). On a desktop this is with dragging the mouse and the scrollwheel. On mobile it is through pinch zooming and dragging. SocialStack has a slippy map component which can display any content you would like, and of course it is typically used for maps.

= Getting Started =

Install the slippy map component into your project:

<syntaxhighlight lang="bash">
socialstack install UI/SlippyMap
</syntaxhighlight>

From there, the simplest usage is by giving it an image:

<syntaxhighlight lang="js">
import SlippyMap from 'UI/SlippyMap';
import myMapRef from './static/map.svg';

...

return <SlippyMap imageRef={myMapRef} />;

</syntaxhighlight>

You will likely need to set the height on the .slippy-map div to ensure that it takes up the most appropriate amount of screen space for your needs.

= Controls =

The map can display controls over the top which can be used to manipulate the state of the map or for additional custom controls as necessary.

<syntaxhighlight lang="js">
import SlippyMap from 'UI/SlippyMap';
import myMapRef from './static/map.svg';

...

return <SlippyMap imageRef={myMapRef} controls={(step, values, mapController) => {

return <><button onClick={() => {mapController.resetToInitialState()}}>Reset view</button></>;

}}/>;

</syntaxhighlight>

Controls are displayed inside a div with the class .overhead-ui and defaults to displaying in the bottom left corner, however by targeting that class you can display it elsewhere (or in all 4 corners for example).

Slippy Map - Revision history

Luke: Created page with "A slippy map is a UI component which can zoom and pan (think something like Google Maps). On a desktop this is with dragging the mouse and the scrollwheel. On mobile it is thr..."