제가 맵박스 GL을 사용해야 하는 이유.

오늘까지 나는 운 좋게도 람다 학교 실험실의 일원으로서 번영으로 가는 다리를 위해 일했다.(Lambda 실험실은 대형 단체 프로젝트와 같아서 8주 안에 한 조직을 위해 문제를 해결할 수 있습니다. 제 팀은 웹 개발자 5명과 데이터 과학자 3명을 포함합니다.번영으로 가는 다리는 미국에 본사를 두고 있는 비영리 조직으로 100만여 명을 연결하고 290여 개의 육교를 건설했으며 동남아, 아프리카와 중남미 18개국으로 확장했다.교육 개선과 빈곤 감소를 돕다.
이 글의 제목에서 말한 바와 같이'제1부분'입니다. 저는 개인 전단 개발자와 팀의 일부로서 모든 사용자의 이야기를 실현하는 댓글을 추가할 계획입니다.

Bridges to Profession은 우리 팀에게 교량의 데이터를 지도에 가시화하도록 요구했고, 우리는 맵박스 라이브러리를 사용하여 이 점을 실현하기로 결정했다.맵박스는 기능이 강한 라이브러리로 시각화된 위치를 도와 지도에 멋진 기능을 추가합니다.맵박스는 인기 있는 라이브러리로 우보 등이 응용 프로그램의 지도 시스템으로 사용한다.최종 제품을 보려면 my team's project 링크를 클릭하십시오.
우리는 사용자 이야기(또는 우리가 이 프로젝트에 설정한 목표)를 되돌아볼 것이다.

사용자는 사이트에서 지도를 볼 수 있으며 번영의 다리로 통하는 위치부터 시작할 수 있다.

사용자는 전체 화면으로 지도를 볼 수 있다.

사용자는 브리지 중 하나를 클릭하면 브리지에 대한 자세한 정보가 담긴 팝업 창을 볼 수 있습니다.

사용자는 자신의 상태(거부됨, 인식됨, 완료됨, 확인됨, 탐사 중 또는 건설 중)에 따라 다리를 필터링할 수 있습니다.

사용자는 지도상의 검색란을 사용할 수 있으며, 사용자가 특정 위치에서 다리를 찾을 수 있도록 한다.

사용자 이야기를 작성하면 구축할 내용을 기획하는 데 도움을 줄 것입니다.그것은 사용자로 하여금 사물을 어떻게 생각하는지, 그리고 그들이 사물을 어떻게 생각하는지 보게 한다.우리는 당신의 응용 프로그램이 사용자에게 사용될 것이며, 사용자는 당신의 응용 프로그램을 가치 있게 만드는 사람이라는 것을 항상 자신에게 일깨워야 한다.

우리 팀은 Trello를 하나의 도구로 사용하여 모든 사람이 무엇을 하고 있는지 추적하고 한 명 이상의 팀원들이 같은 기능에서 일하는 것을 피한다.

React에서 Mapbox를 사용하기 전에 알아야 할 것이 있습니다.

이것은 너의 시간과 탈모를 절약할 수 있다

더 많은 기술을 소개하기 전에, 프로젝트가 Vanilla JavaScript나 React를 사용하는지 확인하기 전에 막아 보겠습니다.Vanilla JavaScript를 사용하고 있다면 이 블로그를 읽는 것을 멈춰야 합니다. 왜냐하면 저희 팀은 Mapbox JS GL을 사용하지 않기 때문입니다. Mapbox JS GL은 React와 함께 사용할 수 있는 좋은 라이브러리가 아닙니다. DOM(문서 객체 모델)을 조작해야 하기 때문입니다.react에서 DOM을 조작하는 것은 좋은 방법이 아닙니다. 왜냐하면 react 자체가 가상 DOM을 사용하고 있기 때문입니다.
처음에 우리 팀은 맵박스 JS GL을 사용하라고 소개받았지만 일부 기능을 추가하려 하자 "왜 우리는 DOM을 조작하지 말아야 할 때 DOM을 조작해야 합니까?"라고 생각했다.그리고 몇 가지 연구를 통해 나는 비로소 React Map GL 우리 단체가 사용할 수 있다는 것을 발견했다.우리가 관건을 하나 잡은 후, 우리의 생활은 더욱 가벼워졌다💪.

그러면 React Map GL을 어떻게 표시합니까?

In order to use this library, you will need to do a npm install on your React app. Open your terminal on the app and type:

npm install --save react-map-gl

This will let you import the component to display a map. After successfully installing the library to your app, go ahead and make a component file that's to display the Mapbox. Then you will need to import the ReactMapGL component from the library. On the top of your editor before you define your component import this as follows:

import ReactMapGL from 'react-map-gl';

Then you will need to create useState to set your map for where and how close your map want to be zoomed in as a default. I named it viewport and coded it as follows:

  const [viewport, setViewport] = useState({
    latitude: -1.9444,
    longitude: 30.0616,
    zoom: 7.8,
    bearing: 0,
    pitch: 0,
  });

Now you would want to render the React Map GL component in your return statement as follows:

  return (
    <div className="mapbox-react">
      <ReactMapGL
        {...viewport}
        width="1000px"
        height="500px"
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapboxApiAccessToken={Your-token-needs-to-go-here}
      />
    </div>
  );

As you can see above, you can change the size of the Mapbox inside the component by changing width and height. Then you will notice, you will need an access token from the Mapbox. Let's find out how to get an access token from Mapbox.

맵박스에서 액세스 토큰을 가져오는 방법

방문 영패를 받으려면 mapbox webiste 에 계정을 만들어야 합니다.(무료 옵션이 있기 때문에 금액을 지불할 필요가 없습니다.)다음은 액세스 토큰을 가져오는 절차입니다.

계정 생성 및 로그인

상단 메뉴

에서 영패를 클릭합니다.

+ 영패 만들기 버튼

을 클릭합니다.

자신의 영패를 명명하고 지도 상자에 추가할 옵션을 선택하십시오.

그런 다음 아래의 영패 만들기 를 클릭합니다.

당신의 영패는 목록에 있어야 합니다.

속성에 복사하여 붙여넣습니다.

만약 GitHub로 전송할 때 영패를 보호하고 싶다면, 개인적으로 React 응용 프로그램에서 환경 파일을 만들고 그곳에서 영패에 접근하는 것을 권장합니다.나는 env 파일에서 영패를 REACT\u APP\u MAPBOX\u 영패로 명명했다.
다음은 전체 어셈블리의 모양입니다.

import React, { useState} from 'react';
import ReactMapGL from 'react-map-gl';

const MapboxExample= () => {
  const [viewport, setViewport] = useState({
    latitude: -1.9444,
    longitude: 30.0616,
    zoom: 7.8,
    bearing: 0,
    pitch: 0,
  });

  return (
    <div className="mapbox-react">
      <ReactMapGL
        {...viewport}
        width="1000px"
        height="500px"
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={nextViewport => setViewport(nextViewport)}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      />
    </div>
  );
};

export default MapboxExample;

영패를 구성 요소의 맵박스 Api에 입력하고 영패에 접근합니다.당신의 지도 상자는 지금 성공적으로 표시되어야 합니다. 아래와 같습니다!

나의 첫 과학 기술 문장을 읽어 주셔서 감사합니다.나는 개선해야 할 많은 일이 있다는 것을 안다.만약 당신에게 어떤 피드백이 있다면, 저에게 피드백을 환영합니다.😊😊😊 정말 감사합니다.