7267101059

Committed 19 Dec 2023 08:13PM UTC coverage: 37.54% (+0.01%) from 37.528%

Build # 7267101059

Build Type

push

github

Committed by

web-flow

Commit Message

feat: MapLibre basemap (#2461)

Run Details

1755 of 7783 branches covered (0.0%)

Branch coverage included in aggregate %.

9 of 14 new or added lines in 6 files covered. (64.29%)

11 existing lines in 3 files now uncovered.

6577 of 14412 relevant lines covered (45.64%)

13.89 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

29.73

/src/components/src/modals/add-map-style-modal.tsx

// Copyright (c) 2023 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import React, {Component} from 'react';
import {polyfill} from 'react-lifecycles-compat';
import classnames from 'classnames';
import styled from 'styled-components';
import MapGLMap, {MapRef} from 'react-map-gl/maplibre';
import {
  StyledModalContent,
  InputLight,
  StyledMapContainer,
  StyledModalVerticalPanel,
  StyledModalSection
} from '../common/styled-components';
import {media} from '@kepler.gl/styles';

// Utils
import {transformRequest} from '@kepler.gl/utils';
import {injectIntl, IntlShape} from 'react-intl';
import {FormattedMessage} from '@kepler.gl/localization';
import maplibregl from 'maplibre-gl';
import {InputStyle, MapState} from '@kepler.gl/types';

const MapH = 190;
const MapW = 264;
const ErrorMsg = {
  styleError:
    'Failed to load map style, make sure it is published. For private style, paste in your access token.'
};

const PreviewMap = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 116px;
  flex-shrink: 0;

  .preview-title {
    font-weight: 500;
    font-size: 10px;
    padding: 8px 0px;
  }

  .preview-title.error {
    color: ${props => props.theme.errorColor};
  }

  ${media.portable`
    margin-left: 32px;
  `};

  ${media.palm`
    margin-left: unset;
    .preview-title {
      margin-top: 0px;
    }
  `};
`;

const StyledPreviewImage = styled.div`
  background: ${props => props.theme.modalImagePlaceHolder};
  border-radius: 4px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.18);
  width: ${MapW}px;
  height: ${MapH}px;
  position: relative;

  .preview-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
  }

  .preview-image-spinner {
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
  }
`;

const InlineLink = styled.a`
  font-weight: 500;

  :hover {
    cursor: pointer;
  }
