Mapbox 🗺️로 맞춤형 이력서 맵(resumap)을 구축하는 방법

12453 단어 showdev webdev career learning

Mapbox blog이라는 이름의 동료Joe Clark가 DIY Resumap에서 재미있는 매핑 활동을 교차 게시합니다.

뭐? 재개! 알겠어? 이력서 지도…
왜요? 군중들 사이에서 눈에 띕니다 - 그리고 암석을 매핑합니다.
어떻게? 웹 매핑에 대한 소개를 보려면 이 단계별 가이드를 따르십시오.

여기에서 데모를 확인하십시오https://mapbox-explorer.github.io/.

1. 계정에 로그인

방금 가입한 경우 Mapbox는 매핑을 쉽게 만드는 오픈 소스 소프트웨어를 구축합니다. 4초 안에 귀하의 계정 또는 create a new one에 로그인하십시오.

2. Sublime Text 또는 Atom과 같은 텍스트 편집기에 위의 코드를 복사합니다.

대화식 Resumap을 만들기 위해 Mapbox GL JS JavaScript 라이브러리의 코드를 사용합니다. how it works에 대한 자세한 내용을 읽어보거나 성능이 뛰어나고 초보자에게 친숙하다고 믿으셔도 됩니다. 🙂 "fly to a location based on scroll position"에서 Resumap 코드를 맞춤화했습니다.

웹 사이트 구축 경험이 있는 경우 이 스니펫을 자유롭게 복사하고 자신의 액세스 토큰을 추가하고 원하는 곳에서 사용할 수 있습니다. 웹 개발이 처음이거나 코딩 경험이 많지 않다면 함께 읽어보세요!

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
#map {
    position: fixed;
    width:50%;
}
#features {
    width: 50%;
    margin-left: 50%;
    font-family: Tw Cen MT;
    overflow-y: scroll;
    background-color: #fafafa;
}
section {
    padding:  25px 50px;
    line-height: 25px;
    border-bottom: 1px solid #ddd;
    opacity: 0.25;
    font-size: 20px;
}
section.active {
    opacity: 1;
}
section:last-child {
    border-bottom: none;
    margin-bottom: 1000px;
}
</style>

<div id='map'></div>
<div id='features'>
    <section id='welcome' class='active'>
        <h3>Hey, there!</h3>
        <p>Welcome to a resumap! A resume can only say so much. <br><br>🤖 And they tend to feel robotic, don't they? <br><br>Resumaps are designed to fill the gaps in your resume. If you want to stand out, a resumap is a fun way to help people get to know you. After all, wouldn't you want to know who you're hiring? So if you want see more, sit back, relax, and enjoy the flight 🚀</p>
    </section>
    <section id='section1' class='active'>
        <h3>Section 1</h3>
        <p>Here's where you can add a narrative to take your resume to the next level. Where did you come from? What really brought you there? What made you leave? This is to let people get a glimpse of who the person behind the paper is. This is New Mexico...but you can center your map however you want.
    </section>
    <section id='section2'>
        <h3>Section 2</h3>
        <p>As your readers scroll through these sections, your resumap will fly them to the locations you've specified. A sense of place is something that a lot of people resonate with. Where you were when you did what you did is half of the story.<br><br>Add some line breaks to start a new paragraph if you want to feel fancy.</p>
    </section>
    <section id='section3'>
        <h3>Section 3</h3>
        <p>You can add pictures! <br><br> <img src="https://i.imgur.com/NF8af.jpg"><br><br></p>
    </section>
    <section id='section4'>
        <h3>Section 4</h3>
        <p>Or even gifs! <br><br><iframe src="https://giphy.com/embed/fpXxIjftmkk9y" width="224" height="240" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p></p>
        </p>
    </section>
    <section id='section5'>
        <h3>Section 5</h3>
        <p>Or videos! WHAT!<br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/le0BLAEO93g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </p>
    </section>
    <section id='section6'>
        <h3>Section 6</h3>
        <p>The most important thing is to tell <i>your</i> story. What makes you you?</p>
    </section>
    <section id='section7'>
        <h3>Time to make your own</h3>
        <p>Have fun!<br><br><iframe src="https://giphy.com/embed/lJNoBCvQYp7nq" width="300" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p></p></p>
    </section>
</div>
<script>
mapboxgl.accessToken = 'PASTE YOUR ACCESS TOKEN HERE';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/outdoors-v10',
        bearing: -0,
        center: [-108.866174, 49.272291],
        zoom: 2,
        speed: 0.8,
        pitch: 0
});
var chapters = {
    'welcome': {
        bearing: -0,
        center: [-108.866174, 49.272291],
        zoom: 2,
        speed: 0.8,
        pitch: 0
    },
    'section1': {
        bearing: 0,
        center: [-105.391504, 34.371086],
        zoom: 6.00,
        pitch: 0
    },
    'section2': {
        center: [-122.316235, 47.605958],
        bearing: 54.40,
        zoom: 12.59,
        speed: 0.6,
        pitch: 44.50
    },
    'section3': {
        bearing: 12.80,
        center: [-0.075681, 51.498018],
        zoom: 13.18,
        speed: 0.6,
        pitch: 0.00
    },
    'section4': {
        bearing: 60,
        center: [-134.408720, 58.300388],
        zoom: 16.57,
        speed: 0.6,
        pitch: 45
    },
    'section5': {
        bearing: 15.20,
        center: [29.027289, 41.013899],
        zoom: 10.56,
        pitch: 40.50,
        speed: 0.6
    },
    'section6': {
        bearing: 0,
        center: [-63.594167, -17.701427],
        zoom: 5.53,
        pitch: 0,
        speed: 0.6
    },
    'section7': {
        bearing: -0,
        center: [27.230526, 0.000000],
        zoom: 1.18,
        speed: 0.8,
        pitch: 0
    },
};
// On every scroll event, check which element is on screen
window.onscroll = function() {
    var chapterNames = Object.keys(chapters);
    for (var i = 0; i < chapterNames.length; i++) {
        var chapterName = chapterNames[i];
        if (isElementOnScreen(chapterName)) {
            setActiveChapter(chapterName);
            break;
        }
    }
};
var activeChapterName = 'baker';
function setActiveChapter(chapterName) {
    if (chapterName === activeChapterName) return;
    map.flyTo(chapters[chapterName]);
    document.getElementById(chapterName).setAttribute('class', 'active');
    document.getElementById(activeChapterName).setAttribute('class', '');
    activeChapterName = chapterName;
}
function isElementOnScreen(id) {
    var element = document.getElementById(id);
    var bounds = element.getBoundingClientRect();
    return bounds.top < window.innerHeight && bounds.bottom > 0;
}
</script>
</body>
</html>

