Happy to be here
;
29 | const popupSentier = Old home
;
30 |
31 | markers = [
32 |
65 |
66 | 
77 |
78 |
79 |
80 |
81 | 82 | 88 | Documentation 89 | 90 | 96 | Examples sources 97 | 98 | 99 |
555 | );
556 | }
557 | }
558 |
--------------------------------------------------------------------------------
/examples/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(react-mapbox-wrapper
67 | 72 |
77 |
78 | 81 | 82 | 88 | Documentation 89 | 90 | 96 | Examples sources 97 | 98 | 99 |
100 |
101 |
102 | We use algolia's default api key, places may have imprecise coordinates
103 |
104 |
105 |
106 |
107 |
129 |
130 | SimpleMap with fixed size
108 |
109 |
111 | {`import React from 'react';
112 | import MapboxMap from 'react-mapbox-wrapper';
113 |
114 | export default function SimpleMap({coordinates}) {
115 | return (
116 |
127 |
128 |
117 |
122 | );
123 | }
124 |
125 | SimpleMap.displayName = 'SimpleMap';`}
126 |
131 |
175 |
176 | Marker
132 |
133 |
135 | {`import React, { Component } from 'react';
136 | import MapboxMap, { Marker } from 'react-mapbox-wrapper';
137 |
138 | export default class MapWithMarker extends Component {
139 | constructor(props) {
140 | super(props);
141 |
142 | this.onMapLoad = this.onMapLoad.bind(this);
143 | }
144 |
145 | onMapLoad(map) {
146 | this.map = map;
147 | this.forceUpdate();
148 | }
149 |
150 | render() {
151 | let marker;
152 | const { coordinates } = this.props;
153 |
154 | if (this.map) {
155 | marker =
165 | {marker}
166 |
167 | );
168 | }
169 | }
170 |
171 | MapWithMarker.displayName = 'MapWithMarker';`}
172 |
173 |
174 |
177 |
235 |
236 | Moving Marker with array-style LngLat
178 |
179 |
181 | {`import React, { Component } from 'react';
182 | import MapboxMap, { Marker } from 'react-mapbox-wrapper';
183 |
184 | export default class MapWithMovingMarker extends Component {
185 | constructor(props) {
186 | super(props);
187 |
188 | this.state = {
189 | coordinates: props.coordinates,
190 | };
191 |
192 | this.onMapLoad = this.onMapLoad.bind(this);
193 | }
194 |
195 | componentDidMount() {
196 | setInterval(() => {
197 | const { lat, lng } = this.props.coordinates;
198 |
199 | this.setState({
200 | coordinates: [lng + 0.001 * Math.random(), lat + 0.001 * Math.random()],
201 | });
202 | }, 1000);
203 | }
204 |
205 | onMapLoad(map) {
206 | this.map = map;
207 | this.forceUpdate();
208 | }
209 |
210 | render() {
211 | let marker;
212 | const { coordinates } = this.props;
213 |
214 | if (this.map) {
215 | marker =
225 | {marker}
226 |
227 | );
228 | }
229 | }
230 |
231 | MapWithMovingMarker.displayName = 'MapWithMovingMarker';`}
232 |
233 |
234 |
237 |
291 |
292 | Marker with Popup on Click
238 |
239 |
241 | {`import React, { Component } from 'react';
242 | import MapboxMap, { Marker } from 'react-mapbox-wrapper';
243 |
244 | export default class MarkerWithPopup extends Component {
245 | constructor(props) {
246 | super(props);
247 |
248 | this.onMapLoad = this.onMapLoad.bind(this);
249 | }
250 |
251 | onMapLoad(map) {
252 | this.map = map;
253 | this.forceUpdate();
254 | }
255 |
256 | render() {
257 | let marker;
258 | const { coordinates } = this.props;
259 |
260 | if (this.map) {
261 | const popup =
281 | {marker}
282 |
283 | );
284 | }
285 | }
286 |
287 | MarkerWithPopup.displayName = 'MarkerWithPopup';`}
288 |
289 |
290 | Meaningful content on my Marker
;
262 |
263 | marker = (
264 |
293 |
352 |
353 | Custom Marker with Popup on Over
294 |
295 |
297 | {`import React, { Component } from 'react';
298 | import MapboxMap, { Marker } from 'react-mapbox-wrapper';
299 |
300 | export default class CustomMarker extends Component {
301 | constructor(props) {
302 | super(props);
303 |
304 | this.onMapLoad = this.onMapLoad.bind(this);
305 | }
306 |
307 | onMapLoad(map) {
308 | this.map = map;
309 | this.forceUpdate();
310 | }
311 |
312 | render() {
313 | let marker;
314 | const { coordinates } = this.props;
315 |
316 | if (this.map) {
317 | const popup =
328 |
329 | 🏢
330 |
331 |
332 | );
333 | }
334 |
335 | return (
336 |
342 | {marker}
343 |
344 | );
345 | }
346 | }
347 |
348 | CustomMarker.displayName = 'CustomMarker';`}
349 |
350 |
351 | http://localhost
;
318 |
319 | marker = (
320 |
354 |
409 |
410 | Circle
355 |
356 |
358 | {`import React, { Component } from 'react';
359 | import MapboxMap, { Circle } from 'react-mapbox-wrapper';
360 |
361 | export default class MapWithCircle extends Component {
362 | constructor(props) {
363 | super(props);
364 |
365 | this.onMapLoad = this.onMapLoad.bind(this);
366 | }
367 |
368 | onMapLoad(map) {
369 | this.map = map;
370 | this.forceUpdate();
371 | }
372 |
373 | render() {
374 | let circle;
375 | const { coordinates } = this.props;
376 |
377 | if(this.map) {
378 | circle =
399 | {circle}
400 |
401 | );
402 | }
403 | }
404 |
405 | MapWithCircle.displayName = 'MapWithCircle';`}
406 |
407 |
408 |
411 |
441 |
442 | Map navigation controls with custom position
412 |
413 |
415 | {`import React from 'react';
416 | import PropTypes from 'prop-types';
417 | import MapboxMap from 'react-mapbox-wrapper';
418 |
419 | /**
420 | * MapControlPosition Functional Component.
421 | */
422 | export default function MapWithNavigationControlsPosition({coordinates}) {
423 | return (
424 |
439 |
440 |
443 |
539 |
540 |
554 | Radius, Marker, Popup and fitBounds
444 |
445 |
447 | {`import React, { Component } from 'react';
448 | import MapboxMap, { Marker, Circle, Helpers } from 'react-mapbox-wrapper';
449 |
450 | const SENTIER_COORDINATES = { lat: 48.868526, lng: 2.3434886 };
451 | const RADIUS_COORDINATES = { lat: 48.870362, lng: 2.3400597 };
452 |
453 | export default class AllInOne extends Component {
454 | constructor(props) {
455 | super(props);
456 |
457 | this.onMapLoad = this.onMapLoad.bind(this);
458 | }
459 |
460 | onMapLoad(map, coordinates) {
461 | this.map = map;
462 | this.forceUpdate();
463 |
464 | const bounds = Helpers.newBounds();
465 | bounds.extend(Helpers.newBound({lat: 48.872198, lng: 2.3366308}));
466 | bounds.extend(Helpers.newBound(SENTIER_COORDINATES));
467 |
468 | this.map.jumpTo(this.map.cameraForBounds(bounds, { padding: 120 }));
469 | }
470 |
471 | render() {
472 | let markers;
473 | if (this.map) {
474 | const popupHaussmann =
487 |
488 | 🏢
489 |
490 | ,
491 |
500 |
501 | 🏠
502 |
503 | ,
504 |
529 | {markers}
530 |
531 | );
532 | }
533 | }
534 |
535 | AllInOne.displayName = 'AllInOne';`}
536 |
537 |
538 | Happy to be here
;
475 | const popupSentier = Old home
;
476 |
477 | markers = [
478 | http://localhost
;
23 |
24 | marker = (
25 | Meaningful content on my Marker
;
23 |
24 | marker = (
25 |
11 |
13 | );
14 | }
15 |
16 | SimpleMap.displayName = 'SimpleMap';
17 |
18 | SimpleMap.propTypes = {
19 | coordinates: PropTypes.oneOfType([
20 | PropTypes.shape({
21 | lat: PropTypes.number.isRequired,
22 | lng: PropTypes.number.isRequired,
23 | }),
24 | PropTypes.shape({
25 | lat: PropTypes.number.isRequired,
26 | lon: PropTypes.number.isRequired,
27 | }),
28 | PropTypes.arrayOf(PropTypes.number.isRequired),
29 | ]).isRequired,
30 | };
31 |
--------------------------------------------------------------------------------
/examples/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
--------------------------------------------------------------------------------
/examples/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import * as Sentry from '@sentry/browser';
4 | import App from './App';
5 |
6 | if (process.env.NODE_ENV === 'production') {
7 | Sentry.init({dsn: "https://250287b3c5ac41809f8823a96707acca@sentry.io/1549967"});
8 | }
9 |
10 | ReactDOM.render(
255 | {children}
256 |
257 | );
258 | }
259 | }
260 |
261 | MapboxMap.propTypes = {
262 | accessToken: PropTypes.string,
263 | coordinates: LngLatLike.isRequired,
264 | children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
265 | className: PropTypes.string,
266 | fullscreenControlPosition: PropTypes.string,
267 | maxZoom: PropTypes.number,
268 | minZoom: PropTypes.number,
269 | navigationControlPosition: PropTypes.string,
270 | navigationType: PropTypes.shape({
271 | type: PropTypes.oneOf(navigationMethods),
272 | options: PropTypes.shape({ speed: PropTypes.number, curve: PropTypes.number }),
273 | }),
274 | onChange: PropTypes.func,
275 | onClick: PropTypes.func,
276 | onLoad: PropTypes.func,
277 | onZoomEnd: PropTypes.func,
278 | onZoomStart: PropTypes.func,
279 | renderNotSupported: PropTypes.func,
280 | mapboxStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
281 | withCompass: PropTypes.bool,
282 | withFullscreen: PropTypes.bool,
283 | withZoom: PropTypes.bool,
284 | zoom: PropTypes.number,
285 | };
286 |
287 | MapboxMap.defaultProps = {
288 | accessToken: '',
289 | children: null,
290 | className: '',
291 | fullscreenControlPosition: 'top-right',
292 | maxZoom: undefined,
293 | minZoom: undefined,
294 | navigationControlPosition: 'bottom-right',
295 | onChange: undefined,
296 | onClick: undefined,
297 | onLoad: undefined,
298 | onZoomEnd: undefined,
299 | onZoomStart: undefined,
300 | mapboxStyle: DEFAULT_STYLE,
301 | navigationType: { type: 'jumpTo' },
302 | withCompass: false,
303 | withFullscreen: false,
304 | withZoom: false,
305 | zoom: 15,
306 | renderNotSupported: className => (
307 |
317 |
329 | ),
330 | };
331 |
--------------------------------------------------------------------------------
/src/MapboxMap/index.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import sinon from 'sinon';
4 | import mapboxgl from 'Lib';
5 | import MapboxMap from './index';
6 |
7 | function defaultProps() {
8 | return {
9 | coordinates: {
10 | lat: 20,
11 | lng: 20,
12 | },
13 | zoom: 15,
14 | };
15 | }
16 |
17 | describe('
326 | Your browser does not support Mapbox GL
327 |
328 |
223 | {children}
224 |
225 | );
226 | } else {
227 | wrapperProps = this.markerProps;
228 | }
229 |
230 | return (
231 |
232 | {marker}
233 | {popup && (
234 |