@neshan-maps-platform/react-openlayers 2.0.16 → 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.
Files changed (17) hide show
  1. package/README.md +43 -179
  2. package/dist/neshan-ol-react-sdk.es.js +1050 -0
  3. package/dist/neshan-ol-react-sdk.umd.js +27 -0
  4. package/dist/style.css +1 -1
  5. package/dist/types/App.d.ts +1 -2
  6. package/dist/types/components/Map.d.ts +0 -1
  7. package/dist/types/components/Map.model.d.ts +5 -15
  8. package/dist/types/components/index.d.ts +3 -4
  9. package/dist/types/parameters/index.d.ts +0 -1
  10. package/dist/types/utils/location.util.d.ts +1 -1
  11. package/package.json +8 -10
  12. package/dist/React-Openlayers.js +0 -836
  13. package/dist/React-Openlayers.umd.cjs +0 -27
  14. package/dist/types/assets/ol.model.d.ts +0 -130
  15. package/dist/types/store/ContextProvider.d.ts +0 -3
  16. package/dist/types/store/ContextProvider.model.d.ts +0 -11
  17. package/dist/types/store/context.d.ts +0 -11
package/README.md CHANGED
@@ -9,63 +9,6 @@
9
9
  An official React wrapper for neshan-map-openlayers library
10
10
  </div>
11
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://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](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
12
  ## ⚙️ Before Install
70
13
  You need a map key to use our map on your react web application.
71
14
  You can signup and get a key from [Our Platfrom](https://platform.neshan.org/panel/api-key).
@@ -77,79 +20,61 @@ For more information, visit our [doc page](https://platform.neshan.org/sdk/react
77
20
 
78
21
  ```bash
79
22
  npm install @neshan-maps-platform/react-openlayers
23
+ npm install @neshan-maps-platform/ol
80
24
  ```
81
25
 
82
26
  ```bash
83
27
  yarn add @neshan-maps-platform/react-openlayers
28
+ yarn add @neshan-maps-platform/ol
84
29
  ```
85
30
 
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
31
 
91
32
  ## 🔨 Usage
92
33
 
93
34
  ```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"
35
+ import {useEffect, useRef} from "react"
36
+ import {Map} from "@neshan-maps-platform/ol"
37
+ import NeshanMap, {NeshanMapRef} from "@neshan-maps-platform/react-openlayers"
100
38
 
101
39
  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
- )
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
+ )
153
78
  }
154
79
 
155
80
  export default App
@@ -158,64 +83,3 @@ export default App
158
83
  ### TypeScript
159
84
 
160
85
  `@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
- [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](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 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](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
- [![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
216
-
217
- ## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
218
-
219
- [![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
220
-
221
- [![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) -->