3. 계정에서 액세스 토큰 추가

account dashboard 상단에 있는 액세스 토큰을 복사하여 코드에 다음과 같이 붙여넣습니다.

mapboxgl.accessToken = 'PASTE YOUR ACCESS TOKEN HERE';

아포스트로피를 유지하십시오!

4. 지도 배치

이력서가 시청자가 현재 읽고 있는 위치의 중앙에 오길 원할 것입니다. Mapbox Studio의 Style Editor에 있는 Map position 메뉴를 사용하여 필요한 정확한 longitude , latitude , zoom , bearing 및 pitch 를 얻을 수 있습니다.

텍스트 편집기로 돌아가면 코드의 지도 위치 전용 섹션이 표시됩니다. 여기에서 확대/축소 수준, 경도, 위도, 피치 및 베어링을 입력할 수 있습니다. 다음과 같습니다.

var chapters = {
    'welcome': {
        bearing: -0,
        center: [-108.866174, 49.272291],
        zoom: 2,
        speed: 0.8,
        pitch: 0
    },
    'place1': {
        center: [-71.007520, 42.340921],
        bearing: -150,
        zoom: 16.72,
        speed: 0.6,
        pitch: 45
    },
    'place2': {
        bearing: -45,
        center: [-68.899502, 46.030150],
        zoom: 15.99,
        speed: 0.6,
        pitch: 45
    }
};

분석은 다음과 같습니다.

center는 지도 위치 도구

로 찾은 경도와 위도(순서대로)입니다.

speed는 이력서가 해당 위치

로 날아가는 속도입니다.

동일한 형식을 따라 원하는 만큼 장소를 추가합니다

fly to 함수가 원하는 대로 작동하도록 숫자를 가지고 놀아 보십시오. 독자가 이력서에서 다음 섹션(또는 chapter )으로 스크롤하면 지정한 위치로 이동합니다.

5. 자신의 웹사이트에 지도 게시

이미 약간의 가벼운 코딩 경험이 있다면 언제든지 이력서를 게시할 수 있습니다. 웹 사이트 구축 경험이 없더라도 괜찮습니다. GitHub 웹 개발을 쉽게 시작할 수 있습니다!

my personal resumap 의 경우 GitHub Pages로 웹사이트를 구축하기 위해 GitHub’s tutorial을 팔로우했습니다.

초보자를 위해 GitHub의 자습서는 URL이 다음과 같은 무료 웹 사이트로 시작하고 실행할 수 있도록 합니다. **https://** ***username*** **.github.io**

3단계와 4단계에서 작업한 코드를 index.html 파일로 추가할 수 있습니다.

6. 만든 것을 공유합니다.

이제 이력서가 준비되어 실행 중이므로 세상과 공유할 시간입니다. 개인 포트폴리오에 사용하거나 잠재적인 고용주에게 보내거나 커버레터 대신 제공하십시오. @Mapbox #builtwithmapbox를 트윗하여 자랑하세요.

추가 크레딧 - 선택적 사용자 정의

이력서가 마음에 드는데 레벨업을 원하시나요? 프로 무브 -

커스텀 스타일 🎨

"이 스타일 추가"

를 클릭하여 계정에 designer map style을 추가합니다.

또는 Cartogram으로 나만의 스타일을 만들고 사진

을 끌어다 놓습니다.

Styles page에서 이러한 항목을 볼 수 있습니다. "개발 및 사용 공유"를 클릭하십시오

.

맞춤 아이콘 ✨

지도 아이콘으로 매우 창의적일 수 있습니다. Inkscape을 사용하여 비트모지 얼굴을 .svg 아이콘으로 만들고 Mapbox Studio에 업로드했습니다

이 튜토리얼https://www.mapbox.com/help/markers/에서 .svg 파일을 Mapbox Studio에 업로드하고 지도의 마커로 사용합니다.

영감을 얻으려면 marker playground을 확인하십시오

.

질문을 댓글로 남겨주시거나 트위터에서 @Mapbox를 눌러주세요 :)

Reference

이 문제에 관하여(Mapbox 🗺️로 맞춤형 이력서 맵(resumap)을 구축하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mapbox/how-to-build-a-custom-resume-map-resumap-w-mapbox---3pin

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

iOS 바이너리 용량 확인

간단한 EXTJS 다중 선택 드롭다운 상자

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다