Slippy Map

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:

socialstack install UI/SlippyMap

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

import SlippyMap from 'UI/SlippyMap';
import myMapRef from './static/map.svg';

...


return <SlippyMap imageRef={myMapRef} />;

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.

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></>;

}}/>;

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).