{"id":13726950,"url":"https://github.com/allenhwkim/react-openlayers","last_synced_at":"2025-05-15T16:09:48.318Z","repository":{"id":57342095,"uuid":"82496385","full_name":"allenhwkim/react-openlayers","owner":"allenhwkim","description":"OpenLayer React Components","archived":false,"fork":false,"pushed_at":"2025-03-19T15:25:22.000Z","size":5704,"stargazers_count":227,"open_issues_count":1,"forks_count":77,"subscribers_count":16,"default_branch":"develop","last_synced_at":"2025-03-31T16:13:45.791Z","etag":null,"topics":["map","openlayers","react","typescript","wrapper"],"latest_commit_sha":null,"homepage":"https://allenhwkim.github.io/react-openlayers","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/allenhwkim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-19T23:11:28.000Z","updated_at":"2025-03-29T02:01:40.000Z","dependencies_parsed_at":"2024-01-07T21:05:06.672Z","dependency_job_id":"fb18f15d-d591-4945-99f6-02f6a67cec05","html_url":"https://github.com/allenhwkim/react-openlayers","commit_stats":{"total_commits":77,"total_committers":7,"mean_commits":11.0,"dds":"0.18181818181818177","last_synced_commit":"7c85125eb2883c1af62fdf4ecf09b209c8b9cac4"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Freact-openlayers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Freact-openlayers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Freact-openlayers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allenhwkim%2Freact-openlayers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allenhwkim","download_url":"https://codeload.github.com/allenhwkim/react-openlayers/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694875,"owners_count":20980733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["map","openlayers","react","typescript","wrapper"],"created_at":"2024-08-03T01:03:32.701Z","updated_at":"2025-05-15T16:09:48.312Z","avatar_url":"https://github.com/allenhwkim.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","External plugins and projects using OpenLayers"],"sub_categories":["Frameworks on top of OpenLayers"],"readme":"# React components for OpenLayers\n\nA minimal React wrapper of [OpenLayers 10](https://openlayers.org/)\nwritten in [TypeScript](https://www.typescriptlang.org/)\n\n![Image](https://github.com/user-attachments/assets/9dfc9102-4952-4c56-a76b-19699a5a4570)\n\n## Install\n```\nnpm install react-openlayers \n```\n\n## Example\n```typescript\nimport { OSM } from 'ol/source';\nimport { Map, View, TileLayer } from 'react-openlayers';\nimport 'react-openlayers/dist/index.css'; // for css\n\nexport default function(props) {\n  return ( \n    \u003cMap controls={[]} interactions={[]}\u003e\n      \u003cTileLayer source={new OSM()} /\u003e\n      \u003cView center={[-10997148, 4569099]} zoom={4}/\u003e\n    \u003c/Map\u003e\n  );\n}\n```\n\n## List of components\n\n### Base\n| OpenLayers Object  | React Component    | Description  | \n| --------------     | ---------------    | ------------ |\n| ol/Map     | `\u003cMap /\u003e`    | It manages layers, controls, interactions, and the overall rendering of the map. |\n| ol/Overlay | `\u003cOverlay /\u003e`| It add HTML elements to the map at specific coordinates. |\n| ol/View    | `\u003cView /\u003e`   | A View object represents a simple 2D view of the map |\n| ol/Feature | `\u003cMarker /\u003e` | ol/Feature customized as a map maker. |\n\n### Layers\n| OpenLayers Object  | React Component    | Description  | \n| --------------     | ---------------    | ------------ |\n| ol/layer/Graticule |  `\u003cGraticuleLayer /\u003e` | Displays a graticule (grid of latitude and longitude lines) on the map. |\n| ol/layer/Heatmap |  `\u003cHeatmapLayer /\u003e` | Displays a heatmap based on vector data. |\n| ol/layer/Tile |  `\u003cTileLayer /\u003e` | Displays tiled images, such as those from a tile server. |\n| ol/layer/Vector |  `\u003cVectorLayer /\u003e` | Displays vector data, such as points, lines, and polygons. |\n| ol/layer/WebGLTile |  `\u003cWebGLLayer /\u003e` | Displays tiled images using WebGL for rendering. |\n\n### Controls\n| OpenLayers Object  | React Component    | Description  | \n| --------------     | ---------------    | ------------ |\n| ol/control/Attribution   | `\u003cAttributionControl /\u003e`   | Displays attribution information for the map layers |\n| ol/control/FullScreen    | `\u003cFullScreenControl /\u003e`    | Adds a button to toggle full-screen mode |\n| ol/control/MousePosition | `\u003cMousePositionControl /\u003e` | Displays the current mouse position in coordinates |\n| ol/control/OverviewMap   | `\u003cOverviewMapControl /\u003e`   | Displays an overview map of the main map |\n| ol/control/ScaleLine     | `\u003cScaleLineControl /\u003e`     | Displays an overview map of the main map |\n| custom                   | `\u003cLayersControl /\u003e`        | Layer switcher |\n| custom                   | `\u003cDrawControl /\u003e`          | Shape Drawing shapes; point, rectangle, circle, ploygon |\n| custom                   | `\u003cSearchControl /\u003e`        | Search an address and set a marker |\n\n### Interactions\n| OpenLayers Object  | React Component    | Description  | \n| --------------     | ---------------    | ------------ |\n| ol/interaction/DragRotateAndZoom| `\u003cDragRotateAndZoomInteraction /\u003e` | Allows rotating and zooming the map by dragging. |\n| ol/interaction/Link      | `\u003cLinkInteraction /\u003e`      | Synchronizes the map view with the URL. |\n| ol/interaction/Pointer   | `\u003cPointerInteraction /\u003e`   | Base class for pointer interactions. |\n| ol/interaction/Select    | `\u003cSelectInteraction /\u003e`    | Allows selecting features on the map. |\n| ol/interaction/Translate | `\u003cTranslateInteraction /\u003e` | Allows translating (moving) features on the map. |\n\n## For developers\n\nThere are two group of sources and corresponding builds.\n\n1. React component library\n\n    Code for component library is in `./src/lib` directory.\n    This is to be published to [npm](https://www.npmjs.com/package/react-openlayers)\n    after build, `$ npm run build:lib`, which produces output to `./dist` directory\n\n2. Storybook documentation. \n\n    Code for Storybook is in `./src/stories`. Storybook documents and \n    demonstrates the usage of each component. It is deployed to \n    [Github Pages](https://allenhwkim.github.io/react-openlayers).\n\n    When `main` branch is updated, a Github Action runs the build command, \n    `$ npm run build:storybook`, which writes to `./storybook-static` directory, \n    and the Github Action deploys the direcory to the Github Pages.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Freact-openlayers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallenhwkim%2Freact-openlayers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallenhwkim%2Freact-openlayers/lists"}