· 6 years ago · Mar 26, 2020, 01:18 PM
1# Astus.Web.Framework.React.Heremap
2
3> Librairie de components React utilisant les api de [Here Maps](https://www.here.com/).
4
5
6[](https://www.npmjs.com/package/astus.web.framework.react.heremapmap) [](https://standardjs.com)
7
8
9Il rend possible l'utilisation de la carte Here sous forme de components React.
10
11Les components peuvent être ainsi importé et render facilement sans setup préalable.
12
13## Installation ?
14
15```bash
16npm install --save astus.web.framework.react.heremap
17```
18
19## Usage
20
21Voici un example de rendu d'un marker sur une carte
22
23```jsx
24import * as React from 'react'
25
26import HEREMap, { Marker } from 'astus.web.framework.react.heremapmap'
27
28class Example extends React.Component {
29 render () {
30 return (
31 <HEREmap>
32 <Marker lat={45.3698982} lng={-73.5638677} />
33 </HEREmap>
34 )
35 }
36}
37```
38# Développement
39
40Étant donné la nature de React et ces différence avec HEREMap qui est purement javascript. On se doit d'adopter la statégie suivante pour développer des components qui répondent bien à la mentalité React.
41
42Si l'on prend un exemple simple comme un cercle:
43
441. La première étape est d'importer le context de la carte et créer un objet de state pour maintenir l'object ```H.map.Circle``` et pouvoir le manipuler.
45
46```js
47export const Circle: React.FC<CircleProps> = (props) => {
48 const mapContext = React.useContext(MapContext);
49
50 // Création d'un state pour maintenir une référence à utliser pour les updates de props
51 const [circle, setCircle] = React.useState<H.map.Circle>();
52
53 // On ne retourne pas de component voir note.
54 return null;
55};
56
57export default Circle;
58```
59>On fait ```return null``` étant donné que l'on modifie le visuelle de la carte par le biais de l'objet <b>HEREmap</b> et non avec des components comme on a l'habitude de le faire en React.
60
61
622. La deuxième étape et de créer l'objet H.map.Circle et de l'ajouter à la carte en appelant les fonctions de la carte au mounting du component.
63
64```js
65 React.useEffect(() => {
66 const { map } = mapContext;
67
68 // création de l'objet
69 const newCircle = new H.map.Circle(
70 {
71 lat: props.lat,
72 lng: props.lng,
73 },
74 radius: props.radius
75 );
76
77 // ajout à la carte Here
78 map.addObject(newCircle);
79
80 // Maintenir la référence
81 setCircle(newCircle);
82
83 // fonction de cleanup
84 return () => {
85 // Retrait de la carte
86 map.removeObject(circle);
87 };
88 }, [!mapContext.map]);
89```
90> Il ne faut pas oublier d'appeler le removeObject dans la fonction <i>cleanup</i> du hook, afin de retirer le cercle de la carte puisque le component n'existe plus et par le fait même doit-être retiré de la carte.
91
923. Finalement, afin de bien respecter la nature déclarative de React, on doit mettre à jour la référence de l'object lorsque les propriété du component sont modifié de l'extérieur. ex: longitude, latitude, radius etc.
93```js
94React.useEffect(() => {
95 if (circle && lat && lng) {
96 // Mise à jour de la position avec la nouvelle latitude-longitude
97 circle.setCenter({
98 lat,
99 lng,
100 });
101 }
102 // Comparaison sur la latitude-longitude
103 }, [circle, lat, lng]);
104
105 React.useEffect(() => {
106 if (circle && radius) {
107 // Mise à jour avec le nouveau radius
108 circle.setRadius(radius);
109 }
110 // Comparaison sur le radius
111 }, [circle, radius]);
112```
113
114### Example complet :
115
116
117```js
118export const Circle: React.FC<CircleProps> = (props) => {
119 const mapContext = React.useContext(MapContext);
120 const [circle, setCircle] = React.useState<H.map.Circle>();
121
122 React.useEffect(() => {
123 const { map } = mapContext;
124
125 const newCircle = new H.map.Circle(
126 {
127 lat,
128 lng,
129 },
130 radius
131 );
132
133 map.addObject(newCircle);
134 setCircle(newCircle);
135
136 return () => {
137 if (map && circle) {
138 map.removeObject(circle);
139 }
140 };
141 }, [!context.map]);
142
143 React.useEffect(() => {
144 if (circle && lat && lng) {
145 circle.setCenter({
146 lat,
147 lng,
148 });
149 }
150 }, [circle, lat, lng]);
151
152 React.useEffect(() => {
153 if (circle && radius) {
154 circle.setRadius(radius);
155 }
156 }, [circle, radius]);
157
158 return null;
159};
160
161export default Circle;
162```
163
164# Docs
165
166## Components
167**[HEREMap](#heremap)** - Le component par défaut de la librairie. <b>HEREMap</b> fait l'instantiation de la platforme (API key, Tiles, etc.).
168Le component <b>HEREMap</b> doit être le parent direct de tous les components supporté par la carte.
169
170### Liste des Components enfants :
171
172**[ClusteredMarker](#clusteredmarker)** - Affichage d'un marker fonctionnant en sur la carte.
173
174**[Marker](#marker)** - Affichage d'un marker sur la carte.
175
176**[Polygon](#polygon)** - Affichage d'un polygone sur la carte.
177
178**[Circle](#circle)** - Affichage d'un cercle sur la carte.
179
180**[RouteLine](#routeline)** - Affichage d'un rectangle sur la carte.
181
182## Behaviors
183
184Les <i>behaviors</i> sont des comportements que l'on peut attacher à la carte. Ils sont généralement une forme de composition de plusieurs service ou fonctionnalité de la carte qui nous permet d'accomplir le comportement.
185
186### Liste des behaviors
187
188**[FollowBehavior](#followbehavior)** - Suivre les markers followables sur la carte.
189
190**[PolygonDrawingBehavior](#polygondrawingbehavior)** - Dessiner un polygone sur la carte.
191
192**[CoordinateFinderBehavior](#coordinatebehaviorfinder)** - Utile pour trouver l'adresse la plus proche
193
194___
195
196## HEREMap
197Containeur pour tous les components de la librairie. Aucun component ne fonctionne si il n'est à l'interieur de celui-ci.
198
199### Usage
200
201```js
202import HEREMap from "astus.web.framework.react.heremap";
203
204<div style={{ height: '100%' }}>
205 <HEREMap zoom={3} interactive={true} secure={true}>
206 </HEREMap>
207</div>;
208```
209
210### Propriétés
211| Property|Type|Default|Description|
212|:-|:-|:-|:-|
213| animateCenter?|Boolean|`'false'`|Pour animer le déplacement des zooms|
214| center?|[Coord](#Coord)|{ lat: 0, lng: 0 }|Coordonnées pour le centre de la carte|
215| hidpi?|Boolean|`'false'`|Si actif utiliser des tuiles de meilleur qualité|
216| interactive?|Boolean|`'false'`|Si actif on peut utiliser la carte de façon intéractive (mouvement et zoom)|
217| secure?|Boolean|`'true'`||
218| zoom?|Number|0|Plus grand est le nombre (max 21), plus on est zoomed-in|
219___
220
221## ClusteredMarker
222Marker de regroupement. Utiliser ce marker lorsque l'on fait face à une situation avec potentiellement beaucoup de marker.
223
224### Usage
225
226```js
227import HEREMap, { ClusteredMarker } from "astus.web.framework.react.heremap";
228
229<div style={{ height: '100%' }}>
230 <HEREMap zoom={3} interactive={true} secure={true}>
231 <ClusteredMarker lat={-73.45957484} lng={43.896784523}>
232 <AnyElement ... />
233 </ClusteredMarker>
234 </HEREMap>
235</div>;
236```
237
238### Propriétés
239| Property|Type|Default|Description|
240|:-|:-|:-|:-|
241| lat|Number||Latitude|
242| lng|Number||Longitude|
243| followable?|Boolean|`'true'`|Sert à déterminer si le marker fait partie des items à suivre voir [FollowBehavior](#FollowBehavior)|
244| children?|JSX.Element||Element visuel à générer comme marker
245| onTap?|(element: HTMLElement) => void||Fonction calback sur l'événement onTap sur le marker|
246___
247
248
249## Marker
250Marker sur la carte
251
252### Usage
253
254```js
255import HEREMap, { ClusteredMarker } from "astus.web.framework.react.heremap";
256
257<div style={{ height: '100%' }}>
258 <HEREMap zoom={3} interactive={true} secure={true}>
259 <Marker lat={-73.45957484} lng={43.896784523} fallowable>
260 <AnyElement ... />
261 </ClusteredMarker>
262 </HEREMap>
263</div>;
264```
265
266### Propriétés
267| Property|Type|Default|Description|
268|:-|:-|:-|:-|
269| lat|Number||Latitude|
270| lng|Number||Longitude|
271| followable?|Boolean|`'true'`|Sert à déterminer si le marker fait partie des items à suivre voir [FollowBehavior](#FollowBehavior)|
272| children?|JSX.Element||Element visuel à générer comme marker
273| draggable?|Boolean|`'false'`|Determine si on peut bouger le marker|
274| toolTop?|JSX.Element||Determine si on peut bouger le marker|
275| onDragPositionChange?|(coord: [Coord](#Coord)) => void||Fonction calback sur l'événement de déplacement du marker (draggable)|
276| onDragEndPositionChange?|(coord: [Coord](#Coord)) => void||Fonction calback sur l'événement de fin de déplacement du marker (draggable)|
277
278___
279
280## Polygon
281
282Component d'affichage de polygon sur la carte.
283### Usage
284
285```js
286import HEREMap, { Polygon } from "astus.web.framework.react.heremap";
287
288<div style={{ height: '100%' }}>
289 <HEREMap zoom={3} interactive={true} secure={true}>
290 <Marker lat={-73.45957484} lng={43.896784523} fallowable />
291 </HEREMap>
292</div>;
293```
294
295### Propriétés
296| Property|Type|Default|Description|
297|:-|:-|:-|:-|
298| coords|[Coord](#Coord) []||Liste de coordonnées|
299| strokeColor?|String|`'black'`|Couleur de contour|
300| lineWidth?|Number|1|Épaisseur des ligne de contour|
301| fillColor?|String|`'white'`|Couleur de remplissage|
302___
303## Circle
304
305___
306## RouteLine
307
308___
309## FollowBehavior
310
311___
312## CoordinateFinderBehavior
313
314___
315## PolygonDrawingBehavior
316
317___
318
319## Misc
320
321### Coord
322
323Représente une coordonnée.
324| Property|Type|Default|Description|
325|:-|:-|:-|:-|
326| lat|Number|`0`|Latitude|
327| lng|Number|`0`|Longitude|
328MIT © [](https://github.com/)