`;

interface AddMapStyleModalProps {
  inputMapStyle: Function;
  inputStyle: InputStyle;
  loadCustomMapStyle: Function;
  mapboxApiAccessToken: string;
  mapboxApiUrl?: string;
  mapState: MapState;
  intl: IntlShape;
}

function AddMapStyleModalFactory() {
  class AddMapStyleModal extends Component<AddMapStyleModalProps> {
    state = {
      reRenderKey: 0,
      previousToken: null
    };

    static getDerivedStateFromProps(props, state) {
      if (
        props.inputStyle &&
        props.inputStyle.accessToken &&
        props.inputStyle.accessToken !== state.previousToken
      ) {
        // toke has changed
        // ReactMapGl doesn't re-create map when token has changed
        // here we force the map to update

        return {
          reRenderKey: state.reRenderKey + 1,
          previousToken: props.inputStyle.accessToken
        };
      }

      return null;
    }

    mapRef: MapRef | null | undefined;
    _map: maplibregl.Map | undefined;

    componentDidUpdate() {
      const map = this.mapRef && this.mapRef.getMap();
      if (map && this._map !== map) {

        this._map = map;

        map.on('style.load', () => {
          const style = map.getStyle();
          this.loadMapStyleJson(style);
        });

        map.on('error', () => {
          this.loadMapStyleError();
        });
      }
    }

    loadMapStyleJson = style => {
      this.props.loadCustomMapStyle({style, error: false});
    };

    loadMapStyleError = () => {
      this.props.loadCustomMapStyle({error: true});
    };

    render() {
      const {inputStyle, mapState, mapboxApiUrl, intl} = this.props;

      const mapboxApiAccessToken = inputStyle.accessToken || this.props.mapboxApiAccessToken;
      const mapProps = {
        ...mapState,
        baseApiUrl: mapboxApiUrl,
        mapboxAccessToken: mapboxApiAccessToken,
        mapLib: maplibregl,
        preserveDrawingBuffer: true,
        transformRequest
      };

      return (
        <div className="add-map-style-modal">
          <StyledModalContent>
            <StyledModalVerticalPanel>
              <StyledModalSection>
                <div className="modal-section-title">
                  <FormattedMessage id={'modal.addStyle.pasteTitle'} />
                </div>
                <div className="modal-section-subtitle">
                  {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle0'})}
                  <InlineLink
                    target="_blank"
                    href="https://www.mapbox.com/help/studio-manual-publish/#style-url"
                  >
                    {' '}
                    {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle2'})}
                  </InlineLink>{' '}
                  {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle3'})}
                  <InlineLink
                    target="_blank"
                    href="https://docs.mapbox.com/mapbox-gl-js/style-spec"
                  >
                    {' '}
                    {intl.formatMessage({id: 'modal.addStyle.pasteSubtitle4'})}
                  </InlineLink>
                </div>
                <InputLight
                  type="text"
                  value={inputStyle.url || ''}
                  onChange={({target: {value}}) => this.props.inputMapStyle({url: value})}
                  placeholder="e.g. https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
                />
              </StyledModalSection>

              {/* <StyledModalSection>
                <div className="modal-section-title">
                  <FormattedMessage id={'modal.addStyle.publishTitle'} />
                </div>
                <div className="modal-section-subtitle">
                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle1'})}
                  <InlineLink target="_blank" href="https://www.mapbox.com/studio/styles/">
                    {' '}
                    mapbox
                  </InlineLink>{' '}
                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle2'})}
                  <InlineLink
                    target="_blank"
                    href="https://www.mapbox.com/help/studio-manual-publish/"
                  >
                    {' '}
                    {intl.formatMessage({id: 'modal.addStyle.publishSubtitle3'})}
                  </InlineLink>{' '}
                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle4'})}
                </div>

                <div className="modal-section-subtitle">
                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle5'})}
                  <InlineLink
                    target="_blank"
                    href="https://www.mapbox.com/help/how-access-tokens-work/"
                  >
                    {' '}
                    {intl.formatMessage({id: 'modal.addStyle.publishSubtitle6'})}
                  </InlineLink>{' '}
                  {intl.formatMessage({id: 'modal.addStyle.publishSubtitle7'})}
                </div>
                <InputLight
                  type="text"
                  value={inputStyle.accessToken || ''}
                  onChange={({target: {value}}) => this.props.inputMapStyle({accessToken: value})}
                  placeholder={intl.formatMessage({id: 'modal.addStyle.exampleToken'})}
                />
              </StyledModalSection> */}

              <StyledModalSection>
                <div className="modal-section-title">
                  <FormattedMessage id={'modal.addStyle.namingTitle'} />
                </div>
                <InputLight
                  type="text"
                  value={inputStyle.label || ''}
                  onChange={({target: {value}}) => this.props.inputMapStyle({label: value})}
                />
              </StyledModalSection>
            </StyledModalVerticalPanel>
            <PreviewMap>
              <div
                className={classnames('preview-title', {
                  error: inputStyle.error
                })}
              >
                {inputStyle.error
                  ? ErrorMsg.styleError
                  : (inputStyle.style && inputStyle.style.name) || ''}
              </div>
              <StyledPreviewImage className="preview-image">
                {!inputStyle.isValid ? (
                  <div className="preview-image-spinner" />
                ) : (
                  <StyledMapContainer>
                    <MapGLMap
                      {...mapProps}
                      ref={el => {
                        this.mapRef = el;
                      }}
                      key={this.state.reRenderKey}
                      style={{
                        width: MapW,
                        height: MapH
                      }}
                      mapStyle={inputStyle.url === null ? undefined : inputStyle.url}
                    />
                  </StyledMapContainer>
                )}
              </StyledPreviewImage>
            </PreviewMap>
          </StyledModalContent>
        </div>
      );
    }
  }

  return injectIntl(polyfill(AddMapStyleModal));
}

export default AddMapStyleModalFactory;

1	// Copyright (c) 2023 Uber Technologies, Inc.
2	//
3	// Permission is hereby granted, free of charge, to any person obtaining a copy
4	// of this software and associated documentation files (the "Software"), to deal
5	// in the Software without restriction, including without limitation the rights
6	// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7	// copies of the Software, and to permit persons to whom the Software is
8	// furnished to do so, subject to the following conditions:
9	//
10	// The above copyright notice and this permission notice shall be included in
11	// all copies or substantial portions of the Software.
12	//
13	// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14	// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15	// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16	// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17	// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18	// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19	// THE SOFTWARE.
20
21	import React, {Component} from 'react';	4✔
22	import {polyfill} from 'react-lifecycles-compat';	4✔
23	import classnames from 'classnames';	4✔
24	import styled from 'styled-components';	4✔
25	import MapGLMap, {MapRef} from 'react-map-gl/maplibre';	4✔
26	import {	4✔
27	StyledModalContent,
28	InputLight,
29	StyledMapContainer,
30	StyledModalVerticalPanel,
31	StyledModalSection
32	} from '../common/styled-components';
33	import {media} from '@kepler.gl/styles';	4✔
34
35	// Utils
36	import {transformRequest} from '@kepler.gl/utils';	4✔
37	import {injectIntl, IntlShape} from 'react-intl';	4✔
38	import {FormattedMessage} from '@kepler.gl/localization';	4✔
39	import maplibregl from 'maplibre-gl';	4✔
40	import {InputStyle, MapState} from '@kepler.gl/types';
41
42	const MapH = 190;	4✔
43	const MapW = 264;
44	const ErrorMsg = {	4✔
45	styleError:
46	'Failed to load map style, make sure it is published. For private style, paste in your access token.'
47	};
48
49	const PreviewMap = styled.div`	4✔
50	align-items: center;
51	display: flex;
52	flex-direction: column;
53	justify-content: center;
54	margin-left: 116px;
55	flex-shrink: 0;
56
57	.preview-title {
58	font-weight: 500;
59	font-size: 10px;
60	padding: 8px 0px;
61	}
62
63	.preview-title.error {
64	color: ${props => props.theme.errorColor};
65	}
66
67	${media.portable`	4✔
68	margin-left: 32px;
69	`};
70
71	${media.palm`
72	margin-left: unset;
73	.preview-title {
74	margin-top: 0px;
75	}
76	`};
77	`;
78
79	const StyledPreviewImage = styled.div`	×
80	background: ${props => props.theme.modalImagePlaceHolder};
81	border-radius: 4px;
82	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.18);
83	width: ${MapW}px;
84	height: ${MapH}px;
85	position: relative;
86
87	.preview-image-placeholder {
88	position: absolute;
89	top: 0;
90	left: 0;
91	}
92
93	.preview-image-spinner {
94	position: absolute;
95	left: calc(50% - 25px);
96	top: calc(50% - 25px);
97	}
98	`;
99
100	const InlineLink = styled.a`	×
101	font-weight: 500;
102
103	:hover {
104	cursor: pointer;
105	}
106	`;
107
108	interface AddMapStyleModalProps {
109	inputMapStyle: Function;
110	inputStyle: InputStyle;
111	loadCustomMapStyle: Function;
112	mapboxApiAccessToken: string;
113	mapboxApiUrl?: string;
114	mapState: MapState;
115	intl: IntlShape;
116	}
117
118	function AddMapStyleModalFactory() {	32✔
119	class AddMapStyleModal extends Component<AddMapStyleModalProps> {
120	state = {
121	reRenderKey: 0,
122	previousToken: null	4✔
123	};
124
125	static getDerivedStateFromProps(props, state) {
126	if (
127	props.inputStyle &&
128	props.inputStyle.accessToken &&
129	props.inputStyle.accessToken !== state.previousToken
130	) {
131	// toke has changed	×
132	// ReactMapGl doesn't re-create map when token has changed
133	// here we force the map to update	×
134
135	return {	×
136	reRenderKey: state.reRenderKey + 1,
137	previousToken: props.inputStyle.accessToken
138	};
139	}
140
141	return null;
142	}
143
144	mapRef: MapRef \| null \| undefined;
145	_map: maplibregl.Map \| undefined;
146
147	componentDidUpdate() {
148	const map = this.mapRef && this.mapRef.getMap();	×
149	if (map && this._map !== map) {	×
150
151	this._map = map;
152
153	map.on('style.load', () => {
154	const style = map.getStyle();
155	this.loadMapStyleJson(style);	×
UNCOV 156	});	×
157
158	map.on('error', () => {
159	this.loadMapStyleError();
160	});
UNCOV 161	}	×
162	}
163
164	loadMapStyleJson = style => {
165	this.props.loadCustomMapStyle({style, error: false});	4✔
166	};
167
168	loadMapStyleError = () => {
169	this.props.loadCustomMapStyle({error: true});	×
170	};
171
172	render() {	×
UNCOV 173	const {inputStyle, mapState, mapboxApiUrl, intl} = this.props;	×
174
175	const mapboxApiAccessToken = inputStyle.accessToken \|\| this.props.mapboxApiAccessToken;	×
176	const mapProps = {
177	...mapState,
178	baseApiUrl: mapboxApiUrl,	×
179	mapboxAccessToken: mapboxApiAccessToken,
NEW 180	mapLib: maplibregl,	×
181	preserveDrawingBuffer: true,	×
182	transformRequest
183	};
184
185	return (
186	<div className="add-map-style-modal">
187	<StyledModalContent>
188	<StyledModalVerticalPanel>
189	<StyledModalSection>	×
190	<div className="modal-section-title">	×
191	<FormattedMessage id={'modal.addStyle.pasteTitle'} />	×
192	</div>
193	<div className="modal-section-subtitle">	×
194	{intl.formatMessage({id: 'modal.addStyle.pasteSubtitle0'})}	×
195	<InlineLink	×
196	target="_blank"
197	href="https://www.mapbox.com/help/studio-manual-publish/#style-url"	×
198	>
199	{' '}
200	{intl.formatMessage({id: 'modal.addStyle.pasteSubtitle2'})}
201	</InlineLink>{' '}
202	{intl.formatMessage({id: 'modal.addStyle.pasteSubtitle3'})}
203	<InlineLink
204	target="_blank"
205	href="https://docs.mapbox.com/mapbox-gl-js/style-spec"
206	>
207	{' '}
208	{intl.formatMessage({id: 'modal.addStyle.pasteSubtitle4'})}
209	</InlineLink>
210	</div>
211	<InputLight
212	type="text"
213	value={inputStyle.url \|\| ''}
214	onChange={({target: {value}}) => this.props.inputMapStyle({url: value})}
215	placeholder="e.g. https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
216	/>
217	</StyledModalSection>
218
219	{/* <StyledModalSection>
220	<div className="modal-section-title">
221	<FormattedMessage id={'modal.addStyle.publishTitle'} />
222	</div>
223	<div className="modal-section-subtitle">
224	{intl.formatMessage({id: 'modal.addStyle.publishSubtitle1'})}
225	<InlineLink target="_blank" href="https://www.mapbox.com/studio/styles/">
226	{' '}
227	mapbox
228	</InlineLink>{' '}
229	{intl.formatMessage({id: 'modal.addStyle.publishSubtitle2'})}
230	<InlineLink
231	target="_blank"
232	href="https://www.mapbox.com/help/studio-manual-publish/"
233	>
234	{' '}
235	{intl.formatMessage({id: 'modal.addStyle.publishSubtitle3'})}
236	</InlineLink>{' '}
237	{intl.formatMessage({id: 'modal.addStyle.publishSubtitle4'})}
238	</div>
239
240	<div className="modal-section-subtitle">
241	{intl.formatMessage({id: 'modal.addStyle.publishSubtitle5'})}
242	<InlineLink
243	target="_blank"
244	href="https://www.mapbox.com/help/how-access-tokens-work/"
245	>
246	{' '}
247	{intl.formatMessage({id: 'modal.addStyle.publishSubtitle6'})}
248	</InlineLink>{' '}
249	{intl.formatMessage({id: 'modal.addStyle.publishSubtitle7'})}
250	</div>
251	<InputLight
252	type="text"
253	value={inputStyle.accessToken \|\| ''}
254	onChange={({target: {value}}) => this.props.inputMapStyle({accessToken: value})}
255	placeholder={intl.formatMessage({id: 'modal.addStyle.exampleToken'})}
256	/>
257	</StyledModalSection> */}
258
259	<StyledModalSection>
260	<div className="modal-section-title">
261	<FormattedMessage id={'modal.addStyle.namingTitle'} />
262	</div>
263	<InputLight
264	type="text"
265	value={inputStyle.label \|\| ''}
266	onChange={({target: {value}}) => this.props.inputMapStyle({label: value})}	×
267	/>
268	</StyledModalSection>
269	</StyledModalVerticalPanel>
270	<PreviewMap>
271	<div
UNCOV 272	className={classnames('preview-title', {	×
UNCOV 273	error: inputStyle.error	×
274	})}
275	>
276	{inputStyle.error
277	? ErrorMsg.styleError
278	: (inputStyle.style && inputStyle.style.name) \|\| ''}
279	</div>
280	<StyledPreviewImage className="preview-image">
281	{!inputStyle.isValid ? (
282	<div className="preview-image-spinner" />
283	) : (
284	<StyledMapContainer>
NEW 285	<MapGLMap	×
286	{...mapProps}
287	ref={el => {
288	this.mapRef = el;
289	}}
290	key={this.state.reRenderKey}
291	style={{	×
292	width: MapW,
293	height: MapH	×
294	}}
295	mapStyle={inputStyle.url === null ? undefined : inputStyle.url}
296	/>
297	</StyledMapContainer>
298	)}
299	</StyledPreviewImage>
300	</PreviewMap>
301	</StyledModalContent>
302	</div>
303	);
304	}
305	}
306
307	return injectIntl(polyfill(AddMapStyleModal));
308	}
309
310	export default AddMapStyleModalFactory;

keplergl / kepler.gl / 7267101059

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous