@neshan-maps-platform/react-openlayers 2.0.15 → 2.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +220 -220
- package/dist/React-Openlayers.js +26 -26
- package/dist/React-Openlayers.umd.cjs +8 -8
- package/dist/types/App.d.ts +3 -3
- package/dist/types/App.model.d.ts +3 -3
- package/dist/types/assets/ol.model.d.ts +130 -130
- package/dist/types/components/Map.d.ts +5 -5
- package/dist/types/components/Map.model.d.ts +55 -55
- package/dist/types/components/index.d.ts +4 -3
- package/dist/types/main.d.ts +1 -1
- package/dist/types/parameters/index.d.ts +47 -47
- package/dist/types/store/ContextProvider.d.ts +3 -3
- package/dist/types/store/ContextProvider.model.d.ts +11 -11
- package/dist/types/store/context.d.ts +11 -11
- package/dist/types/utils/features.util.d.ts +2 -2
- package/dist/types/utils/index.d.ts +7 -7
- package/dist/types/utils/location.util.d.ts +30 -30
- package/package.json +48 -48
package/README.md
CHANGED
|
@@ -1,221 +1,221 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://platform.neshan.org">
|
|
3
|
-
<img width="150" src="https://static.neshanmap.ir/content/places/assets/images/21.png">
|
|
4
|
-
</a>
|
|
5
|
-
</p>
|
|
6
|
-
|
|
7
|
-
<h1 align="center">React Neshan Map Openlayers</h1>
|
|
8
|
-
<div align="center">
|
|
9
|
-
An official React wrapper for neshan-map-openlayers library
|
|
10
|
-
</div>
|
|
11
|
-
|
|
12
|
-
<!-- <div align="center">
|
|
13
|
-
|
|
14
|
-
An enterprise-class UI design language and React UI library.
|
|
15
|
-
|
|
16
|
-
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
|
17
|
-
|
|
18
|
-
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
|
19
|
-
|
|
20
|
-
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
|
21
|
-
|
|
22
|
-
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
|
|
23
|
-
[npm-url]: http://npmjs.org/package/antd
|
|
24
|
-
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
|
|
25
|
-
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
|
|
26
|
-
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
|
|
27
|
-
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
|
|
28
|
-
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
|
|
29
|
-
[download-url]: https://npmjs.org/package/antd
|
|
30
|
-
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
|
31
|
-
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
|
32
|
-
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
|
33
|
-
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
|
|
34
|
-
[twitter-image]: https://badgen.net/twitter/follow/antdesignui?style=flat-square
|
|
35
|
-
[twitter-url]: https://twitter.com/AntDesignUI
|
|
36
|
-
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
|
|
37
|
-
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
|
|
38
|
-
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
|
|
39
|
-
[bundlephobia-url]: https://bundlephobia.com/package/antd
|
|
40
|
-
[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
|
|
41
|
-
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
|
42
|
-
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
|
|
43
|
-
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
|
44
|
-
|
|
45
|
-
</div> -->
|
|
46
|
-
|
|
47
|
-
<!-- [](https://ant.design)
|
|
48
|
-
|
|
49
|
-
English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
|
|
50
|
-
|
|
51
|
-
## ✨ Features
|
|
52
|
-
|
|
53
|
-
- 🌈 Enterprise-class UI designed for web applications.
|
|
54
|
-
- 📦 A set of high-quality React components out of the box.
|
|
55
|
-
- 🛡 Written in TypeScript with predictable static types.
|
|
56
|
-
- ⚙️ Whole package of design resources and development tools.
|
|
57
|
-
- 🌍 Internationalization support for dozens of languages.
|
|
58
|
-
- 🎨 Powerful theme customization in every detail.
|
|
59
|
-
|
|
60
|
-
## 🖥 Environment Support
|
|
61
|
-
|
|
62
|
-
- Modern browsers
|
|
63
|
-
- Server-side Rendering
|
|
64
|
-
- [Electron](https://www.electronjs.org/)
|
|
65
|
-
|
|
66
|
-
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
|
|
67
|
-
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
68
|
-
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | -->
|
|
69
|
-
## ⚙️ Before Install
|
|
70
|
-
You need a map key to use our map on your react web application.
|
|
71
|
-
You can signup and get a key from [Our Platfrom](https://platform.neshan.org/panel/api-key).
|
|
72
|
-
<br/>
|
|
73
|
-
For more information, visit our [doc page](https://platform.neshan.org/sdk/react-component#).
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
## 📦 Install
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
npm install @neshan-maps-platform/react-openlayers
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
```bash
|
|
83
|
-
yarn add @neshan-maps-platform/react-openlayers
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
If you want full type defenitions including openlayers types, you need to install them as dev dependency.
|
|
87
|
-
```bash
|
|
88
|
-
yarn add -D @types/ol@5
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
## 🔨 Usage
|
|
92
|
-
|
|
93
|
-
```jsx
|
|
94
|
-
import { useEffect, useRef, useState } from "react"
|
|
95
|
-
import "@neshan-maps-platform/react-openlayers/dist/style.css"
|
|
96
|
-
|
|
97
|
-
import
|
|
98
|
-
// If you want to use ol types like below, your project has to support typescript.
|
|
99
|
-
import { NeshanMapRef, OlMap, Ol } from "@neshan-maps-platform/react-openlayers"
|
|
100
|
-
|
|
101
|
-
function App() {
|
|
102
|
-
const mapRef = useRef<NeshanMapRef | null>(null)
|
|
103
|
-
|
|
104
|
-
const [ol, setOl] = useState<Ol>()
|
|
105
|
-
const [olMap, setOlMap] = useState<OlMap>()
|
|
106
|
-
|
|
107
|
-
const onInit = (ol: Ol, map: OlMap) => {
|
|
108
|
-
setOl(ol)
|
|
109
|
-
setOlMap(map)
|
|
110
|
-
|
|
111
|
-
setTimeout(() => {
|
|
112
|
-
const view = map.getView()
|
|
113
|
-
view.animate({
|
|
114
|
-
center: (ol.proj.fromLonLat)([
|
|
115
|
-
51.36281969540723, 35.69672648316882,
|
|
116
|
-
]),
|
|
117
|
-
zoom: 12,
|
|
118
|
-
duration: 1000,
|
|
119
|
-
})
|
|
120
|
-
}, 2000)
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
useEffect(() => {
|
|
124
|
-
const interval = setInterval(() => {
|
|
125
|
-
if (mapRef.current?.map) {
|
|
126
|
-
mapRef.current?.map.setMapType("standard-night")
|
|
127
|
-
clearInterval(interval)
|
|
128
|
-
}
|
|
129
|
-
}, 1000)
|
|
130
|
-
return () => clearInterval(interval)
|
|
131
|
-
}, [])
|
|
132
|
-
|
|
133
|
-
return (
|
|
134
|
-
<>
|
|
135
|
-
<NeshanMap
|
|
136
|
-
mapKey="YOUR_MAP_KEY"
|
|
137
|
-
defaultType="neshan"
|
|
138
|
-
center={{ latitude: 35.7665394, longitude: 51.4749824 }}
|
|
139
|
-
style={{ height: "48vh", width: "100%" }}
|
|
140
|
-
onInit={onInit}
|
|
141
|
-
zoom={13}
|
|
142
|
-
></NeshanMap>
|
|
143
|
-
<hr />
|
|
144
|
-
<NeshanMap
|
|
145
|
-
ref={mapRef}
|
|
146
|
-
mapKey="YOUR_MAP_KEY"
|
|
147
|
-
traffic={false}
|
|
148
|
-
defaultType="dreamy"
|
|
149
|
-
style={{ height: "48vh", width: "100%" }}
|
|
150
|
-
></NeshanMap>
|
|
151
|
-
</>
|
|
152
|
-
)
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
export default App
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
### TypeScript
|
|
159
|
-
|
|
160
|
-
`@neshan-maps-platform/react-openlayers` is written in TypeScript with complete definitions.
|
|
161
|
-
<!-- , check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started. -->
|
|
162
|
-
|
|
163
|
-
<!-- ## 🌍 Internationalization
|
|
164
|
-
|
|
165
|
-
Dozens of languages are supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
|
|
166
|
-
|
|
167
|
-
## 🔗 Links
|
|
168
|
-
|
|
169
|
-
- [Home page](https://ant.design/)
|
|
170
|
-
- [Components Overview](https://ant.design/components/overview)
|
|
171
|
-
- [Ant Design Pro](http://pro.ant.design/)
|
|
172
|
-
- [Change Log](CHANGELOG.en-US.md)
|
|
173
|
-
- [rc-components](http://react-component.github.io/)
|
|
174
|
-
- [Mobile UI](http://mobile.ant.design)
|
|
175
|
-
- [Mini Program UI](http://mini.ant.design)
|
|
176
|
-
- [Ant Design Pro Components](https://procomponents.ant.design)
|
|
177
|
-
- [Ant Design Charts](https://charts.ant.design)
|
|
178
|
-
- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
|
|
179
|
-
- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
|
|
180
|
-
- [Landing Pages](https://landing.ant.design)
|
|
181
|
-
- [Motion](https://motion.ant.design)
|
|
182
|
-
- [Scaffold Market](http://scaffold.ant.design)
|
|
183
|
-
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
|
184
|
-
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
|
185
|
-
- [FAQ](https://ant.design/docs/react/faq)
|
|
186
|
-
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
|
|
187
|
-
- [Customize Theme](https://ant.design/docs/react/customize-theme)
|
|
188
|
-
- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
|
189
|
-
|
|
190
|
-
## ⌨️ Development
|
|
191
|
-
|
|
192
|
-
Use Gitpod, a free online dev environment for GitHub.
|
|
193
|
-
|
|
194
|
-
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
|
195
|
-
|
|
196
|
-
Or clone locally:
|
|
197
|
-
|
|
198
|
-
```bash
|
|
199
|
-
$ git clone git@github.com:ant-design/ant-design.git
|
|
200
|
-
$ cd ant-design
|
|
201
|
-
$ npm install
|
|
202
|
-
$ npm start
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
|
|
206
|
-
|
|
207
|
-
## 🤝 Contributing [](http://makeapullrequest.com)
|
|
208
|
-
|
|
209
|
-
Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
|
|
210
|
-
|
|
211
|
-
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
|
|
212
|
-
|
|
213
|
-
If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
|
214
|
-
|
|
215
|
-
[](https://issuehunt.io/repos/34526884)
|
|
216
|
-
|
|
217
|
-
## ❤️ Sponsors and Backers [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
|
218
|
-
|
|
219
|
-
[](https://opencollective.com/ant-design#support)
|
|
220
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://platform.neshan.org">
|
|
3
|
+
<img width="150" src="https://static.neshanmap.ir/content/places/assets/images/21.png">
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">React Neshan Map Openlayers</h1>
|
|
8
|
+
<div align="center">
|
|
9
|
+
An official React wrapper for neshan-map-openlayers library
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<!-- <div align="center">
|
|
13
|
+
|
|
14
|
+
An enterprise-class UI design language and React UI library.
|
|
15
|
+
|
|
16
|
+
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
|
|
17
|
+
|
|
18
|
+
[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url]
|
|
19
|
+
|
|
20
|
+
[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![Issues need help][help-wanted-image]][help-wanted-url]
|
|
21
|
+
|
|
22
|
+
[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
|
|
23
|
+
[npm-url]: http://npmjs.org/package/antd
|
|
24
|
+
[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
|
|
25
|
+
[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
|
|
26
|
+
[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
|
|
27
|
+
[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
|
|
28
|
+
[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
|
|
29
|
+
[download-url]: https://npmjs.org/package/antd
|
|
30
|
+
[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
|
|
31
|
+
[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
|
|
32
|
+
[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
|
|
33
|
+
[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
|
|
34
|
+
[twitter-image]: https://badgen.net/twitter/follow/antdesignui?style=flat-square
|
|
35
|
+
[twitter-url]: https://twitter.com/AntDesignUI
|
|
36
|
+
[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
|
|
37
|
+
[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
|
|
38
|
+
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square
|
|
39
|
+
[bundlephobia-url]: https://bundlephobia.com/package/antd
|
|
40
|
+
[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
|
|
41
|
+
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
|
42
|
+
[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
|
|
43
|
+
[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
|
|
44
|
+
|
|
45
|
+
</div> -->
|
|
46
|
+
|
|
47
|
+
<!-- [](https://ant.design)
|
|
48
|
+
|
|
49
|
+
English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)
|
|
50
|
+
|
|
51
|
+
## ✨ Features
|
|
52
|
+
|
|
53
|
+
- 🌈 Enterprise-class UI designed for web applications.
|
|
54
|
+
- 📦 A set of high-quality React components out of the box.
|
|
55
|
+
- 🛡 Written in TypeScript with predictable static types.
|
|
56
|
+
- ⚙️ Whole package of design resources and development tools.
|
|
57
|
+
- 🌍 Internationalization support for dozens of languages.
|
|
58
|
+
- 🎨 Powerful theme customization in every detail.
|
|
59
|
+
|
|
60
|
+
## 🖥 Environment Support
|
|
61
|
+
|
|
62
|
+
- Modern browsers
|
|
63
|
+
- Server-side Rendering
|
|
64
|
+
- [Electron](https://www.electronjs.org/)
|
|
65
|
+
|
|
66
|
+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
|
|
67
|
+
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
68
|
+
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | -->
|
|
69
|
+
## ⚙️ Before Install
|
|
70
|
+
You need a map key to use our map on your react web application.
|
|
71
|
+
You can signup and get a key from [Our Platfrom](https://platform.neshan.org/panel/api-key).
|
|
72
|
+
<br/>
|
|
73
|
+
For more information, visit our [doc page](https://platform.neshan.org/sdk/react-component#).
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
## 📦 Install
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
npm install @neshan-maps-platform/react-openlayers
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
```bash
|
|
83
|
+
yarn add @neshan-maps-platform/react-openlayers
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
If you want full type defenitions including openlayers types, you need to install them as dev dependency.
|
|
87
|
+
```bash
|
|
88
|
+
yarn add -D @types/ol@5
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## 🔨 Usage
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
import { useEffect, useRef, useState } from "react"
|
|
95
|
+
import "@neshan-maps-platform/react-openlayers/dist/style.css"
|
|
96
|
+
|
|
97
|
+
import NeshanMap from "@neshan-maps-platform/react-openlayers"
|
|
98
|
+
// If you want to use ol types like below, your project has to support typescript.
|
|
99
|
+
import { NeshanMapRef, OlMap, Ol } from "@neshan-maps-platform/react-openlayers"
|
|
100
|
+
|
|
101
|
+
function App() {
|
|
102
|
+
const mapRef = useRef<NeshanMapRef | null>(null)
|
|
103
|
+
|
|
104
|
+
const [ol, setOl] = useState<Ol>()
|
|
105
|
+
const [olMap, setOlMap] = useState<OlMap>()
|
|
106
|
+
|
|
107
|
+
const onInit = (ol: Ol, map: OlMap) => {
|
|
108
|
+
setOl(ol)
|
|
109
|
+
setOlMap(map)
|
|
110
|
+
|
|
111
|
+
setTimeout(() => {
|
|
112
|
+
const view = map.getView()
|
|
113
|
+
view.animate({
|
|
114
|
+
center: (ol.proj.fromLonLat)([
|
|
115
|
+
51.36281969540723, 35.69672648316882,
|
|
116
|
+
]),
|
|
117
|
+
zoom: 12,
|
|
118
|
+
duration: 1000,
|
|
119
|
+
})
|
|
120
|
+
}, 2000)
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
useEffect(() => {
|
|
124
|
+
const interval = setInterval(() => {
|
|
125
|
+
if (mapRef.current?.map) {
|
|
126
|
+
mapRef.current?.map.setMapType("standard-night")
|
|
127
|
+
clearInterval(interval)
|
|
128
|
+
}
|
|
129
|
+
}, 1000)
|
|
130
|
+
return () => clearInterval(interval)
|
|
131
|
+
}, [])
|
|
132
|
+
|
|
133
|
+
return (
|
|
134
|
+
<>
|
|
135
|
+
<NeshanMap
|
|
136
|
+
mapKey="YOUR_MAP_KEY"
|
|
137
|
+
defaultType="neshan"
|
|
138
|
+
center={{ latitude: 35.7665394, longitude: 51.4749824 }}
|
|
139
|
+
style={{ height: "48vh", width: "100%" }}
|
|
140
|
+
onInit={onInit}
|
|
141
|
+
zoom={13}
|
|
142
|
+
></NeshanMap>
|
|
143
|
+
<hr />
|
|
144
|
+
<NeshanMap
|
|
145
|
+
ref={mapRef}
|
|
146
|
+
mapKey="YOUR_MAP_KEY"
|
|
147
|
+
traffic={false}
|
|
148
|
+
defaultType="dreamy"
|
|
149
|
+
style={{ height: "48vh", width: "100%" }}
|
|
150
|
+
></NeshanMap>
|
|
151
|
+
</>
|
|
152
|
+
)
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
export default App
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### TypeScript
|
|
159
|
+
|
|
160
|
+
`@neshan-maps-platform/react-openlayers` is written in TypeScript with complete definitions.
|
|
161
|
+
<!-- , check [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) to get started. -->
|
|
162
|
+
|
|
163
|
+
<!-- ## 🌍 Internationalization
|
|
164
|
+
|
|
165
|
+
Dozens of languages are supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
|
|
166
|
+
|
|
167
|
+
## 🔗 Links
|
|
168
|
+
|
|
169
|
+
- [Home page](https://ant.design/)
|
|
170
|
+
- [Components Overview](https://ant.design/components/overview)
|
|
171
|
+
- [Ant Design Pro](http://pro.ant.design/)
|
|
172
|
+
- [Change Log](CHANGELOG.en-US.md)
|
|
173
|
+
- [rc-components](http://react-component.github.io/)
|
|
174
|
+
- [Mobile UI](http://mobile.ant.design)
|
|
175
|
+
- [Mini Program UI](http://mini.ant.design)
|
|
176
|
+
- [Ant Design Pro Components](https://procomponents.ant.design)
|
|
177
|
+
- [Ant Design Charts](https://charts.ant.design)
|
|
178
|
+
- [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
|
|
179
|
+
- [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
|
|
180
|
+
- [Landing Pages](https://landing.ant.design)
|
|
181
|
+
- [Motion](https://motion.ant.design)
|
|
182
|
+
- [Scaffold Market](http://scaffold.ant.design)
|
|
183
|
+
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
|
184
|
+
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
|
185
|
+
- [FAQ](https://ant.design/docs/react/faq)
|
|
186
|
+
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
|
|
187
|
+
- [Customize Theme](https://ant.design/docs/react/customize-theme)
|
|
188
|
+
- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
|
189
|
+
|
|
190
|
+
## ⌨️ Development
|
|
191
|
+
|
|
192
|
+
Use Gitpod, a free online dev environment for GitHub.
|
|
193
|
+
|
|
194
|
+
[](https://gitpod.io/#https://github.com/ant-design/ant-design)
|
|
195
|
+
|
|
196
|
+
Or clone locally:
|
|
197
|
+
|
|
198
|
+
```bash
|
|
199
|
+
$ git clone git@github.com:ant-design/ant-design.git
|
|
200
|
+
$ cd ant-design
|
|
201
|
+
$ npm install
|
|
202
|
+
$ npm start
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
Open your browser and visit http://127.0.0.1:8001 , see more at [Development](https://github.com/ant-design/ant-design/wiki/Development).
|
|
206
|
+
|
|
207
|
+
## 🤝 Contributing [](http://makeapullrequest.com)
|
|
208
|
+
|
|
209
|
+
Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better antd together.
|
|
210
|
+
|
|
211
|
+
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
|
|
212
|
+
|
|
213
|
+
If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md).
|
|
214
|
+
|
|
215
|
+
[](https://issuehunt.io/repos/34526884)
|
|
216
|
+
|
|
217
|
+
## ❤️ Sponsors and Backers [](https://opencollective.com/ant-design#support) [](https://opencollective.com/ant-design#support)
|
|
218
|
+
|
|
219
|
+
[](https://opencollective.com/ant-design#support)
|
|
220
|
+
|
|
221
221
|
[](https://opencollective.com/ant-design#support) -->
|
package/dist/React-Openlayers.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Le, { createContext as pr, useReducer as vr, forwardRef as Ne, useContext as mr, useRef as yr, useState as ce, useImperativeHandle as hr, useEffect as gr } from "react";
|
|
2
2
|
var le = {}, _r = {
|
|
3
3
|
get exports() {
|
|
4
4
|
return le;
|
|
@@ -6,7 +6,7 @@ var le = {}, _r = {
|
|
|
6
6
|
set exports(s) {
|
|
7
7
|
le = s;
|
|
8
8
|
}
|
|
9
|
-
},
|
|
9
|
+
}, N = {};
|
|
10
10
|
/**
|
|
11
11
|
* @license React
|
|
12
12
|
* react-jsx-runtime.production.min.js
|
|
@@ -19,9 +19,9 @@ var le = {}, _r = {
|
|
|
19
19
|
var Fe;
|
|
20
20
|
function Er() {
|
|
21
21
|
if (Fe)
|
|
22
|
-
return
|
|
22
|
+
return N;
|
|
23
23
|
Fe = 1;
|
|
24
|
-
var s =
|
|
24
|
+
var s = Le, f = Symbol.for("react.element"), P = Symbol.for("react.fragment"), b = Object.prototype.hasOwnProperty, v = s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, F = { key: !0, ref: !0, __self: !0, __source: !0 };
|
|
25
25
|
function A(O, m, x) {
|
|
26
26
|
var _, T = {}, j = null, C = null;
|
|
27
27
|
x !== void 0 && (j = "" + x), m.key !== void 0 && (j = "" + m.key), m.ref !== void 0 && (C = m.ref);
|
|
@@ -32,7 +32,7 @@ function Er() {
|
|
|
32
32
|
T[_] === void 0 && (T[_] = m[_]);
|
|
33
33
|
return { $$typeof: f, type: O, key: j, ref: C, props: T, _owner: v.current };
|
|
34
34
|
}
|
|
35
|
-
return
|
|
35
|
+
return N.Fragment = P, N.jsx = A, N.jsxs = A, N;
|
|
36
36
|
}
|
|
37
37
|
var W = {};
|
|
38
38
|
/**
|
|
@@ -44,10 +44,10 @@ var W = {};
|
|
|
44
44
|
* This source code is licensed under the MIT license found in the
|
|
45
45
|
* LICENSE file in the root directory of this source tree.
|
|
46
46
|
*/
|
|
47
|
-
var
|
|
47
|
+
var Ie;
|
|
48
48
|
function br() {
|
|
49
|
-
return
|
|
50
|
-
var s =
|
|
49
|
+
return Ie || (Ie = 1, process.env.NODE_ENV !== "production" && function() {
|
|
50
|
+
var s = Le, f = Symbol.for("react.element"), P = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), A = Symbol.for("react.provider"), O = Symbol.for("react.context"), m = Symbol.for("react.forward_ref"), x = Symbol.for("react.suspense"), _ = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), C = Symbol.for("react.offscreen"), S = Symbol.iterator, Y = "@@iterator";
|
|
51
51
|
function H(e) {
|
|
52
52
|
if (e === null || typeof e != "object")
|
|
53
53
|
return null;
|
|
@@ -285,7 +285,7 @@ function br() {
|
|
|
285
285
|
} finally {
|
|
286
286
|
ne = !1, re.current = c, Be(), Error.prepareStackTrace = i;
|
|
287
287
|
}
|
|
288
|
-
var
|
|
288
|
+
var M = e ? e.displayName || e.name : "", De = M ? U(M) : "";
|
|
289
289
|
return typeof e == "function" && q.set(e, De), De;
|
|
290
290
|
}
|
|
291
291
|
function qe(e, r, t) {
|
|
@@ -375,7 +375,7 @@ function br() {
|
|
|
375
375
|
if (He(e))
|
|
376
376
|
return y("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Ke(e)), Te(e);
|
|
377
377
|
}
|
|
378
|
-
var
|
|
378
|
+
var L = w.ReactCurrentOwner, Xe = {
|
|
379
379
|
key: !0,
|
|
380
380
|
ref: !0,
|
|
381
381
|
__self: !0,
|
|
@@ -399,9 +399,9 @@ function br() {
|
|
|
399
399
|
return e.key !== void 0;
|
|
400
400
|
}
|
|
401
401
|
function er(e, r) {
|
|
402
|
-
if (typeof e.ref == "string" &&
|
|
403
|
-
var t = l(
|
|
404
|
-
oe[t] || (y('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', l(
|
|
402
|
+
if (typeof e.ref == "string" && L.current && r && L.current.stateNode !== r) {
|
|
403
|
+
var t = l(L.current.type);
|
|
404
|
+
oe[t] || (y('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', l(L.current.type), e.ref), oe[t] = !0);
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
407
|
function rr(e, r) {
|
|
@@ -470,11 +470,11 @@ function br() {
|
|
|
470
470
|
var p = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
|
|
471
471
|
a && rr(o, p), E && tr(o, p);
|
|
472
472
|
}
|
|
473
|
-
return nr(e, a, E, i, n,
|
|
473
|
+
return nr(e, a, E, i, n, L.current, o);
|
|
474
474
|
}
|
|
475
475
|
}
|
|
476
476
|
var ie = w.ReactCurrentOwner, we = w.ReactDebugCurrentFrame;
|
|
477
|
-
function
|
|
477
|
+
function I(e) {
|
|
478
478
|
if (e) {
|
|
479
479
|
var r = e._owner, t = z(e.type, e._source, r ? r.type : null);
|
|
480
480
|
we.setExtraStackFrame(t);
|
|
@@ -532,7 +532,7 @@ Check the top-level render call using <` + t + ">.");
|
|
|
532
532
|
return;
|
|
533
533
|
xe[t] = !0;
|
|
534
534
|
var n = "";
|
|
535
|
-
e && e._owner && e._owner !== ie.current && (n = " It was passed a child from " + l(e._owner.type) + "."),
|
|
535
|
+
e && e._owner && e._owner !== ie.current && (n = " It was passed a child from " + l(e._owner.type) + "."), I(e), y('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), I(null);
|
|
536
536
|
}
|
|
537
537
|
}
|
|
538
538
|
function ke(e, r) {
|
|
@@ -584,11 +584,11 @@ Check the top-level render call using <` + t + ">.");
|
|
|
584
584
|
for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
|
|
585
585
|
var n = r[t];
|
|
586
586
|
if (n !== "children" && n !== "key") {
|
|
587
|
-
|
|
587
|
+
I(e), y("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), I(null);
|
|
588
588
|
break;
|
|
589
589
|
}
|
|
590
590
|
}
|
|
591
|
-
e.ref !== null && (
|
|
591
|
+
e.ref !== null && (I(e), y("Invalid attribute `ref` supplied to `React.Fragment`."), I(null));
|
|
592
592
|
}
|
|
593
593
|
}
|
|
594
594
|
function Ae(e, r, t, n, i, c) {
|
|
@@ -610,8 +610,8 @@ Check the top-level render call using <` + t + ">.");
|
|
|
610
610
|
if (R !== void 0)
|
|
611
611
|
if (n)
|
|
612
612
|
if (ae(R)) {
|
|
613
|
-
for (var
|
|
614
|
-
ke(R[
|
|
613
|
+
for (var M = 0; M < R.length; M++)
|
|
614
|
+
ke(R[M], e);
|
|
615
615
|
Object.freeze && Object.freeze(R);
|
|
616
616
|
} else
|
|
617
617
|
y("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
|
|
@@ -654,13 +654,13 @@ const Rr = "_map_1yxt5_2", Tr = "_touch_1yxt5_26", Cr = "_floaten_1yxt5_45", Pr
|
|
|
654
654
|
);
|
|
655
655
|
}
|
|
656
656
|
);
|
|
657
|
-
return f && We(f.coords) || Object.values(
|
|
657
|
+
return f && We(f.coords) || Object.values(Me());
|
|
658
658
|
} catch (s) {
|
|
659
659
|
console.error(s);
|
|
660
|
-
const f =
|
|
660
|
+
const f = Me();
|
|
661
661
|
return [f.longitude, f.latitude];
|
|
662
662
|
}
|
|
663
|
-
},
|
|
663
|
+
}, Me = () => ({
|
|
664
664
|
longitude: 51.36281969540723,
|
|
665
665
|
latitude: 35.69672648316882
|
|
666
666
|
}), Or = {
|
|
@@ -719,7 +719,7 @@ const Rr = "_map_1yxt5_2", Tr = "_touch_1yxt5_26", Cr = "_floaten_1yxt5_45", Pr
|
|
|
719
719
|
}
|
|
720
720
|
};
|
|
721
721
|
return /* @__PURE__ */ K(Ye.Provider, { value: b, children: s.children });
|
|
722
|
-
}, kr =
|
|
722
|
+
}, kr = Ne(
|
|
723
723
|
({
|
|
724
724
|
options: s,
|
|
725
725
|
mapKey: f,
|
|
@@ -828,9 +828,9 @@ const Rr = "_map_1yxt5_2", Tr = "_touch_1yxt5_26", Cr = "_floaten_1yxt5_45", Pr
|
|
|
828
828
|
}
|
|
829
829
|
);
|
|
830
830
|
}
|
|
831
|
-
), Dr =
|
|
831
|
+
), Dr = Ne(
|
|
832
832
|
(s, f) => /* @__PURE__ */ K(jr, { children: /* @__PURE__ */ K(kr, { ref: f, ...s }) })
|
|
833
833
|
);
|
|
834
834
|
export {
|
|
835
|
-
Dr as
|
|
835
|
+
Dr as default
|
|
836
836
|
};
|