├── .npmignore
├── home
    ├── assets
    │   └── favicon.ico
    ├── index.tsx
    ├── components
    │   ├── Section.ts
    │   ├── GlobalStyle.ts
    │   ├── ScrollDown.tsx
    │   └── Radio.tsx
    ├── App.tsx
    ├── index.html
    ├── MapElement.tsx
    ├── Home.tsx
    ├── RouteInfo.tsx
    ├── DynamicRoute.tsx
    ├── Polygons.tsx
    └── Element.tsx
├── src
    ├── global.d.ts
    ├── PathMarker.tsx
    ├── BaseLayers.tsx
    ├── controls
    │   ├── SyncControl.tsx
    │   ├── index.tsx
    │   ├── KeyboardControl.tsx
    │   ├── LayoutControl.tsx
    │   ├── CompassControl.tsx
    │   ├── ZoomControl.tsx
    │   └── MouseControl.tsx
    ├── PathLayer.tsx
    ├── Polygon.tsx
    ├── hooks.ts
    ├── SMapProvider.tsx
    ├── helperFunctions.ts
    ├── MarkerLayer.tsx
    ├── POILayer.tsx
    ├── index.tsx
    ├── Path.tsx
    ├── Marker.tsx
    ├── Map.tsx
    └── types.ts
├── .github
    ├── dependabot.yml
    ├── release-drafter.yml
    └── workflows
    │   ├── nodejs.yml
    │   ├── publish.yml
    │   ├── release-drafter.yml
    │   └── codeql-analysis.yml
├── tsconfig.home.json
├── .gitignore
├── tsconfig.json
├── tsconfig.build.json
├── LICENSE
├── webpack.config.js
├── package.json
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | .babelrc
3 | webpack.config.js


--------------------------------------------------------------------------------
/home/assets/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kolebjak/react-mapycz/HEAD/home/assets/favicon.ico


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | export {}
2 | declare global {
3 |   interface Window {
4 |     SMap: any;
5 |   }
6 | }


--------------------------------------------------------------------------------
/home/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | 
5 | ReactDOM.render(<App />, document.querySelector('#root'));


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | - package-ecosystem: npm
 4 |   directory: "/"
 5 |   schedule:
 6 |     interval: daily
 7 |   open-pull-requests-limit: 10
 8 |   ignore:
 9 |   - dependency-name: webpack
10 |     versions:
11 |     - 5.35.0
12 |   - dependency-name: ts-loader
13 |     versions:
14 |     - 9.0.0
15 |     - 9.1.0
16 | 


--------------------------------------------------------------------------------
/home/components/Section.ts:
--------------------------------------------------------------------------------
 1 | import styled from "styled-components";
 2 | 
 3 | const Section = styled.section`
 4 |   width: 100%;
 5 |   min-height: 100vh;
 6 |   background-color: #eee;
 7 |   color: rgba(0,0,0,0.85);
 8 |   position: relative;
 9 |   
10 |   &:nth-of-type(even) {
11 |     background-color: #A2DCAE;
12 |   }
13 | `
14 | 
15 | export default Section;


--------------------------------------------------------------------------------
/tsconfig.home.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "moduleResolution": "node",
 5 |     "outDir": "./home-static",
 6 |     "target": "es5",
 7 |     "module": "es6",
 8 |     "jsx": "react",
 9 |     "noImplicitAny": true,
10 |     "allowSyntheticDefaultImports": true
11 |   },
12 |   "include": [
13 |     "home"
14 |   ]
15 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log
 5 | 
 6 | # Dependency directories
 7 | node_modules/
 8 | jspm_packages/
 9 | 
10 | # Optional npm cache directory
11 | .npm
12 | 
13 | # dotenv environment variables file
14 | .env
15 | 
16 | node_modules/
17 | playground/__build__
18 | storybook-static
19 | lib
20 | .DS_Store
21 | 
22 | home-static/
23 | .idea
24 | 


--------------------------------------------------------------------------------
/home/components/GlobalStyle.ts:
--------------------------------------------------------------------------------
 1 | import {createGlobalStyle} from 'styled-components';
 2 | 
 3 | const GlobalStyle = createGlobalStyle`
 4 |   html {
 5 |     scroll-behavior: smooth;
 6 |   }
 7 |   body {
 8 |     font-family: 'Open Sans';
 9 |     margin: 0;
10 |     padding: 0;
11 |     -webkit-font-smoothing: antialiased;
12 |   }
13 | `;
14 | 
15 | export default GlobalStyle;


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "forceConsistentCasingInFileNames": true,
 4 |     "noImplicitReturns": true,
 5 |     "noImplicitThis": true,
 6 |     "noImplicitAny": true,
 7 |     "strictNullChecks": true,
 8 |     "noUnusedLocals": true,
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "jsx": "react"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/PathMarker.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Marker from "./Marker";
 3 | import {MarkerCoords} from "./types";
 4 | 
 5 | export type PathMarkerProps = {
 6 |   coords: MarkerCoords[];
 7 | };
 8 | 
 9 | const PathMarker = ({ coords }: PathMarkerProps) => (
10 |   <>
11 |     {coords.map(coords => (
12 |       <Marker coords={coords} />
13 |     ))}
14 |   </>
15 | );
16 | 
17 | export default PathMarker;
18 | 


--------------------------------------------------------------------------------
/src/BaseLayers.tsx:
--------------------------------------------------------------------------------
 1 | enum BaseLayers {
 2 | 	BASE = 1,
 3 | 	TURIST = 2,
 4 | 	OPHOTO = 3,
 5 | 	HYBRID = 4,
 6 | 	HISTORIC = 5,
 7 | 	BIKE = 6,
 8 | 	TRAIL = 7,
 9 | 	OPHOTO0203 = 8,
10 | 	OPHOTO0406 = 9,
11 | 	OBLIQUE = 12,
12 | 	SMART_BASE = 14,
13 | 	SMART_OPHOTO = 15,
14 | 	SMART_TURIST = 16,
15 | 	RELIEF = 17,
16 | 	TURIST_WINTER = 19,
17 | 	SMART_WINTER = 20,
18 | 	SUMMER = 21,
19 | 	SMART_SUMMER = 22,
20 | 	GEOGRAPHY = 23,
21 | 	OPHOTO1012 = 24,
22 | 	HYBRID_SPARSE = 25,
23 | 	OPHOTO1415 = 26,
24 | 	BASE_NEW = 27,
25 | 	TURIST_NEW = 28,
26 | }
27 | 
28 | export default BaseLayers;
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------
/src/controls/SyncControl.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext, useEffect} from 'react';
 2 | import {MapContext} from "../Map";
 3 | 
 4 | export interface SyncControlOptions {
 5 |     bottomSpace?: number;
 6 |     resizeTimeout?: number;
 7 | }
 8 | 
 9 | export interface SyncControlProps {
10 |     options?: SyncControlOptions;
11 | }
12 | 
13 | const SyncControl = (props: SyncControlProps) => {
14 |     const map = useContext<any>(MapContext)
15 | 
16 |     useEffect(() => {
17 |         const sync = new window.SMap.Control.Sync(props.options);
18 |         map.addControl(sync);
19 |     });
20 | 
21 |     return null;
22 | }
23 | 
24 | export default SyncControl;


--------------------------------------------------------------------------------
/src/PathLayer.tsx:
--------------------------------------------------------------------------------
 1 | import React, {createContext, useContext, useEffect} from 'react';
 2 | import {MapContext} from "./Map";
 3 | 
 4 | export const PathLayerContext = createContext(null)
 5 | 
 6 | const PathLayer = ({children}: any) => {
 7 |     const map = useContext<any>(MapContext)
 8 |     const pathLayer = new window.SMap.Layer.Geometry();
 9 | 
10 |     map.addLayer(pathLayer);
11 |     pathLayer.enable();
12 | 
13 |     useEffect(() => {
14 |         return () => { map.removeLayer(pathLayer) };
15 |     })
16 | 
17 |     return <PathLayerContext.Provider value={pathLayer}>{children}</PathLayerContext.Provider>;
18 | }
19 | 
20 | export default PathLayer;


--------------------------------------------------------------------------------
/home/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import GlobalStyle from './components/GlobalStyle';
 3 | import Home from "./Home";
 4 | import DynamicRoute from "./DynamicRoute";
 5 | import Polygons from "./Polygons";
 6 | import Element from "./Element";
 7 | import RouteInfo from './RouteInfo'
 8 | import MapElement from './MapElement'
 9 | 
10 | declare global {
11 |   interface Window {
12 |     SMap: any;
13 |   }
14 | }
15 | 
16 | const App = () => {
17 |   return (
18 |     <>
19 |       <GlobalStyle />
20 |       <Home />
21 |       <MapElement />
22 |       <Element />
23 |       <DynamicRoute />
24 |       <Polygons />
25 |       <RouteInfo />
26 |     </>
27 |   )
28 | }
29 | 
30 | export default App;
31 | 


--------------------------------------------------------------------------------
/src/controls/index.tsx:
--------------------------------------------------------------------------------
 1 | export {default as ZoomControl} from './ZoomControl';
 2 | export {default as CompassControl} from './CompassControl';
 3 | export {default as MouseControl} from './MouseControl';
 4 | export {default as KeyboardControl} from './KeyboardControl';
 5 | export {default as SyncControl} from './SyncControl';
 6 | export {default as LayoutControl} from './LayoutControl';
 7 | 
 8 | export type {ZoomControlProps} from './ZoomControl';
 9 | export type {CompassControlProps} from './CompassControl';
10 | export type {MouseControlProps} from './MouseControl';
11 | export type {KeyboardControlProps} from './KeyboardControl';
12 | export type {SyncControlProps, SyncControlOptions} from './SyncControl';
13 | 


--------------------------------------------------------------------------------
/src/controls/KeyboardControl.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from 'react';
 2 | import {MapContext} from "../Map";
 3 | 
 4 | export interface KeyboardControlProps {
 5 |     pan?: boolean;
 6 |     zoom?: boolean;
 7 | }
 8 | 
 9 | const KeyboardControl = (props: KeyboardControlProps) => {
10 |     const {pan, zoom} = props;
11 |     let mode = 0;
12 | 
13 |     mode |= pan && window.SMap.KB_PAN;
14 |     mode |= zoom && window.SMap.KB_ZOOM;
15 | 
16 |     const map = useContext<any>(MapContext)
17 |     const mouseControl = new window.SMap.Control.Keyboard(mode);
18 |     map.addControl(mouseControl);
19 | 
20 |     return null;
21 | }
22 | 
23 | KeyboardControl.defaultProps = {
24 |     pan: true,
25 |     zoom: true,
26 | }
27 | 
28 | export default KeyboardControl; 


