maputnik/stories/MapMapboxGl.stories.js
orangemug 2cc179acc1 Fixed more input accessibility issues, also
- Added searchParams based router for easier testing
 - Added more stories to the storybook
2020-06-09 19:11:07 +01:00

109 lines
2.2 KiB
JavaScript

import React from 'react';
import MapMapboxGl from '../src/components/MapMapboxGl';
import {action} from '@storybook/addon-actions';
import {Wrapper} from './ui';
import {withA11y} from '@storybook/addon-a11y';
export default {
title: 'MapMapboxGl',
component: MapMapboxGl,
decorators: [withA11y],
};
const mapStyle = {
"version": 8,
"sources": {
"test1": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, -10]
},
"properties": {}
}
]
}
},
"test2": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [15, 10]
},
"properties": {}
}
]
}
},
"test3": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-15, 10]
},
"properties": {}
}
]
}
}
},
"sprite": "",
"glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
"layers": [
{
"id": "test1",
"type": "circle",
"source": "test1",
"paint": {
"circle-radius": 40,
"circle-color": "red"
}
},
{
"id": "test2",
"type": "circle",
"source": "test2",
"paint": {
"circle-radius": 40,
"circle-color": "green"
}
},
{
"id": "test3",
"type": "circle",
"source": "test3",
"paint": {
"circle-radius": 40,
"circle-color": "blue"
}
}
]
}
export const Basic = () => {
return <div style={{height: "100vh", width: "100vw"}}>
<MapMapboxGl
mapStyle={mapStyle}
inspectModeEnabled={false}
replaceAccessTokens={(s) => s}
/>
</div>
};