@neshan-maps-platform/react-openlayers 2.0.15 → 3.0.0
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 +85 -221
- package/dist/neshan-ol-react-sdk.es.js +1050 -0
- package/dist/neshan-ol-react-sdk.umd.js +27 -0
- package/dist/style.css +1 -1
- package/dist/types/App.d.ts +2 -3
- package/dist/types/App.model.d.ts +3 -3
- package/dist/types/components/Map.d.ts +4 -5
- package/dist/types/components/Map.model.d.ts +45 -55
- package/dist/types/components/index.d.ts +3 -3
- package/dist/types/main.d.ts +1 -1
- package/dist/types/parameters/index.d.ts +46 -47
- 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 +46 -48
- package/dist/React-Openlayers.js +0 -836
- package/dist/React-Openlayers.umd.cjs +0 -27
- package/dist/types/assets/ol.model.d.ts +0 -130
- package/dist/types/store/ContextProvider.d.ts +0 -3
- package/dist/types/store/ContextProvider.model.d.ts +0 -11
- package/dist/types/store/context.d.ts +0 -11
package/README.md
CHANGED
|
@@ -1,221 +1,85 @@
|
|
|
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
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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
|
-
[](https://opencollective.com/ant-design#support) -->
|
|
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
|
+
## ⚙️ Before Install
|
|
13
|
+
You need a map key to use our map on your react web application.
|
|
14
|
+
You can signup and get a key from [Our Platfrom](https://platform.neshan.org/panel/api-key).
|
|
15
|
+
<br/>
|
|
16
|
+
For more information, visit our [doc page](https://platform.neshan.org/sdk/react-component#).
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## 📦 Install
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @neshan-maps-platform/react-openlayers
|
|
23
|
+
npm install @neshan-maps-platform/ol
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
yarn add @neshan-maps-platform/react-openlayers
|
|
28
|
+
yarn add @neshan-maps-platform/ol
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## 🔨 Usage
|
|
33
|
+
|
|
34
|
+
```jsx
|
|
35
|
+
import {useEffect, useRef} from "react"
|
|
36
|
+
import {Map} from "@neshan-maps-platform/ol"
|
|
37
|
+
import NeshanMap, {NeshanMapRef} from "@neshan-maps-platform/react-openlayers"
|
|
38
|
+
|
|
39
|
+
function App() {
|
|
40
|
+
const mapRef = useRef<NeshanMapRef | null>(null)
|
|
41
|
+
|
|
42
|
+
const onInit = (map: Map) => {
|
|
43
|
+
map.setMapType("osm-bright")
|
|
44
|
+
map.switchTrafficLayer(true)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (mapRef.current?.map) {
|
|
49
|
+
mapRef.current?.map.switchTrafficLayer(true)
|
|
50
|
+
mapRef.current?.map.setMapType("standard-night")
|
|
51
|
+
}
|
|
52
|
+
}, [])
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<div style={{ width: "100vh"}}>
|
|
57
|
+
<NeshanMap
|
|
58
|
+
mapKey="Your_Map_Key"
|
|
59
|
+
defaultType="neshan"
|
|
60
|
+
center={{latitude: 35.7665394, longitude: 51.4749824}}
|
|
61
|
+
style={{height: "48vh", width: "100%"}}
|
|
62
|
+
onInit={onInit}
|
|
63
|
+
zoom={13}
|
|
64
|
+
traffic={false}
|
|
65
|
+
poi={false}
|
|
66
|
+
></NeshanMap>
|
|
67
|
+
<hr/>
|
|
68
|
+
<NeshanMap
|
|
69
|
+
ref={mapRef}
|
|
70
|
+
mapKey="Your_Map_Key"
|
|
71
|
+
defaultType="dreamy"
|
|
72
|
+
style={{height: "48vh", width: "100%"}}
|
|
73
|
+
traffic={false}
|
|
74
|
+
poi={false}
|
|
75
|
+
></NeshanMap>
|
|
76
|
+
</div>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export default App
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### TypeScript
|
|
84
|
+
|
|
85
|
+
`@neshan-maps-platform/react-openlayers` is written in TypeScript with complete definitions.
|