--------------------------------------------------------------------------------
/.github/release-drafter.yml:
--------------------------------------------------------------------------------
 1 | name-template: '$RESOLVED_VERSION'
 2 | tag-template: 'v$RESOLVED_VERSION'
 3 | categories:
 4 |   - title: '🚀 Features'
 5 |     labels:
 6 |       - 'feature'
 7 |       - 'enhancement'
 8 |   - title: '🐛 Bug Fixes'
 9 |     labels:
10 |       - 'fix'
11 |       - 'bugfix'
12 |       - 'bug'
13 |   - title: '🧰 Maintenance'
14 |     label: 'chore'
15 | change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
16 | change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
17 | version-resolver:
18 |   major:
19 |     labels:
20 |       - 'major'
21 |   minor:
22 |     labels:
23 |       - 'minor'
24 |   patch:
25 |     labels:
26 |       - 'patch'
27 |   default: patch
28 | template: |
29 |   ## Changes
30 | 
31 |   $CHANGES
32 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "module": "commonjs",
 5 |     "declaration": true,
 6 |     "isolatedModules": true,
 7 |     "noEmit": false,
 8 |     "outDir": "lib",
 9 |     "strict": true,
10 |     "target": "es5",
11 |     "lib": [
12 |       "es6",
13 |       "dom"
14 |     ],
15 |     "sourceMap": true,
16 |     "allowJs": false,
17 |     "moduleResolution": "node",
18 |     "rootDir": "src"
19 |   },
20 |   "exclude": [
21 |     "src/**/*.spec.ts",
22 |     "src/**/*.stories.tsx",
23 |     "node_modules",
24 |     "coverage",
25 |     "__tests__",
26 |     "build",
27 |     "scripts",
28 |     "acceptance-tests",
29 |     "webpack",
30 |     "jest",
31 |     "src/setupTests.ts"
32 |   ],
33 |   "include": [
34 |     "src"
35 |   ]
36 | }


--------------------------------------------------------------------------------
/src/Polygon.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext} from 'react';
 2 | import {PathLayerContext} from "./PathLayer";
 3 | import {GeometryOptions, MarkerCoords} from './types';
 4 | 
 5 | export interface PolygonProps {
 6 |   coords: MarkerCoords[];
 7 |   id?: string;
 8 |   options?: GeometryOptions;
 9 | }
10 | 
11 | const Polygon = ({ coords, options, id }: PolygonProps) => {
12 |   const PolygonLayer = useContext<any>(PathLayerContext)
13 |   const points = coords.map(p => window.SMap.Coords.fromWGS84(p.lng, p.lat));
14 |   const polyline = new window.SMap.Geometry(window.SMap.GEOMETRY_POLYGON, id, points, options);
15 |   PolygonLayer?.addGeometry(polyline);
16 |   return null;
17 | }
18 | 
19 | Polygon.defaultProps = {
20 |   options: {
21 |     color: '#0000FF',
22 |     width: 5,
23 |   }
24 | }
25 | 
26 | export default Polygon;


--------------------------------------------------------------------------------
/src/hooks.ts:
--------------------------------------------------------------------------------
 1 | import {useEffect} from 'react';
 2 | import {LoaderApiConfig} from "./types";
 3 | 
 4 | export const useSMap = (
 5 |     cb: any,
 6 |     loaderApiConfig?: LoaderApiConfig | null,
 7 | ) => {
 8 |     useEffect(() => {
 9 | 
10 |         const onload = () => {
11 |             // @ts-ignore
12 |             window.Loader.async = true;
13 |             // @ts-ignore
14 |             window.Loader.load(null, loaderApiConfig, cb);
15 |         }
16 | 
17 |         const script = document.createElement('script');
18 |         script.src = 'https://api.mapy.cz/loader.js';
19 |         script.async = true;
20 |         script.onload = onload;
21 |         document.body.appendChild(script);
22 | 
23 |         return () => {
24 |             document.body.removeChild(script);
25 |         }
26 |     }, []);
27 | };


--------------------------------------------------------------------------------
/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 3 | 
 4 | name: Node.js CI
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [ master ]
 9 |   pull_request:
10 |     branches: [ master ]
11 | 
12 | jobs:
13 |   build:
14 | 
15 |     runs-on: ubuntu-latest
16 | 
17 |     strategy:
18 |       matrix:
19 |         node-version: [14.x, 16.x, 18.x]
20 | 
21 |     steps:
22 |     - uses: actions/checkout@v3
23 |     - name: Use Node.js ${{ matrix.node-version }}
24 |       uses: actions/setup-node@v3
25 |       with:
26 |         node-version: ${{ matrix.node-version }}
27 |     - run: yarn
28 |     - run: yarn build
29 |     - run: yarn build:home
30 | 


--------------------------------------------------------------------------------
/home/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
 8 |     <title>react-mapycz library</title>
 9 | 
10 |     <!-- Google tag (gtag.js) -->
11 |     <script async src="https://www.googletagmanager.com/gtag/js?id=G-SNMHPRQKTF"></script>
12 |     <script>
13 |         window.dataLayer = window.dataLayer || [];
14 |         function gtag(){dataLayer.push(arguments);}
15 |         gtag('js', new Date());
16 | 
17 |         gtag('config', 'G-SNMHPRQKTF');
18 |     </script>
19 | </head>
20 | <body>
21 | <!-- React app root element -->
22 | <div id="root"></div>
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/src/SMapProvider.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react';
 2 | import {useSMap} from "./hooks";
 3 | import {LoaderApiConfig} from './types';
 4 | 
 5 | export type SMapProviderProps<T> = T & {
 6 |     loadingElement?: React.ReactNode;
 7 |     loaderApiConfig?: LoaderApiConfig | null;
 8 | }
 9 | 
10 | const SMapProvider = <T extends {}>(Component: React.ComponentType<T>) =>
11 |     function (props: SMapProviderProps<T>) {
12 |         const {loadingElement, loaderApiConfig, ...rest} = props;
13 | 
14 |         const [isLoading, setLoading] = useState(true);
15 |         useSMap(() => setLoading(false), loaderApiConfig);
16 | 
17 |         if (isLoading) {
18 |             return loadingElement
19 |                 ? <>{loadingElement}</>
20 |                 : <div>loading...</div>;
21 |         }
22 | 
23 |         return <Component {...rest as T}/>;
24 |     }
25 | 
26 | export default SMapProvider;


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 3 | 
 4 | name: Publish package
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [published]
 9 | 
10 | jobs:
11 |   publish-npm:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v3
15 |       - uses: actions/setup-node@v3
16 |         with:
17 |           node-version: 14
18 |           registry-url: https://registry.npmjs.org/
19 |       - run: yarn
20 |       - run: yarn build
21 |       - name: bump version
22 |         run: |
23 |           yarn version --no-git-tag-version --new-version ${{ github.event.release.tag_name }}
24 |       - run: npm publish
25 |         env:
26 |           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
27 | 


--------------------------------------------------------------------------------
/src/controls/LayoutControl.tsx:
--------------------------------------------------------------------------------
 1 | import { useContext } from 'react';
 2 | import { MapContext } from "../Map";
 3 | import BaseLayers from '../BaseLayers'
 4 | 
 5 | export type LayoutControlProps = {
 6 |     layers: BaseLayers[]
 7 |     left?: number;
 8 |     top?: number;
 9 |     right?: number;
10 |     bottom?: number;
11 | }
12 | 
13 | const LayoutControl = ({ layers, left, top, bottom, right }: LayoutControlProps) => {
14 |     const map = useContext<any>(MapContext);
15 |     const layerControl = new window.SMap.Control.Layer({ width: 65, items: 2, page: 2 });
16 | 
17 |     layers.forEach((layer) => {
18 |         map.addDefaultLayer(layer);
19 |         layerControl.addDefaultLayer(layer);
20 |     })
21 | 
22 |     map.addControl(layerControl, { left: `${left}px`, top: `${top}px`, right: `${right}px`, bottom: `${bottom}px` });
23 | 
24 |     return null;
25 | }
26 | 
27 | LayoutControl.defaultProps = {}
28 | 
29 | export default LayoutControl;
30 | 


--------------------------------------------------------------------------------
/src/controls/CompassControl.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext, useEffect} from 'react';
 2 | import {MapContext} from "../Map";
 3 | 
 4 | export interface CompassControlProps {
 5 |     left?: number;
 6 |     top?: number;
 7 |     right?: number;
 8 |     bottom?: number;
 9 | }
10 | 
11 | const CompassControl = ({ top, left, right, bottom }: CompassControlProps) => {
12 |     const map = useContext<any>(MapContext);
13 |     const compassControl = new window.SMap.Control.Compass();
14 |     map?.addControl(compassControl);
15 | 
16 |     const controlStyles = compassControl._dom['container'].style;
17 | 
18 |     // Set position
19 |     controlStyles['top'] = `${top}px`;
20 |     controlStyles['right'] = `${right}px`;
21 |     controlStyles['bottom'] = `${bottom}px`;
22 |     controlStyles['left'] = `${left}px`;
23 | 
24 |     useEffect(() => {
25 |         return () => { map.removeControl(compassControl) };
26 |     })
27 | 
28 |     return null;
29 | }
30 | 
31 | export default CompassControl;


--------------------------------------------------------------------------------
/src/helperFunctions.ts:
--------------------------------------------------------------------------------
 1 | interface Results {
 2 |   [key:string]: any;
 3 | }
 4 | 
 5 | interface RouteProps {
 6 |   geometry?: boolean,
 7 |   itinerary?: boolean,
 8 |   altitude?: boolean,
 9 |   criterion: 'fast' | 'short' | 'bike1' | 'bike2' | 'bike3' | 'turist1' | 'turist2'
10 | }
11 | 
12 | export type RouteInfoResultProps = {
13 |   altitude: number[];
14 |   ascent: number;
15 |   descent: number;
16 |   geometry: any[];
17 |   id: string;
18 |   inEurope: boolean;
19 |   points: object[];
20 |   length: number;
21 |   time: number;
22 |   url: string;
23 | };
24 | 
25 | const getDynamicPath = (results: Results) => {
26 |   const routeInfo = results && results.getResults();
27 |   return routeInfo;
28 | }
29 |                
30 | export const getRouteInfo = async (coords:  Array<{ lng: number, lat: number }>, params: RouteProps) => {
31 |   const routePoints = coords.map(p => window.SMap.Coords.fromWGS84(p.lng, p.lat));
32 | 
33 |   return window.SMap.Route.route(routePoints, params).then(getDynamicPath);
34 | }
35 | 


