sr-map-lib
v0.0.43
Published
Map React component library
Downloads
3
Readme
_# Getting started with mapview
// SAMPLE DATA
const atlasUrl = 'https://storage.googleapis.com/siterecon-public-assets/BubbleSprite%20(1).png';
const atlasMapping = './layerHandlers/data/sr-location-icon-mapping.json';
const ICON_DATA_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/icon/meteorites.json';
const TEXT_DATA_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json';
const geojsoncoords = [9.10763335193508, 10.684357541271496];
const normalCoords = [-123.0249569, 49.240719];
const bboxCoords = [
[-122.519, 37.7045],
[-122.355, 37.829],
];
const markerData = [
{
'name': 'Lafayette (LAFY)',
'code': 'LF',
'address': '3601 Deer Hill Road, Lafayette CA 94549',
'entries': '3481',
'exits': '3616',
'coordinates': [-122.123801, 37.893394],
},
{
'name': '12th St. Oakland City Center (12TH)',
'code': '12',
'address': '1245 Broadway, Oakland CA 94612',
'entries': '13418',
'exits': '13547',
'coordinates': [-122.271604, 37.803664],
},
{
'name': '16th St. Mission (16TH)',
'code': '16',
'address': '2000 Mission Street, San Francisco CA 94110',
'entries': '12409',
'exits': '12351',
'coordinates': [-122.419694, 37.765062],
},
{
'name': '19th St. Oakland (19TH)',
'code': '19',
'address': '1900 Broadway, Oakland CA 94612',
'entries': '13108',
'exits': '13090',
'coordinates': [-122.269029, 37.80787],
},
];
const pointFeatureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [22.90819886170229, 2.8248608683353638],
type: 'Point',
},
},
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [23.2157695035728, 2.8655582963942123],
type: 'Point',
},
},
{
type: 'Feature',
properties: {},
geometry: {
coordinates: [22.621168886032365, 2.841972759782294],
type: 'Point',
},
},
],
};
const atlasMap = {
'marker-1': {
'x': 0,
'y': 0,
'width': 40,
'height': 46,
'anchorY': 46,
},
'marker-2': {
'x': 168,
'y': 0,
'width': 54,
'height': 54,
'anchorY': 54,
},
'marker-3': {
'x': 37,
'y': 2,
'width': 62,
'height': 62,
'anchorY': 62,
},
'marker-6': {
'x': 97,
'y': 1,
'width': 70,
'height': 70,
'anchorY': 70,
},
'marker-11': {
'x': 0,
'y': 70,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-21': {
'x': 80,
'y': 70,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-31': {
'x': 156,
'y': 72,
'width': 76,
'height': 76,
'anchorY': 76,
},
'marker-41': {
'x': 230,
'y': 70,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-51': {
'x': 308,
'y': 68,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-61': {
'x': 383,
'y': 68,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-71': {
'x': 458,
'y': 69,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-81': {
'x': 536,
'y': 70,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-91': {
'x': 611,
'y': 70,
'width': 78,
'height': 78,
'anchorY': 78,
},
'marker-101': {
'x': 0,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-201': {
'x': 85,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-301': {
'x': 170,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-401': {
'x': 255,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-501': {
'x': 340,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-601': {
'x': 425,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-701': {
'x': 510,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-801': {
'x': 595,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-901': {
'x': 680,
'y': 147,
'width': 84,
'height': 84,
'anchorY': 84,
},
'marker-1001': {
'x': 2,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-2001': {
'x': 94,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-3001': {
'x': 185,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-4001': {
'x': 280,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-5001': {
'x': 370,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-6001': {
'x': 460,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-7001': {
'x': 530,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-8001': {
'x': 620,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-9001': {
'x': 710,
'y': 232,
'width': 92,
'height': 92,
'anchorY': 92,
},
'marker-10001': {
'x': 4,
'y': 323,
'width': 100,
'height': 100,
'anchorY': 100,
},
};
const defaultTextFeatureCollection = {
type: 'FeatureCollection',
name: 'featue name',
dataType: 'text',
id: 'uniqueLayerId12',
componentId: 'uniqueComponentId1',
visible: true,
data: pointFeatureCollection,
showCluster: true,
enableInteraction: true,
zIndex: 2,
};
const layerStyleObj = {
opacity: 1,
color: [0, 0, 0, 100],
strokeWidth: 22,
strokeColor: [0, 255, 255],
};
const layerHoverStyleObj = {
color: [255, 255, 0, 100],
};
const defaultGeojsonFeatureCollection = {
id: 'uniqueLayerId1',
type: 'FeatureCollection',
name: 'featue name',
dataType: 'geojson',
componentId: 'uniqueComponentId1',
visible: true,
minZoom: null,
data: {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {},
'geometry': {
'coordinates': [
[
[19.10763335193508, 10.684357541271496],
[18.255263942662452, 3.2114374224127857],
[24.901418683691702, 6.1024019953840565],
[19.10763335193508, 10.684357541271496],
],
],
'type': 'Polygon',
},
},
{
'type': 'Feature',
'properties': {},
'geometry': {
'coordinates': [
[
[29.302857294239004, 2.226775763045609],
[32.01251316934432, 17.252237256997745],
[-0.4760951091428751, 12.055667741416542],
[21.49865879029403, -4.511091722742151],
[29.302857294239004, 2.226775763045609],
],
],
'type': 'Polygon',
},
},
],
},
style: layerStyleObj,
hoverStyle: layerHoverStyleObj,
enableInteraction: true,
zIndex: 1,
};
const defaultIconFeatureCollection = {
type: 'FeatureCollection',
name: 'featue name',
dataType: 'icon',
id: 'uniqueLayerId1',
componentId: 'uniqueComponentId1',
visible: true,
data: markerData,
showCluster: true,
iconAtlas: atlasUrl,
iconMapping: atlasMap,
enableInteraction: true,
zIndex: 2,
};
export const Default = {
args: {
id: 'map',
layers: [],
showDefaultMap: true,
loadRasterLayer: [],
unloadRasterLayer: [],
loadLayer: [defaultTextFeatureCollection, defaultGeojsonFeatureCollection],
unloadLayer: [],
hideLayer: [],
showLayer: [],
// children: childcomp,
containerStyle: {
position: 'relative',
border: '1px solid black',
width: '600px',
height: '400px',
},
initialViewState: {
coords: bboxCoords,
zoom: 3,
minzoom: 2,
pitch: 0,
bearing: 0,
},
},
};
<MapComponent {...viewProps} />There are methods for getting started with this repo.
How to run this Project / StoryBook
yarn installDeveloping
To start the developing run :
yarn startThis will build a version of your library, run the watcher and also run Storybook.
To open Storybook manually open your Browser and navigate to http://localhost:6060.
Start developing your components in src/components folder and update the src/index.js file accordingly.
Always provide an YourComponent.story.tsx file, so your component will show up in Storybook.
You can refer to example Button component, but I think you'll get the idea.
Styling your components
SCSS and CSS are supported out of the box, just import your styles into your component like you normally would do.
For the use of CSS Modules refer to rollup-plugin-postcss
Linting and Code formating for Styles
Linting SCSS and CSS is suported out of the box following BEM by using stylelint
Linting and Code formating for Typescript
Linting and code formating is done via ESLint and Prettier using eslint-plugin-react and
eslint-config-prettier.
You can modify linting rules by overriding them in the .eslintrc.cjs file.
yarn lintor (if automatic fixing is possible)
yarn lint:fixTesting
Testing is done with Vitest and @testing-library/react
You can refer to Button.test.js as an example.
yarn testPublishing your library to NPM
To release your library to NPM or your private Registry, make sure you have an active account at NPM, your .npmrc file is correctly setup and the registry url at publishConfig in package.json file is set to your repository url, then:
yarn releaseStorybook
For custom layouts, styling and more information about Storybook, please refer to Storybook documentation.
Deploy Storybook to GitHub Pages
Make sure the homepage url in package.json file is set to your githup pages url, then:
yarn deployScripts
yarn start: Only serves Storybook.yarn build: Builds your library (build can be found indistfolder).yarn storybook:build: Builds the static Storybook in case you want to deploy it.yarn test: Runs the tests.yarn test:coverage: Runs the test and shows the coverage.yarn lint: Runs the linter, Typescript typecheck and stylelint.yarn lint:fix: Runs the linter, Typescript typecheck and stylelint and fixes automatic fixable issues.yarn eslint: Runs only the JavaScript linter.yarn eslint:fix: Runs only the JavaScript linter and fixes automatic fixable issues.yarn stylelint: Runs only the style linter.yarn stylelint:fix: Runs only the style linter and fixes automatic fixable issues.yarn check-types: Runs typescript type checker.yarn ci: Runs Linting, tests and type checker all together.yarn release: Publishes your Library on NPM or your private Registry (depending on your config in your.npmrcfile).yarn storybook: Same as yarn start, to serve storybook.yarn storybook:build: Generates the build for storybook instorybook-staticfolder, that can be deployed wherever you need.yarn storybook:deploy: Builds and deploys Storybook to GitHub Pages.
Resources
Bundler
Code Formatter
Storybook
Testing
Linting
Compiler
_