--------------------------------------------------------------------------------
/src/controls/ZoomControl.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext} from 'react';
 2 | import {MapContext} from "../Map";
 3 | 
 4 | export interface ZoomControlProps {
 5 |   showZoomMenu?: boolean;
 6 |   labels?: object;
 7 |   left?: number;
 8 |   top?: number;
 9 |   right?: number;
10 |   bottom?: number;
11 | }
12 | 
13 | const ZoomControl = ({labels, showZoomMenu, top, bottom, left, right}: ZoomControlProps) => {
14 |   const map = useContext<any>(MapContext);
15 |   const zoomControl = new window.SMap.Control.Zoom(labels, {showZoomMenu});
16 |   map.addControl(zoomControl);
17 | 
18 |   // TODO: set position
19 |   const controlStyles = zoomControl._dom['container'].style;
20 | 
21 |   // Set position
22 |   controlStyles['top'] = `${top}px`;
23 |   controlStyles['right'] = `${right}px`;
24 |   controlStyles['bottom'] = `${bottom}px`;
25 |   controlStyles['left'] = `${left}px`;
26 | 
27 |   return null;
28 | }
29 | 
30 | ZoomControl.defaultProps = {
31 |   showZoomMenu: false,
32 |   labels: {},
33 | }
34 | 
35 | export default ZoomControl;


--------------------------------------------------------------------------------
/.github/workflows/release-drafter.yml:
--------------------------------------------------------------------------------
 1 | name: Release Drafter
 2 | 
 3 | on:
 4 |   push:
 5 |     # branches to consider in the event; optional, defaults to all
 6 |     branches:
 7 |       - master
 8 |   # pull_request event is required only for autolabeler
 9 |   pull_request:
10 |     # Only following types are handled by the action, but one can default to all as well
11 |     types: [opened, reopened, synchronize]
12 | 
13 | jobs:
14 |   update_release_draft:
15 |     runs-on: ubuntu-latest
16 |     steps:
17 |       # (Optional) GitHub Enterprise requires GHE_HOST variable set
18 |       #- name: Set GHE_HOST
19 |       #  run: |
20 |       #    echo "GHE_HOST=${GITHUB_SERVER_URL##https:\/\/}" >> $GITHUB_ENV
21 | 
22 |       # Drafts your next Release notes as Pull Requests are merged into "master"
23 |       - uses: release-drafter/release-drafter@v5
24 |         # (Optional) specify config name to use, relative to .github/. Default: release-drafter.yml
25 |         # with:
26 |         #   config-name: my-config.yml
27 |         #   disable-autolabeler: true
28 |         env:
29 |           GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Falsy
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/MarkerLayer.tsx:
--------------------------------------------------------------------------------
 1 | import React, {createContext, ReactNode, useContext, useEffect} from 'react';
 2 | import {MapContext} from "./Map";
 3 | import {ClusterConfig} from './types';
 4 | 
 5 | export const MarkerLayerContext = createContext(null)
 6 | 
 7 | export interface MarkerLayerProps {
 8 |     children: ReactNode;
 9 |     enableClustering?: boolean;
10 |     clusterConfig?: ClusterConfig;
11 |     id?: string | null;
12 | }
13 | 
14 | const MarkerLayer = ({children, enableClustering, clusterConfig, id}: MarkerLayerProps) => {
15 |     const map = useContext<any>(MapContext)
16 |     const markerLayer = new window.SMap.Layer.Marker(id);
17 | 
18 |     if (enableClustering) {
19 |         const clusterer = new window.SMap.Marker.Clusterer(
20 |             map,
21 |             clusterConfig?.maxDistance,
22 |             clusterConfig?.clusterCtor
23 |         );
24 |         markerLayer.setClusterer(clusterer);
25 |     }
26 | 
27 |     map?.addLayer(markerLayer);
28 |     markerLayer.enable();
29 | 
30 | 
31 |     useEffect(() => {
32 |         return () => {
33 |             map.removeLayer(markerLayer)
34 |         };
35 |     })
36 | 
37 |     return <MarkerLayerContext.Provider value={markerLayer}>{children}</MarkerLayerContext.Provider>;
38 | }
39 | 
40 | export default MarkerLayer;


--------------------------------------------------------------------------------
/home/components/ScrollDown.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled, {keyframes} from "styled-components";
 3 | 
 4 | const animation = keyframes`
 5 |   0%,
 6 |   100%,
 7 |   20%,
 8 |   50%,
 9 |   80% {
10 |     transform: translateY(0);
11 |   }
12 |     
13 |   40% {
14 |     transform: translateY(-10px);
15 |   }
16 |   
17 |   60% {
18 |     transform: translateY(-5px);
19 |   }
20 | `
21 | 
22 | const Cmp = styled.a`
23 |   cursor: pointer;
24 |   opacity: 1;
25 |   transition: all .5s ease-in 3s;
26 |   position: absolute;
27 |   bottom: 30px;
28 |   left: 50%;
29 |   margin-left: -16px;
30 |   display: block;
31 |   width: 32px;
32 |   height: 32px;
33 |   border: 2px solid rgba(0,0,0,0.85);
34 |   background-size: 14px auto;
35 |   border-radius: 50%;
36 |   z-index: 2;
37 |   transform: scale(1);
38 |   animation: ${animation} 2s linear infinite;
39 | 
40 |   &:before {
41 |     position: absolute;
42 |     top: calc(50% - 8px);
43 |     left: calc(50% - 6px);
44 |     transform: rotate(-45deg);
45 |     display: block;
46 |     width: 11px;
47 |     height: 11px;
48 |     content: "";
49 |     border: 2px solid rgba(0,0,0,0.85);
50 |     border-width: 0px 0 2px 2px;
51 |   }
52 | `
53 | 
54 | const ScrollDown = ({ href }: { href: string }) => {
55 |   return (
56 |     <Cmp href={href}/>
57 |   );
58 | }
59 | 
60 | export default ScrollDown;


--------------------------------------------------------------------------------
/src/POILayer.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext} from 'react';
 2 | import {MapContext} from "./Map";
 3 | import BaseLayers from "./BaseLayers";
 4 | import {MarkerLayerOptions} from "./types";
 5 | 
 6 | export interface POILayerProps {
 7 |     id?: string | null;
 8 |     options?: MarkerLayerOptions;
 9 | }
10 | 
11 | const POILayer = (props: POILayerProps) => {
12 |     const map = useContext<any>(MapContext)
13 | 
14 |     const options = resolveOptions(props.options);
15 |     const poiLayer = new window.SMap.Layer.Marker(
16 |         props.id,
17 |         options,
18 |     );
19 |     map.addLayer(poiLayer).enable();
20 | 
21 |     try {
22 |         const dataProvider = map.createDefaultDataProvider();
23 |         dataProvider.setOwner(map);
24 |         dataProvider.addLayer(poiLayer);
25 |         dataProvider.setMapSet(BaseLayers.TURIST_NEW);
26 |         dataProvider.enable();
27 |     } catch (e) {
28 |         console.error(
29 |             "You are trying to use a POI layer without setting up the POI api."
30 |             + " You need to pass 'loaderApiConfig' with poi set to 'true' to the Map component to enable it."
31 |         );
32 |     }
33 | 
34 |     return null;
35 | }
36 | 
37 | function resolveOptions(options?: MarkerLayerOptions): MarkerLayerOptions {
38 |     return {
39 |         poiTooltip: true,
40 |         ...options,
41 |     };
42 | }
43 | 
44 | export default POILayer;


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | export * from './controls';
 2 | 
 3 | export {default as BaseLayers} from './BaseLayers';
 4 | export {default as Map } from './Map';
 5 | export {default as Marker} from './Marker';
 6 | export {default as MarkerLayer} from './MarkerLayer';
 7 | export {default as Path} from './Path';
 8 | export {default as PathLayer} from './PathLayer';
 9 | export {default as PathMarker} from './PathMarker';
10 | export {default as POILayer} from './POILayer';
11 | export {default as Polygon} from './Polygon';
12 | 
13 | export type {MapProps, MapEventListener} from './Map';
14 | export type {MarkerLayerProps} from './MarkerLayer';
15 | export type {PathProps} from './Path';
16 | export type {PathMarkerProps} from './PathMarker';
17 | export type {POILayerProps} from './POILayer';
18 | export type {PolygonProps} from './Polygon';
19 | export type {SMapProviderProps} from './SMapProvider';
20 | 
21 | export type {
22 |     MapEventType,
23 |     MapEvent,
24 |     Coordinates,
25 |     SMap,
26 |     SMapPixel,
27 |     SMapViewport,
28 |     MarkerCoords,
29 |     MarkerCardRender,
30 |     MarkerCardConfiguration,
31 |     CardPadding,
32 |     MarkerProps,
33 |     MarkerAnchor,
34 |     MarkerRender,
35 |     MarkerOptions,
36 |     GeometryOptions,
37 |     ClusterConfig,
38 |     LoaderApiConfig,
39 |     MarkerLayerOptions,
40 | } from './types';
41 | export {LineStyle} from './types';
42 | 


--------------------------------------------------------------------------------
/src/controls/MouseControl.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext, useEffect, useRef} from 'react';
 2 | import {MapContext} from '../Map';
 3 | 
 4 | export interface MouseControlProps {
 5 |   pan?: boolean;
 6 |   wheel?: boolean;
 7 |   zoom?: boolean;
 8 |   disabled?: boolean;
 9 | }
10 | 
11 | const MouseControl = (props: MouseControlProps) => {
12 |   const {pan, wheel, zoom, disabled} = props;
13 | 
14 |   const map = useContext<any>(MapContext);
15 |   const mouseControlRef = useRef(null);
16 | 
17 |   useEffect(() => {
18 |     const setup = () => {
19 |       if (mouseControlRef.current) {
20 |         map.removeControl(mouseControlRef.current);
21 |       }
22 | 
23 |       let mode = 0;
24 |       if (!disabled) {
25 |         mode |= pan && window.SMap.MOUSE_PAN;
26 |         mode |= zoom && window.SMap.MOUSE_ZOOM;
27 |         mode |= wheel && window.SMap.MOUSE_WHEEL;
28 |       }
29 | 
30 |       const newMouseControl = new window.SMap.Control.Mouse(mode);
31 | 
32 |       map.addControl(newMouseControl);
33 |       mouseControlRef.current = newMouseControl;
34 |     };
35 | 
36 |     setup();
37 | 
38 |     return () => {
39 |       map.removeControl(mouseControlRef.current);
40 |     };
41 |   });
42 | 
43 |   return null;
44 | };
45 | 
46 | MouseControl.defaultProps = {
47 |   pan: false,
48 |   wheel: false,
49 |   zoom: false,
50 |   disabled: false,
51 | };
52 | 
53 | export default MouseControl;
54 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 4 | 
 5 | module.exports = {
 6 |     entry: {
 7 |         app: path.join(__dirname, 'home', 'index.tsx')
 8 |     },
 9 |     target: 'web',
10 |     resolve: {
11 |         extensions: ['.ts', '.tsx', '.js']
12 |     },
13 |     module: {
14 |         rules: [
15 |             {
16 |                 test: /\.tsx?$/,
17 |                 use: [{
18 |                     loader: 'ts-loader',
19 |                     options: {
20 |                         configFile: "tsconfig.home.json"
21 |                     }
22 |                 }],
23 |                 exclude: /node_modules/,
24 |             }
25 |         ]
26 |     },
27 |     output: {
28 |         filename: '[name].js',
29 |         path: path.resolve(__dirname, 'home-static')
30 |     },
31 |     plugins: [
32 |         new ForkTsCheckerWebpackPlugin(),
33 |         new HtmlWebpackPlugin({
34 |             favicon: "./home/assets/favicon.ico",
35 |             template: path.join(__dirname, 'home', 'index.html')
36 |         })
37 |     ],
38 |     devServer: {
39 |         static: path.join(__dirname, 'home-static'),
40 |         compress: false,
41 |         port: 9000,
42 |         hot: true,
43 |         client: {
44 |             overlay: { errors: true, warnings: false },
45 |         },
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-mapycz",
 3 |   "version": "1.1.5",
 4 |   "description": "Mapy.cz in React.",
 5 |   "homepage": "http://falsy.cz/react-mapycz/",
 6 |   "main": "lib/index.js",
 7 |   "typings": "lib/index.d.ts",
 8 |   "scripts": {
 9 |     "prepublishOnly": "yarn build",
10 |     "start": "webpack serve --mode development",
11 |     "build": "rm -rf ./lib && tsc -p tsconfig.build.json",
12 |     "build:home": "webpack --mode production",
13 |     "predeploy": "yarn build:home",
14 |     "deploy": "NODE_DEBUG=gh-pages gh-pages -d home-static"
15 |   },
16 |   "files": [
17 |     "lib",
18 |     "src"
19 |   ],
20 |   "keywords": [
21 |     "react",
22 |     "maps",
23 |     "mapycz"
24 |   ],
25 |   "author": "Jakub Kolebaba <jakub@kolebaba.cz>",
26 |   "license": "MIT",
27 |   "dependencies": {
28 |     "styled-components": "^5.2.3"
29 |   },
30 |   "devDependencies": {
31 |     "@types/react": "^18.0.21",
32 |     "@types/react-dom": "^18.0.11",
33 |     "@types/react-syntax-highlighter": "^15.5.7",
34 |     "@types/styled-components": "^5.1.4",
35 |     "@types/webpack": "^5.0.0",
36 |     "fork-ts-checker-webpack-plugin": "^8.0.0",
37 |     "gh-pages": "^3.0.0",
38 |     "html-webpack-plugin": "^5.5.3",
39 |     "react": "^18.2.0",
40 |     "react-dom": "^18.2.0",
41 |     "react-github-btn": "^1.2.0",
42 |     "react-syntax-highlighter": "15.2.1",
43 |     "ts-loader": "^9.2.6",
44 |     "typescript": "5.2.2",
45 |     "webpack": "^5.88.2",
46 |     "webpack-cli": "^5.1.4",
47 |     "webpack-dev-server": "^4.15.1"
48 |   },
49 |   "peerDependencies": {
50 |     "react": ">=16.13.1",
51 |     "react-dom": ">=16.13.1"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/Path.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext} from 'react';
 2 | import {PathLayerContext} from "./PathLayer";
 3 | import {GeometryOptions} from './types';
 4 | 
 5 | interface Results {
 6 |   [key:string]: any;
 7 | }
 8 | 
 9 | export interface PathProps {
10 |   /**
11 |    * @deprecated use options.color
12 |    */
13 |   color?: string;
14 |   /**
15 |    * @deprecated use options.width
16 |    */
17 |   width?: number;
18 |   coords: Array<{ lng: number, lat: number }>
19 |   criterion?: 'fast' | 'short' | 'bike1' | 'bike2' | 'bike3' | 'turist1' | 'turist2'
20 |   dynamicRoute?: boolean;
21 |   options?: GeometryOptions;
22 |   id?: string;
23 | }
24 | 
25 | const Path = ({ coords, color, width, criterion, dynamicRoute, options, id }: PathProps) => {
26 |   const pathLayer = useContext<any>(PathLayerContext)
27 |   const points = coords.map(p => window.SMap.Coords.fromWGS84(p.lng, p.lat));
28 |   const geometryOptions = {
29 |     color,
30 |     width,
31 |     ...options,
32 |   };
33 |     
34 |   const getDynamicPath = (results: Results) => {
35 |     const newPoints = results && results.getResults().geometry;
36 |     const polyline = new window.SMap.Geometry(window.SMap.GEOMETRY_POLYLINE, id, newPoints, geometryOptions);
37 |     pathLayer?.addGeometry(polyline);
38 |   }
39 | 
40 |   if (dynamicRoute) {
41 |     new window.SMap.Route(points, getDynamicPath, { criterion: criterion });
42 |   } else {
43 |     const polyline = new window.SMap.Geometry(window.SMap.GEOMETRY_POLYLINE, id, points, geometryOptions);
44 |     pathLayer?.addGeometry(polyline);
45 |   }
46 | 
47 |   return null;
48 | }
49 | 
50 | Path.defaultProps = {
51 |   color: '#f00',
52 |   width: 3,
53 |   criterion: 'fast',
54 |   dynamicRoute: false,
55 |   options: {
56 |     color: '#f00',
57 |     width: 3,
58 |   }
59 | }
60 | 
61 | export default Path;


--------------------------------------------------------------------------------
/home/MapElement.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import { Map } from '../src'
 4 | import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 5 | import SyntaxHighlighter from 'react-syntax-highlighter'
 6 | import Section from './components/Section'
 7 | import ScrollDown from './components/ScrollDown'
 8 | 
 9 | const SMapElement = styled(Section)`
10 |   display: flex;
11 |   justify-content: space-evenly;
12 |   align-items: center;
13 | `;
14 | 
15 | const MapElement = () => {
16 |   const code = `
17 |     <Map height="200px" center={{lat: 50.0755, lng: 14.4378}} />
18 |   `
19 |   return (
20 |     <SMapElement id="section-map">
21 |       <div style={{width: '50%'}}>
22 |         <h2>Map</h2>
23 |         <p>Map is a main element of react-mapycz library.</p>
24 |         <p>Available properties:</p>
25 |         <ul>
26 |           <li>center: <i>optional</i> Center coords</li>
27 |           <li>width: <i>optional</i> Element width, defaults to 100%</li>
28 |           <li>height: <i>optional</i> Element height, defaults to 300px</li>
29 |           <li>zoom: <i>optional</i> Default map zoom, defaults to 13</li>
30 |           <li>minZoom: <i>optional</i> Minimal map zoom, defaults to 1</li>
31 |           <li>maxZoom: <i>optional</i> Max map zoom, defaults to 21</li>
32 |           <li>baseLayer: <i>optional</i> Map layer, value from <a target="_blank" href="https://github.com/flsy/react-mapycz/blob/master/src/BaseLayers.tsx">BaseLayers</a> enum</li>
33 |         </ul>
34 |       </div>
35 |       <div style={{width: '40%'}}>
36 |         <Map height="300px" center={{lat: 50.0755, lng: 14.4378}} />
37 |         <SyntaxHighlighter
38 |           language="jsx"
39 |           wrapLongLines={true}
40 |           style={githubGist}
41 |         >
42 |           {code}
43 |         </SyntaxHighlighter>
44 |       </div>
45 |       <ScrollDown href="#section-element" />
46 |     </SMapElement>
47 |   )
48 | }
49 | 
50 | export default MapElement;
51 | 


--------------------------------------------------------------------------------
/home/Home.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
 3 | import SyntaxHighlighter from "react-syntax-highlighter";
 4 | import styled from "styled-components";
 5 | import {Map} from "../src";
 6 | import Section from "./components/Section";
 7 | import GitHubButton from 'react-github-btn';
 8 | import ScrollDown from "./components/ScrollDown";
 9 | 
10 | const code = `
11 |   <Map height="200px" />
12 | `
13 | 
14 | const SHome = styled(Section)`
15 |   display: flex;
16 |   justify-content: space-evenly;
17 |   align-items: center;
18 | `;
19 | 
20 | const SGettingStarted = styled.div`
21 |   margin-top: 1em;
22 | `
23 | 
24 | const Home = () => {
25 |   return (
26 |     <SHome>
27 |       <div style={{width: '40%'}}>
28 |         <h1>react-mapycz</h1>
29 |         <p>Easy-to-use integration of Mapy.cz into React using Mapy.cz API.</p>
30 |         <GitHubButton href="https://github.com/flsy/react-mapycz" data-icon="octicon-star" data-size="large" data-show-count={true} aria-label="Star flsy/react-mapycz on GitHub">Star</GitHubButton>
31 |         <SGettingStarted>
32 |           <strong>Getting started</strong>
33 |           <p>Install library and peer dependencies</p>
34 |           <SyntaxHighlighter language="bash" style={githubGist}>
35 |             npm i react-mapycz react-dom@16.13.1 react@16.13.1
36 |           </SyntaxHighlighter>
37 |           <p>or</p>
38 |           <SyntaxHighlighter language="bash" style={githubGist}>
39 |             yarn add react-mapycz react-dom@16.13.1 react@16.13.1
40 |           </SyntaxHighlighter>
41 |         </SGettingStarted>
42 |       </div>
43 |       <div style={{ width: '40%' }}>
44 |         <Map height="200px" />
45 |         <SyntaxHighlighter
46 |           language="jsx"
47 |           wrapLongLines={true}
48 |           style={githubGist}
49 |         >
50 |           {code}
51 |         </SyntaxHighlighter>
52 |       </div>
53 |       <ScrollDown href="#section-map" />
54 |     </SHome>
55 |   )
56 | }
57 | 
58 | export default Home;
59 | 


--------------------------------------------------------------------------------
/src/Marker.tsx:
--------------------------------------------------------------------------------
 1 | import {useContext, useEffect} from 'react';
 2 | import {MarkerLayerContext} from "./MarkerLayer";
 3 | import {isMarkerCardRender, isMarkerRender, MarkerCardRender, MarkerProps, MarkerRender} from './types'
 4 | import {renderToStaticMarkup} from 'react-dom/server'
 5 | 
 6 | const Marker = (props: MarkerProps) => {
 7 |     const markerLayer = useContext<any>(MarkerLayerContext);
 8 | 
 9 |     const renderMarkerUrl = (url?: string | Element | MarkerRender) => {
10 |         if (isMarkerRender(url)) {
11 |             const marker = document.createElement('div');
12 |             marker.innerHTML = renderToStaticMarkup(url(props));
13 |             return marker;
14 |         }
15 | 
16 |         return url;
17 |     };
18 | 
19 |     const resolveOptions = () => {
20 |         const options = props.options;
21 |         if (!options) {
22 |             return undefined;
23 |         }
24 |         if (!options.url) {
25 |             return options;
26 |         }
27 |         return {
28 |             ...options,
29 |             url: renderMarkerUrl(options.url),
30 |         };
31 |     };
32 | 
33 |     const renderCardPart = (container: any, content?: string | MarkerCardRender) => {
34 |         if (content) {
35 |             container.innerHTML = isMarkerCardRender(content)
36 |                 ? renderToStaticMarkup(content(props.coords))
37 |                 : content;
38 |         }
39 |     };
40 | 
41 |     const renderCard = () => {
42 |         const card = new window.SMap.Card();
43 | 
44 |         const cardWidth = props.card?.options?.width;
45 |         const cardHeight = props.card?.options?.height;
46 |         if (cardWidth && cardHeight) {
47 |             card.setSize(cardWidth, cardHeight);
48 |         }
49 | 
50 |         renderCardPart(card.getHeader(), props.card?.header);
51 |         renderCardPart(card.getBody(), props.card?.body);
52 |         renderCardPart(card.getFooter(), props.card?.footer);
53 | 
54 |         sMarker.decorate(window.SMap.Marker.Feature.Card, card);
55 |     };
56 | 
57 |     const { lng, lat } = props.coords;
58 |     const coords = window.SMap.Coords.fromWGS84(lng, lat);
59 |     const options = resolveOptions();
60 |     const sMarker = new window.SMap.Marker(coords, props.id, options);
61 | 
62 |     useEffect(() => {
63 |         markerLayer?.addMarker(sMarker);
64 | 
65 |         if (props.card) {
66 |             renderCard();
67 |         }
68 | 
69 |         return () => {
70 |             markerLayer.removeMarker(sMarker, true);
71 |         };
72 |     }, [markerLayer, props.card, sMarker]);
73 | 
74 |     return null;
75 | };
76 | 
77 | Marker.defaultProps = {
78 |     id: false,
79 | };
80 | 
81 | export default Marker;
82 | 


--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
 1 | # For most projects, this workflow file will not need changing; you simply need
 2 | # to commit it to your repository.
 3 | #
 4 | # You may wish to alter this file to override the set of languages analyzed,
 5 | # or to provide custom queries or build logic.
 6 | #
 7 | # ******** NOTE ********
 8 | # We have attempted to detect the languages in your repository. Please check
 9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 | 
14 | on:
15 |   push:
16 |     branches: [ master ]
17 |   pull_request:
18 |     # The branches below must be a subset of the branches above
19 |     branches: [ master ]
20 |   schedule:
21 |     - cron: '34 6 * * 2'
22 | 
23 | jobs:
24 |   analyze:
25 |     name: Analyze
26 |     runs-on: ubuntu-latest
27 |     permissions:
28 |       actions: read
29 |       contents: read
30 |       security-events: write
31 | 
32 |     strategy:
33 |       fail-fast: false
34 |       matrix:
35 |         language: [ 'javascript' ]
36 |         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
37 |         # Learn more:
38 |         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
39 | 
40 |     steps:
41 |     - name: Checkout repository
42 |       uses: actions/checkout@v3
43 | 
44 |     # Initializes the CodeQL tools for scanning.
45 |     - name: Initialize CodeQL
46 |       uses: github/codeql-action/init@v2
47 |       with:
48 |         languages: ${{ matrix.language }}
49 |         # If you wish to specify custom queries, you can do so here or in a config file.
50 |         # By default, queries listed here will override any specified in a config file.
51 |         # Prefix the list here with "+" to use these queries and those in the config file.
52 |         # queries: ./path/to/local/query, your-org/your-repo/queries@main
53 | 
54 |     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
55 |     # If this step fails, then you should remove it and run the build manually (see below)
56 |     - name: Autobuild
57 |       uses: github/codeql-action/autobuild@v2
58 | 
59 |     # ℹ️ Command-line programs to run using the OS shell.
60 |     # 📚 https://git.io/JvXDl
61 | 
62 |     # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
63 |     #    and modify them (or add more) to build your code if your project
64 |     #    uses a compiled language
65 | 
66 |     #- run: |
67 |     #   make bootstrap
68 |     #   make release
69 | 
70 |     - name: Perform CodeQL Analysis
71 |       uses: github/codeql-action/analyze@v2
72 | 


--------------------------------------------------------------------------------
/home/RouteInfo.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useCallback, useEffect } from "react";
 2 | import styled from "styled-components";
 3 | import SyntaxHighlighter from "react-syntax-highlighter";
 4 | import { githubGist } from "react-syntax-highlighter/dist/esm/styles/hljs";
 5 | import SMapProvider from "../src/SMapProvider";
 6 | import Section from "./components/Section";
 7 | import { getRouteInfo, RouteInfoResultProps } from "../src/helperFunctions";
 8 | 
 9 | const SRouteInfo = styled(Section)`
10 |   display: flex;
11 |   justify-content: space-evenly;
12 |   align-items: center;
13 | `;
14 | 
15 | const code = `
16 |   const [routeInfo, setRouteInfo] = useState<null | RouteInfoProps>(null);
17 | 
18 |   const fetchRouteInfo = useCallback(async () => {
19 |     const info = await getRouteInfo([
20 |       { lat: 49.5329453, lng: 18.5110686 },
21 |       { lat: 49.5440406, lng: 18.4509133 },
22 |       { lat: 49.5457367, lng: 18.4479764 },
23 |     ], {
24 |       geometry: true,
25 |       itinerary: true,
26 |       altitude: true,
27 |       criterion: "turist2",
28 |     } as any);
29 |     setRouteInfo(info);
30 |   }, []);
31 | 
32 |   useEffect(() => {
33 |     fetchRouteInfo();
34 |   }, []);
35 | `;
36 | 
37 | const coords = [
38 |   { lat: 49.5329453, lng: 18.5110686 },
39 |   { lat: 49.5440406, lng: 18.4509133 },
40 |   { lat: 49.5457367, lng: 18.4479764 },
41 | ];
42 | 
43 | const params = {
44 |   geometry: true,
45 |   itinerary: true,
46 |   altitude: true,
47 |   criterion: "turist2",
48 | };
49 | 
50 | const RouteInfo = () => {
51 |   const [routeInfo, setRouteInfo] = useState<null | RouteInfoResultProps>(null);
52 | 
53 |   const fetchRouteInfo = useCallback(async () => {
54 |     const info = await getRouteInfo(coords, params as any);
55 |     setRouteInfo(info);
56 |   }, []);
57 | 
58 |   useEffect(() => {
59 |     fetchRouteInfo();
60 |   }, []);
61 | 
62 |   return (
63 |     <SRouteInfo id="section-info">
64 |       <div style={{ width: "40%" }}>
65 |         <SyntaxHighlighter
66 |           language="javascript"
67 |           wrapLongLines={true}
68 |           style={githubGist}
69 |         >
70 |           {code}
71 |         </SyntaxHighlighter>
72 |       </div>
73 |       <div style={{ width: "50%" }}>
74 |         <h1>Route info</h1>
75 |         Get basic information about your route.
76 |         <h2>Available data:</h2>
77 |         <p>Id: {routeInfo?.id}</p>
78 |         <p>Descent: {routeInfo?.descent} [m]</p>
79 |         <p>Ascent: {routeInfo?.ascent} [m]</p>
80 |         <p>
81 |           In Europe (not in Czech republic): {routeInfo?.inEurope?.toString()}
82 |         </p>
83 |         <p>Length: {routeInfo?.length} [m]</p>
84 |         <p>Time: {routeInfo?.time} [s]</p>
85 |         <p>URL:</p>{" "}
86 |         <a href={routeInfo?.url} target="_blank" rel="noopener noreferrer">
87 |           {routeInfo?.url}
88 |         </a>
89 |       </div>
90 |     </SRouteInfo>
91 |   );
92 | };
93 | 
94 | export default SMapProvider(RouteInfo);
95 | 


--------------------------------------------------------------------------------
/src/Map.tsx:
--------------------------------------------------------------------------------
 1 | import React, {createContext, useEffect, useImperativeHandle, useRef, useState} from 'react';
 2 | import BaseLayers from './BaseLayers';
 3 | import SMapProvider from "./SMapProvider";
 4 | import styled from 'styled-components'
 5 | import {Coordinates, MapEvent, SMap} from './types';
 6 | 
 7 | export const MapContext = createContext(null)
 8 | 
 9 | export type MapEventListener = (e: MapEvent, coordinates: Coordinates) => void
10 | 
11 | export interface MapProps {
12 |   center?: { lat: number, lng: number };
13 |   width?: string;
14 |   height?: string;
15 |   zoom?: number;
16 |   minZoom?: number;
17 |   maxZoom?: number;
18 |   baseLayer?: BaseLayers;
19 |   children?: React.ReactNode;
20 |   onEvent?: MapEventListener;
21 |   eventNameListener?: string;
22 |   animateCenterZoom?: boolean;
23 |   mapRef?: React.RefObject<SMap>;
24 | }
25 | 
26 | // Override PreflightCSS presets
27 | const StyledMap = styled.div`
28 |   img {
29 |     max-width: initial !important;
30 |   }
31 | `
32 | 
33 | const handleEventListener = (e: MapEvent, sMap: unknown, onEvent: MapEventListener) => {
34 |   const coordinates = (e?.data?.event)
35 |     ? window.SMap.Coords.fromEvent(e.data.event, sMap)
36 |     : null;
37 |   onEvent(e, coordinates)
38 | }
39 | 
40 | const Map = (props: MapProps) => {
41 |   const mapNode = useRef(null);
42 |   const [map, setMap] = useState<any>(null);
43 |   const {width, height, children, onEvent, eventNameListener = "*", zoom, center, animateCenterZoom} = props;
44 | 
45 |   useEffect(() => {
46 |     if (!map && mapNode) {
47 |       const centerCoords = center ? window.SMap.Coords.fromWGS84(center.lng, center.lat) : undefined;
48 |       const sMap = new window.SMap(mapNode.current, centerCoords, zoom);
49 |       const l = sMap.addDefaultLayer(props.baseLayer ?? BaseLayers.TURIST_NEW);
50 |       l.enable();
51 | 
52 |       setMap(sMap);
53 |       if (onEvent) {
54 |         const signals = sMap.getSignals();
55 |         const eventListenerId = signals.addListener(window, eventNameListener, (e: MapEvent) => handleEventListener(e, sMap, onEvent));
56 |         return () => {
57 |           signals.removeListener(eventListenerId)
58 |         }
59 |       }
60 |     }
61 |     return
62 |   }, []);
63 | 
64 |   useEffect(() => {
65 |     if (map && center) {
66 |       const centerCoords = window.SMap.Coords.fromWGS84(center.lng, center.lat);
67 |       map.setCenter(centerCoords, animateCenterZoom);
68 |       zoom !== undefined && map.setZoom(zoom)
69 |     }
70 |   }, [center, zoom, map]);
71 | 
72 |   useImperativeHandle(props.mapRef, () => map);
73 | 
74 |   return (
75 |       <MapContext.Provider value={map}>
76 |         <StyledMap style={{width, height}} ref={mapNode}>
77 |           {map && children}
78 |         </StyledMap>
79 |       </MapContext.Provider>
80 |   );
81 | };
82 | 
83 | Map.defaultProps = {
84 |   width: '100%',
85 |   height: '300px',
86 |   zoom: 13,
87 |   minZoom: 1,
88 |   maxZoom: 21,
89 |   animateCenterZoom: false,
90 | }
91 | 
92 | export default SMapProvider(Map);
93 | 


--------------------------------------------------------------------------------
/home/DynamicRoute.tsx:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react';
 2 | import styled from "styled-components";
 3 | import {Coordinates, Map, MapEvent, Path, PathLayer} from "../src";
 4 | import {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
 5 | import SyntaxHighlighter from "react-syntax-highlighter";
 6 | import Section from "./components/Section";
 7 | import {Radio, RadioGroup} from "./components/Radio";
 8 | import ScrollDown from './components/ScrollDown'
 9 | 
10 | const SDynamicRoute = styled(Section)`
11 |   display: flex;
12 |   justify-content: space-evenly;
13 |   align-items: center;
14 | `;
15 | 
16 | const DynamicRoute = () => {
17 |   const [criterion, setCriterion] = useState<string>('fast');
18 | 
19 |   const code = `
20 |     <Map height="200px" center={{lat: 49.536, lng: 18.499}} zoom={12}>
21 |       <PathLayer>
22 |         <Path
23 |           coords={[
24 |             { 'lat': 49.5329453, 'lng': 18.5110686 },
25 |             { 'lat': 49.5440406, 'lng': 18.4509133 },
26 |             { 'lat': 49.5457367, 'lng': 18.4479764 }
27 |           ]}
28 |           criterion="${criterion}"
29 |           dynamicRoute={true}
30 |         />
31 |       </PathLayer>
32 |     </Map>
33 |   `
34 |   const onMapEvent = (e: MapEvent, coordinates: Coordinates) => { 
35 |     if(e.type === "map-click") {
36 |       console.log("Clicked", coordinates)
37 |     }
38 |   }
39 | 
40 |   return (
41 |     <SDynamicRoute id="section-dynamic">
42 |       <div style={{ width: '50%' }}>
43 |         <h2>Dynamic routes</h2>
44 |         <p>Don't worry about route computations. Just mark your path as "dynamicRoute" and select desired criterion.</p>
45 |         <strong>Available criterions:</strong>
46 |         <RadioGroup onClickRadioButton={setCriterion} selectedValue={criterion}>
47 |           <Radio value="fast" labelText="fast" />
48 |           <Radio value="short" labelText="short" />
49 |           <Radio value="bike1" labelText="bike1" />
50 |           <Radio value="bike2" labelText="bike2" />
51 |           <Radio value="bike3" labelText="bike3" />
52 |           <Radio value="turist1" labelText="turist1" />
53 |           <Radio value="turist2" labelText="turist2" />
54 |         </RadioGroup>
55 |       </div>
56 |       <div style={{width: '40%'}}>
57 |         <Map height="200px" center={{lat: 49.536, lng: 18.499}} zoom={12} onEvent={onMapEvent}>
58 |           <PathLayer>
59 |             <Path
60 |               coords={[
61 |                 {'lat': 49.5329453, 'lng': 18.5110686},
62 |                 {'lat': 49.5440406, 'lng': 18.4509133},
63 |                 {'lat': 49.5457367, 'lng': 18.4479764}
64 |               ]}
65 |               criterion={criterion as any}
66 |               dynamicRoute={true}
67 |             />
68 |           </PathLayer>
69 |         </Map>
70 |         <SyntaxHighlighter
71 |           language="jsx"
72 |           wrapLongLines={true}
73 |           style={githubGist}
74 |         >
75 |           {code}
76 |         </SyntaxHighlighter>
77 |       </div>
78 |       <ScrollDown href="#section-polygons" />
79 |     </SDynamicRoute>
80 |   )
81 | }
82 | 
83 | export default DynamicRoute;
84 | 


--------------------------------------------------------------------------------
/home/Polygons.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from "styled-components";
 3 | import {Coordinates, Map, MapEvent, MouseControl, PathLayer, Polygon, LineStyle} from "../src";
 4 | import {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
 5 | import SyntaxHighlighter from "react-syntax-highlighter";
 6 | import Section from "./components/Section";
 7 | import ScrollDown from './components/ScrollDown'
 8 | 
 9 | const SPolygons = styled(Section)`
10 |   display: flex;
11 |   justify-content: space-evenly;
12 |   align-items: center;
13 | `;
14 | 
15 | const Polygons = () => {
16 | 
17 |   const code = `
18 |     <Map height="200px" center={{lat: 49.536, lng: 18.499}} zoom={12}>
19 |       <PathLayer>
20 |         <Polygon
21 |           id="test_123"
22 |           coords={[
23 |             {'lat': 49.8085347, 'lng': 13.9619694},
24 |             {'lat': 49.7628714, 'lng': 14.0017947},
25 |             {'lat': 49.7004722, 'lng': 13.9310167},
26 |             {'lat': 49.6825242, 'lng': 13.9839419},
27 |             {'lat': 49.6118331, 'lng': 13.8816319},
28 |             {'lat': 49.6274028, 'lng': 13.6976108},
29 |           ]}
30 |           options={{
31 |             width: 10,
32 |             color: "red",
33 |             outlineColor: "blue",
34 |             opacity: 0.5,
35 |             outlineStyle: LineStyle.dashDot,
36 |           }}
37 |         />
38 |       </PathLayer>
39 |     </Map>
40 |   `
41 |   const onPolygonClicked = (e: MapEvent, coordinates: Coordinates) => { 
42 |     console.log(`Polygon ${e.target._id} clicked`, coordinates)
43 |   }
44 | 
45 |   return (
46 |     <SPolygons id="section-polygons">
47 |       <div style={{width: '40%'}}>
48 |         <Map height="300px" center={{lat: 49.7040667, lng: 13.8301333}} zoom={10} onEvent={onPolygonClicked} eventNameListener="geometry-click">
49 |           <MouseControl zoom={true} pan={true} wheel={true}/>
50 |           <PathLayer>
51 |             <Polygon
52 |               id="test_123"
53 |               coords={[
54 |                 {'lat': 49.8085347, 'lng': 13.9619694},
55 |                 {'lat': 49.7628714, 'lng': 14.0017947},
56 |                 {'lat': 49.7004722, 'lng': 13.9310167},
57 |                 {'lat': 49.6825242, 'lng': 13.9839419},
58 |                 {'lat': 49.6118331, 'lng': 13.8816319},
59 |                 {'lat': 49.6274028, 'lng': 13.6976108},
60 |               ]}
61 |               options={{
62 |                 width: 10,
63 |                 color: "red",
64 |                 outlineColor: "blue",
65 |                 opacity: 0.5,
66 |                 outlineStyle: LineStyle.dashDot,
67 |               }}
68 |             />
69 |           </PathLayer>
70 |         </Map>
71 |         <SyntaxHighlighter
72 |           language="jsx"
73 |           wrapLongLines={true}
74 |           style={githubGist}
75 |         >
76 |           {code}
77 |         </SyntaxHighlighter>
78 |       </div>
79 |       <div style={{ width: '50%' }}>
80 |         <h2>Polygons</h2>
81 |         <p>Show polygons in the map with customizable styles.</p>
82 |         <p>Clicking to polygons can be captured by listening on geometry-click event and identified by id prop.</p>
83 |       </div>
84 |       <ScrollDown href="#section-info" />
85 |     </SPolygons>
86 |   )
87 | }
88 | 
89 | export default Polygons;
90 | 


--------------------------------------------------------------------------------
/home/components/Radio.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import styled from "styled-components";
  3 | 
  4 | export const RadioGroup = ({name, selectedValue, onClickRadioButton, children, ...rest}: any) => {
  5 |   return (
  6 |     <div role="radiogroup" {...rest}>
  7 |       {React.Children.map(children, element =>
  8 |         // @ts-ignore
  9 |         React.cloneElement(element, {
 10 |           // @ts-ignore
 11 |           ...element.props,
 12 |           // @ts-ignore
 13 |           checked: selectedValue === element.props.labelText,
 14 |           // @ts-ignore
 15 |           onChange: () => onClickRadioButton(element.props.labelText),
 16 |           name
 17 |         })
 18 |       )}
 19 |     </div>
 20 |   );
 21 | }
 22 | 
 23 | export const Radio = ({onChange, value, labelText, checked, name}: any) => {
 24 |   return (
 25 |     <Root>
 26 |       <label>
 27 |         {labelText}
 28 |         <Input
 29 |           type="radio"
 30 |           onChange={onChange}
 31 |           name={name}
 32 |           value={value}
 33 |           checked={checked}
 34 |           aria-checked={checked}
 35 |         />
 36 |         <Fill/>
 37 |         {/* <div style={{ marginLeft: '25px' }}>{labelText}</div> */}
 38 |       </label>
 39 |     </Root>
 40 |   )
 41 | }
 42 | 
 43 | const Root = styled.div<any>`
 44 |   margin: 5px;
 45 |   cursor: pointer;
 46 |   width: ${props => (props.size ? props.size : 20)}px;
 47 |   height: ${props => (props.size ? props.size : 20)}px;
 48 |   position: relative;
 49 |   label {
 50 |     margin-left: 25px;
 51 |   }
 52 |   &::before {
 53 |     content: "";
 54 |     border-radius: 100%;
 55 |     border: 1px solid ${props => (props.borderColor ? props.borderColor : "#DDD")};
 56 |     background: ${props => props.backgroundColor ? props.backgroundColor : "#FAFAFA"};
 57 |     width: 100%;
 58 |     height: 100%;
 59 |     position: absolute;
 60 |     top: 0;
 61 |     box-sizing: border-box;
 62 |     pointer-events: none;
 63 |     z-index: 0;
 64 |   }
 65 | `;
 66 | 
 67 | const Fill = styled.div<any>`
 68 |   background: ${props => (props.fillColor ? props.fillColor : "#A475E4")};
 69 |   width: 0;
 70 |   height: 0;
 71 |   border-radius: 100%;
 72 |   position: absolute;
 73 |   top: 50%;
 74 |   left: 50%;
 75 |   transform: translate(-50%, -50%);
 76 |   transition: width 0.2s ease-in, height 0.2s ease-in;
 77 |   pointer-events: none;
 78 |   z-index: 1;
 79 | 
 80 |   &::before {
 81 |     content: "";
 82 |     opacity: 0;
 83 |     width: calc(20px - 4px);
 84 |     position: absolute;
 85 |     height: calc(20px - 4px);
 86 |     top: 50%;
 87 |     left: 50%;
 88 |     transform: translate(-50%, -50%);
 89 |     border: 1px solid
 90 |       ${props => (props.borderActive ? props.borderActive : "#A475E4")};
 91 |     border-radius: 100%;
 92 |   }
 93 | `;
 94 | 
 95 | const Input = styled.input`
 96 |   opacity: 0;
 97 |   z-index: 2;
 98 |   position: absolute;
 99 |   top: 0;
100 |   width: 100%;
101 |   height: 100%;
102 |   margin: 0;
103 |   cursor: pointer;
104 | 
105 |   &:focus {
106 |     outline: none;
107 |   }
108 | 
109 |   &:checked {
110 |     & ~ ${Fill} {
111 |       width: calc(100% - 8px);
112 |       height: calc(100% - 8px);
113 |       transition: width 0.2s ease-out, height 0.2s ease-out;
114 | 
115 |       &::before {
116 |         opacity: 1;
117 |         transition: opacity 1s ease;
118 |       }
119 |     }
120 |   }
121 | `;


--------------------------------------------------------------------------------
/home/Element.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styled from "styled-components";
 3 | import {
 4 |   CompassControl,
 5 |   KeyboardControl,
 6 |   LayoutControl,
 7 |   MouseControl,
 8 |   SyncControl,
 9 |   ZoomControl,
10 | } from '../src/controls'
11 | import { BaseLayers, Map, Marker, MarkerLayer } from '../src'
12 | import {githubGist} from "react-syntax-highlighter/dist/esm/styles/hljs";
13 | import SyntaxHighlighter from "react-syntax-highlighter";
14 | import Section from "./components/Section";
15 | import ScrollDown from "./components/ScrollDown";
16 | 
17 | const SElement = styled(Section)`
18 |   display: flex;
19 |   justify-content: space-evenly;
20 |   align-items: center;
21 | `;
22 | 
23 | const Element = () => {
24 |   const code = `
25 |     <Map height="200px" center={{lat: 50.0755, lng: 14.4378}}>
26 |       <KeyboardControl/>
27 |       <ZoomControl/>
28 |       <MouseControl zoom={true} pan={true} wheel={true}/>
29 |       <CompassControl right={10} top={50}/>
30 |       <SyncControl />
31 |       <LayoutControl layers={[BaseLayers.HISTORIC, BaseLayers.SMART_BASE, BaseLayers.GEOGRAPHY]} top={10} left={10} />
32 |       <MarkerLayer>
33 |         <Marker coords={{lat: 50.0755, lng: 14.4378}} card={markerCard}/>
34 |       </MarkerLayer>
35 |     </Map>
36 |   `
37 | 
38 |   const markerCard = {
39 |     header: "<strong>Card header</strong>",
40 |     body: "<p>Card body</p><img src='https://via.placeholder.com/150x60/454545/eb4034'/>",
41 |     footer: "Card footer",
42 |     options: {
43 |       width: 200,
44 |       height: 200,
45 |     }
46 |   }
47 | 
48 |   return (
49 |     <SElement id="section-element">
50 |       <div style={{width: '40%'}}>
51 |         <Map height="300px" center={{lat: 50.0755, lng: 14.4378}}>
52 |           <KeyboardControl/>
53 |           <ZoomControl/>
54 |           <MouseControl zoom={true} pan={true} wheel={true}/>
55 |           <CompassControl right={10} top={50}/>
56 |           <SyncControl />
57 |           <LayoutControl layers={[BaseLayers.HISTORIC, BaseLayers.SMART_BASE, BaseLayers.GEOGRAPHY]} top={10} left={10} />
58 |           <MarkerLayer>
59 |             <Marker coords={{lat: 50.0755, lng: 14.4378}} card={markerCard} />
60 |           </MarkerLayer>
61 |         </Map>
62 |         <SyntaxHighlighter
63 |           language="jsx"
64 |           wrapLongLines={true}
65 |           style={githubGist}
66 |         >
67 |           {code}
68 |         </SyntaxHighlighter>
69 |       </div>
70 |       <div style={{width: '50%'}}>
71 |         <h2>Elements</h2>
72 |         <p>Various elements are ready to use. It's up to you how you combine them.</p>
73 |         <div>
74 |           <strong>Controls</strong>
75 |           <ul>
76 |             <li><a href="https://github.com/flsy/react-mapycz#keyboard-control" target="_blank" title="Keyboard control readme">KeyboardControl</a></li>
77 |             <li><a href="https://github.com/flsy/react-mapycz#mouse-control" target="_blank" title="Mouse control readme">MouseControl</a></li>
78 |             <li><a href="https://github.com/flsy/react-mapycz#compass-control" target="_blank" title="Compass control readme">CompassControl</a></li>
79 |             <li>ZoomControl</li>
80 |             <li><a href="https://github.com/flsy/react-mapycz#sync-control" target="_blank" title="Sync control readme">SyncControl</a></li>
81 |           </ul>
82 |         </div>
83 |         <div>
84 |           <strong>Marks</strong>
85 |           <ul>
86 |             <li><a href="https://github.com/flsy/react-mapycz#markers" target="_blank" title="Marker readme">Marker</a></li>
87 |             <li><a href="https://github.com/flsy/react-mapycz#path" target="_blank" title="Path readme">Path</a></li>
88 |             <li><a href="https://github.com/flsy/react-mapycz#poi-layer" target="_blank" title="POI readme">POI</a></li>
89 |           </ul>
90 |         </div>
91 |       </div>
92 |       <ScrollDown href="#section-dynamic" />
93 |     </SElement>
94 |   )
95 | }
96 | 
97 | export default Element;
98 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-mapycz
  2 | 
  3 | ![Node.js CI](https://github.com/flsy/react-mapycz/workflows/Node.js%20CI/badge.svg)
  4 | [![Maintainability](https://api.codeclimate.com/v1/badges/8c2fb679fd2700b53a83/maintainability)](https://codeclimate.com/github/flsy/react-mapycz/maintainability)
  5 | 
  6 | Mapy.cz in React
  7 | 
  8 | # Installation
  9 | 
 10 | `yarn add react-mapycz` or `npm i react-mapycz`
 11 | 
 12 | # Demo
 13 | 
 14 | https://kolebjak.github.io/react-mapycz/
 15 | 
 16 | # Run preview
 17 | - Install: `yarn`
 18 | - Run preview: `yarn start`
 19 | - Previre will be available on http://localhost:9000/
 20 | 
 21 | # Usage 
 22 | 
 23 | ## Map
 24 | Show a simple map. 
 25 | ```javascript
 26 | import { Map } from 'react-mapycz'
 27 | 
 28 | const App = () => <Map />
 29 | ```
 30 | 
 31 | You can pass `center` prop to the `Map` to set default view coordinates. 
 32 | ex. `center={{lat: 55.604890000000005, lng: 8.97171}}`
 33 | 
 34 | ## Markers
 35 | 
 36 | Show markers on a map. Markers have to be wrapped in MarkerLayer. 
 37 | 
 38 | ```javascript
 39 | import { Map, MarkerLayer, Marker } from 'react-mapycz'
 40 | 
 41 | const App = () => (
 42 |     <Map center={{lat: 55.604890000000005, lng: 8.97171}}>
 43 |         <MarkerLayer>
 44 |             <Marker coords={{lat: 55.60501000000001, lng: 8.97171}} />
 45 |             <Marker coords={{lat: 55.547290000000004, lng: 8.897590000000001}} />
 46 |         </MarkerLayer>
 47 |     </Map>
 48 | )
 49 | ```
 50 | 
 51 | ### Marker card
 52 | 
 53 | You can display marker card on marker click. There are two approaches:
 54 | 
 55 | **Use string to render card items**<br>
 56 | ```typescript jsx
 57 | <Marker 
 58 |   coords={{lat: 50.0755, lng: 14.4378}} 
 59 |   card={{
 60 |     header: "<strong>Card header</strong>",
 61 |     body: "<p>Card body</p><img src='https://via.placeholder.com/150x60/454545/eb4034'/>",
 62 |     footer: "Card footer",
 63 |     options: {
 64 |       width: 200,
 65 |       height: 200,
 66 |     }
 67 |   }} 
 68 | />
 69 | ```
 70 | 
 71 | **Use your custom function to render card items.**<br>
 72 | ```typescript jsx
 73 | <Marker
 74 |   coords={{lat: 50.0755, lng: 14.4378}}
 75 |   card={{
 76 |     header: ({ lat, lng }) => <strong>Card header {lat} {lng}</strong>,
 77 |     body:  ({ lat, lng }) => <><p>Card body {lat} {lng}</p><img src='https://via.placeholder.com/150x60/454545/eb4034'/></>,
 78 |     footer: "Card footer",
 79 |     options: {
 80 |       width: 200,
 81 |       height: 200,
 82 |     }
 83 |   }}
 84 | />
 85 | ```
 86 | 
 87 | ## Path
 88 | 
 89 | Displays a path from list of { lat, lng }. 
 90 | 
 91 | ```javascript
 92 | import { Map, PathLayer, Path } from 'react-mapycz'
 93 | 
 94 | const App = () => (
 95 |     <Map>
 96 |         <PathLayer>
 97 |             <Path coords={[
 98 |                     {'lat': 55.604890000000005, 'lng': 8.97171},
 99 |                     {'lat': 55.60501000000001, 'lng': 8.97179},
100 |                     {'lat': 55.605070000000005, 'lng': 8.971820000000001},
101 |                     {'lat': 55.60512000000001, 'lng': 8.97183}, 
102 |                     {'lat': 55.60517, 'lng': 8.971810000000001}
103 |                 ]} 
104 |             />
105 |         </PathLayer>
106 |     </Map>
107 | )
108 | ```
109 | 
110 | ## Controls
111 | 
112 | ### Compass control
113 | 
114 | Display control compass on the map and control the movement by clicking on it. 
115 | ```javascript
116 | import { Map, CompassControl } from 'react-mapycz'
117 | 
118 | const App = () => (
119 |     <Map>
120 |         <CompassControl />
121 |     </Map>
122 | )
123 | ```
124 | 
125 | ### Mouse control
126 | 
127 | Move the map by mouse. You can set zoom to `boolean` to enable / disable zooming by mouse scrolling. 
128 | ```javascript
129 | import { Map, MouseControl } from 'react-mapycz'
130 | 
131 | const App = () => (
132 |     <Map>
133 |         <MouseControl zoom={true} />
134 |     </Map>
135 | )
136 | ```
137 | 
138 | ### Keyboard control
139 | 
140 | Control the map by keyboard arrows. 
141 | ```javascript
142 | import { Map, KeyboardControl } from 'react-mapycz'
143 | 
144 | const App = () => (
145 |     <Map>
146 |         <KeyboardControl />
147 |     </Map>
148 | )
149 | ```
150 | 
151 | ### Sync control
152 | 
153 | Synchronize map size by its parent element.
154 | ```javascript
155 | import { Map, SyncControl } from 'react-mapycz'
156 | 
157 | const App = () => (
158 |     <Map>
159 |         <SyncControl />
160 |     </Map>
161 | )
162 | ```
163 | You can pass `options` prop to the `SyncControl` to set `bottomSpace` (in pixels) and `resizeTimeout` (in miliseconds).
164 | 
165 | 
166 | ## POI layer
167 | 
168 | The map can automatically fetch nearby points of interest.
169 | 
170 | ```javascript
171 | import { Map, POILayer } from 'react-mapycz'
172 | 
173 | const App = () => (
174 |     <Map loaderApiConfig={{poi: true}}>
175 |         <POILayer />
176 |     </Map>
177 | )
178 | 
179 | # License
180 | This library is using Mapy.cz API. By its usage you acknowledge that you agree to the [Terms and Conditions](http://api.mapy.cz/#pact). 
181 | 
182 | 
183 |   
184 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
  1 | type MapSignal =
  2 |     | 'map-redraw'
  3 |     | 'map-lock'
  4 |     | 'map-unlock'
  5 |     | 'map-click'
  6 |     | 'map-contextmenu'
  7 |     | 'map-focus'
  8 |     | 'map-blur'
  9 |     | 'zoom-start'
 10 |     | 'zoom-range-change'
 11 |     | 'zoom-step'
 12 |     | 'zoom-stop'
 13 |     | 'rotation-start'
 14 |     | 'rotation-step'
 15 |     | 'rotation-stop'
 16 |     | 'map-pan'
 17 |     | 'center-start'
 18 |     | 'center-stop'
 19 |     | 'port-sync';
 20 | type MapLayerSignal =
 21 |     | 'layer-enable'
 22 |     | 'layer-disable'
 23 |     | 'tileset-load';
 24 | type MapKeyboardSignal = 'control-keyboard-move' | 'control-keyboard-zoom';
 25 | type MapControlLayerSignal = 'control-layer-click';
 26 | type MapControlMouseSignal = 'control-mouse-move' | 'control-mouse-zoom';
 27 | type MapControlPointerSignal = 'pointer-click';
 28 | type MapControlSelectionSignal = 'control-selection-centerzoom';
 29 | type MapControlSyncSignal = 'map-resize';
 30 | type MapControlZoomSignal = 'zoom-start' | 'zoom-step' | 'zoom-stop' | 'control-zoom-zoom';
 31 | type MapMarkerSignal = 'marker-click';
 32 | type MapMarkerFeatureDraggableSignal = 'marker-drag-start' | 'marker-drag-move' | 'marker-drag-stop';
 33 | type MapMarkerPOISignal = 'marker-poi-click' | 'marker-poi-enter' | 'marker-poi-leave';
 34 | type MapGeometrySignal = 'geometry-click';
 35 | type MapCardSignal = 'card-open' | 'card-close' | 'card-close-click';
 36 | export type MapEventType =
 37 |     | MapSignal
 38 |     | MapLayerSignal
 39 |     | MapKeyboardSignal
 40 |     | MapControlLayerSignal
 41 |     | MapControlMouseSignal
 42 |     | MapControlPointerSignal
 43 |     | MapControlSelectionSignal
 44 |     | MapControlSyncSignal
 45 |     | MapControlZoomSignal
 46 |     | MapMarkerSignal
 47 |     | MapMarkerFeatureDraggableSignal
 48 |     | MapMarkerPOISignal
 49 |     | MapGeometrySignal
 50 |     | MapCardSignal;
 51 | 
 52 | export type MapEvent = {
 53 |   data: {
 54 |     event: {
 55 |       altKey: false;
 56 |       altitudeAngle: number;
 57 |       azimuthAngle: number;
 58 |       bubbles: boolean;
 59 |       button: number;
 60 |       buttons: number;
 61 |       cancelBubble: boolean
 62 |       cancelable: boolean;
 63 |       clientX: number;
 64 |       clientY: number;
 65 |       composed: boolean;
 66 |       ctrlKey: boolean
 67 |       defaultPrevented: boolean
 68 |       detail: number;
 69 |       eventPhase: number;
 70 |       height: number;
 71 |       isPrimary: boolean
 72 |       isTrusted: boolean;
 73 |       layerX: number;
 74 |       layerY: number;
 75 |       metaKey: boolean
 76 |       movementX: number;
 77 |       movementY: number;
 78 |       offsetX: number;
 79 |       offsetY: number;
 80 |       pageX: number;
 81 |       pageY: number;
 82 |       pointerId: number;
 83 |       pointerType: string;
 84 |       pressure: number;
 85 |       returnValue: boolean;
 86 |       screenX: number;
 87 |       screenY: number;
 88 |       shiftKey: boolean
 89 |       tangentialPressure: number;
 90 |       tiltX: number;
 91 |       tiltY: number;
 92 |       timeStamp: number;
 93 |       twist: number;
 94 |       type: string;
 95 |       which: number;
 96 |       width: number;
 97 |       x: number;
 98 |       y: number;
 99 |     };
100 |   };
101 |   target: any;
102 |   timeStamp: number;
103 |   type: MapEventType;
104 | }
105 | 
106 | export type Coordinates = {
107 |   x: number;
108 |   y: number;
109 | }
110 | 
111 | export type SMapPixel = {
112 |   x: number;
113 |   y: number;
114 | }
115 | 
116 | export type CardPadding = 'top' | 'right' | 'bottom' | 'left';
117 | 
118 | /**
119 |  * @desc left bottom and right top in WGS84
120 |  */
121 | export type SMapViewport = {
122 |   lbx: number;
123 |   lby: number;
124 |   rtx: number;
125 |   rty: number;
126 | };
127 | 
128 | export type SMap = {
129 |   lock(): void;
130 |   unlock(): void;
131 |   getSignals(): any;
132 |   getZoomRange(): [number, number];
133 |   setZoomRange(minZoom: number, maxZoom: number): void;
134 |   redraw(): void;
135 |   getOrientation(): number;
136 |   setOrientation(o: number, animate?: boolean): void;
137 |   setProjection(projection: any): void;
138 |   getContainer(): HTMLDivElement;
139 |   getContent(): HTMLDivElement;
140 |   getSize(): SMapPixel;
141 |   getProjection(): any;
142 |   getOffset(): SMapPixel;
143 |   getGeometryCanvas(): any;
144 |   setCursor(cursor: string | null, x?: number, y?: number): void;
145 |   setCenter(center: Coordinates | SMapPixel, animate?: boolean): void;
146 |   zoomChange(z: number | string): boolean;
147 |   setZoom(z: number | string, fixedPoint?: Coordinates | SMapPixel, animate?: boolean): void;
148 |   setCenterZoom(center: Coordinates, zoom: number | string, animate?: boolean): void;
149 |   getCenter(): Coordinates;
150 |   getZoom(): number;
151 |   computeCenterZoom(arr: Coordinates[], usePadding?: boolean): [Coordinates, number];
152 |   addLayer(l: any, before?: boolean): any;
153 |   removeLayer(l: any): void;
154 |   getLayer(id: string | number): any;
155 |   getLayerContainer(): any;
156 |   addControl(c: any): void;
157 |   getControls(): any[];
158 |   removeControl(c: any): void;
159 |   addCard(card: any, coords: Coordinates, noPan: boolean): void;
160 |   removeCard(): void;
161 |   getCard(): any;
162 |   syncPort(): void;
163 |   setPadding(which: CardPadding, value: number): void;
164 |   getPadding(which: CardPadding): number;
165 |   getMap(): SMap;
166 |   addDefaultLayer(id: string | number): any;
167 |   addDefaultContextMenu(): void;
168 |   addDefaultControls(): void;
169 |   /**
170 |    * @desc replaces placeholders {placeholder} with current values
171 |    * placeholders: cx, cy, lbx, lby, rtx, rty, lx, rx, by, ty, zoom, zoom[+-][12], orientation
172 |    */
173 |   formatString(template: string, customValues?: Record<string, string | number>): string;
174 |   getCopyrightControl(): any;
175 |   getViewport(): SMapViewport;
176 | };
177 | 
178 | export type MarkerCoords = { lng: number, lat: number }
179 | export type MarkerCardRender = ((coords: MarkerCoords) => JSX.Element);
180 | export const isMarkerCardRender = (p?: string | MarkerCardRender): p is MarkerCardRender => typeof p === 'function'
181 | 
182 | export type MarkerCardConfiguration = {
183 |   header?: string | MarkerCardRender;
184 |   body?: string | MarkerCardRender;
185 |   footer?: string | MarkerCardRender;
186 |   options?: {
187 |     width: number;
188 |     height: number;
189 |   }
190 | }
191 | 
192 | export interface MarkerProps {
193 |   coords: MarkerCoords;
194 |   id?: string;
195 |   options?: MarkerOptions;
196 |   card?: MarkerCardConfiguration;
197 | }
198 | 
199 | export type MarkerRender = (marker: MarkerProps) => JSX.Element;
200 | export const isMarkerRender = (
201 |     url?: string | Element | MarkerRender
202 | ): url is MarkerRender => typeof url === 'function';
203 | 
204 | export type MarkerAnchor =
205 |     | { top: number; left: number }
206 |     | { top: number; right: number }
207 |     | { bottom: number; right: number }
208 |     | { bottom: number; left: number };
209 | 
210 | export type MarkerOptions = {
211 |   title?: string;
212 |   anchor?: MarkerAnchor;
213 |   url?: string | Element | MarkerRender;
214 | };
215 | 
216 | export interface MarkerLayerOptions {
217 |   prefetch?: number;
218 |   supportsAnimation?: boolean;
219 |   poiTooltip?: boolean;
220 | }
221 | 
222 | export enum LineStyle {
223 |   solid = 0,
224 |   dash = 1,
225 |   dot = 2,
226 |   dashDot = 3,
227 | }
228 | 
229 | export type GeometryOptions = {
230 |   title?: string;
231 |   minDist?: number;
232 |   color?: string;
233 |   opacity?: number;
234 |   width?: number;
235 |   style?: LineStyle;
236 |   outlineColor?: string;
237 |   outlineOpacity?: number;
238 |   outlineWidth?: number;
239 |   outlineStyle?: LineStyle;
240 | }
241 | 
242 | export type ClusterConfig = {
243 |   maxDistance?: number;
244 |   clusterCtor?: Function;
245 | };
246 | 
247 | export interface LoaderApiConfig {
248 |   jak?: boolean;
249 |   poi?: boolean;
250 |   pano?: boolean;
251 |   suggest?: boolean;
252 |   api?: "full" | "simple";
253 | }
254 | 


--------------------------------------------------------------------------------