MAPSVG를 사용하여 WordPress에서 대화식 맵 생성

MAPSVG WordPress 플러그인을 사용하면 기능이 풍부한 대화 형 맵을 빠르고 쉽게 만들 수 있습니다. 대화식 맵은 특정 위치의 영향을 시각화해야 할 때 프로젝트의 일반적인 요구 사항입니다. 이미 WordPress를 사용하고 있다면이 강력한 플러그인은 프로덕션에 적용 할 수있는지도를 만드는 솔루션 일 수 있습니다.

대화식지도를 구현하거나 계획 한 마지막 경험을 상기하십시오. 원래 소스의 데이터를 JSON에 매핑하는 데 많은 시간이 걸린 다음 D3와 같은 시각적 프레임 워크에 연결하는 데 많은 시간이 걸릴 수 있습니다. 다음은 사용자가 맵 자체와 상호 작용하는 방식을 구성하는 것입니다. 이것들은 많은 개발 노력입니다.

다음은지도 데이터를 관리하는 방법에 대한 질문입니다. 데이터가 외부 파일에 저장되어 있습니까? 데이터를 얻으려면 API에 정기적으로 전화해야합니까? 웹 사이트의 WordPress 관리자 패널에서 직접이 데이터를 관리하는 것은 다른 모든 웹 사이트 컨텐츠 관리와 마찬가지로 훨씬 쉽습니다. 코드 편집기를 열고 맵을 별도로 유지할 필요가 없습니다!

이들은 다른 많은 일반적인 맵 기능과 함께 MAPSVG 플러그인에 내장되어 있으며 시각적 요구에 맞는 여러 고유 한 맵을 만들 수 있습니다. 이 플러그인을 파고 사용하여 WordPress에서 대화식 SVG 기반 맵을 작성합니다.

새 맵을 만드는 옵션

설치되면 MAPSVG는 벡터, 이미지 또는 Google지도 기능을 기반으로 새 맵을 만드는 5 가지 옵션을 제공합니다. 이 기사의 목적을 위해 SVG 기능에 중점을 둘 것입니다.

새로운 SVG MAP 옵션에는 거의 200 개의 지오 칼랙 처리 및 비교되지 않은 국가 및 지역 벡터 맵이 있습니다. 이 플러그인의 무료 버전 인 MAPSVG LITE를 사용하면 사이트 관리자가 위도 및 경도 좌표를 통해 배치 된 툴팁, 사용자 정의 가능한 세부 사항보기 및 마커가있는 대화식 맵을 만들 수 있습니다. 유료 버전 (46 달러)으로 업그레이드하면 다음 지원이 제공됩니다.지도 카탈로그, 통합 검색, 위치 필터, 맵 영역에 대한 자세한보기, WordPress 기사 및 고급 사용자 지정 필드, 사용자 정의 도구 및 컨투어 맵 및 기타 고급 기능과의 통합.

새 맵을 만듭니다

좋아, 우리는 새로운 SVG 기반 맵을 만들기로 결정했습니다. 드롭 다운 메뉴에서 옵션을 선택하여 벡터 맵을 만듭니다. 가능한 경우 교정되지 않은 맵 대신 지오 캘리브레이션 된 맵을 선택하십시오. 지역 제목으로 업데이트 된 Geocalibration 맵. 또한 지리적 좌표 (예 : 경도 및 위도)로 맵 마커를 추가하거나 조정으로 자동 변환 된 주소를 입력하여 맵 마커를 추가 할 수 있습니다.

자신의 사용자 정의 SVG 파일을 사용하는 경우 업로드 SVG 옵션을 선택하십시오. 업로드하면 새로운 SVG 맵 드롭 다운 메뉴에 사용자 정의 파일이 <kbd>user-uploads/your-file-name.svg</kbd> 에 표시됩니다. 플러그인 맵에 파일을 업로드하기 전에 파일을 최적화하기위한 몇 가지 추가 단계를 수행하는 것이 좋습니다.

1. 하와이와 같은 여러 벡터 경로를 포함하는 영역은 일러스트 레이터에서 복합 경로로 그룹화되어야합니다. Illustrator에서는 관련 경로를 선택한 다음 객체 > 복합 경로 > Create (또는 CMD 8 )로 이동하여이를 수행 할 수 있습니다.
2. 레이어에 명확하고 고유 한 이름이 있는지 확인하십시오. 레이어 이름은 템플릿 및 조직 목적 {{id}}의 영역으로 사용됩니다.
3. 그런 다음 텍스트 편집기에서 SVG 파일을 열고 각 경로에 제목 속성을 제공하십시오. 템플릿 {{title}}의 영역으로 사용됩니다.

ID 및 제목 필드는 파일에서 추출한 기본 속성이며 개별 경로와 연결하는 데 사용됩니다. 최신 버전의 플러그인 (현재 5.3.7)부터 시작하여 SVG 파일을 WordPress 관리자 패널에서 직접 편집하여 각 경로의 ID 및 제목 값을 설정하고 경로 정의를 조정하고 새 경로를 그리울 수 있습니다. 나는 개인적으로 Illustrator 및 Code 편집기에서 편집을위한 컨트롤을 선호하지만 여전히 좋은 선택입니다.

플러그인이 제공하는 Geocalibration 맵을 계속 사용하고 올해 전 세계의 기술적 회의의 데이터 (부품)를 시각화하기 위해 https://www.php.cn/link/e74b103532a9337cc42f0517749d4 의 항목을 사용하여 데모를 만들어 봅시다.

지도 스타일을 설정합니다

준비가되었고 SVG 파일을 선택 했으므로 플러그인 인터페이스가 설정 패널을 엽니 다. 여기서 맵 이름을 설정하고 크기와 크기를 정의하며 툴팁 및 기타 기본 설정을 활성화합니다.

설정 탭 외에도 특정 맵 기능을 제어하고 설정하기위한 탭도 표시됩니다. 맵 테마를 설정하는 다음 탭 색상 으로 전환하십시오.

위에서 볼 수 있듯이 맵의 충전 및 스트로크 값과 각 경로의 다양한 활성 상태를 제어 할 수 있습니다. 벡터 기반 맵 사용의 이점! 따라서 사용자 정의 맵 파일을 만들면 그림자에 정의되지 않은 채우기 및 스트로크 값을 남겨 두는 것이 좋습니다. 그러나 UI에서 스트로크 너비를 효과적으로 조정할 수는 없으므로 (SVG를 편집하고 각 경로의 값을 변경해야하기 때문에) Illustrator에서 설정하고 파일을 다시 작성하는 것이 가장 좋습니다.

다음은 컨테이너 (예 : 디렉토리, 필터, 사이드 바 등)의 색상 옵션과 윤곽선 맵의 최소 및 최대 색상 값입니다 (나중에 자세히 설명하십시오). 컨테이너 스타일은 전 세계적으로 테마 스타일 시트 또는 설정의 CSS 탭에서 설정할 수도 있습니다.

맵 데이터를 설정합니다

기본적으로 영역 탭은 선택한 SVG의 경로에 따라 영역을 미리 채우고 ID 및 제목 값을 표시합니다. 필요에 따라 자신만의 지역 필드를 편집하고 만들 수 있습니다. 데이터베이스 탭에서도 마찬가지입니다. 여기서 맵 데이터를 입력하고 맵 영역과 연결할 수 있습니다.

영역 및 데이터베이스 항목의 경우 UI에서 필드 및 컨텐츠를 수동으로 작성하거나 CSV 파일에서 데이터를 업로드하도록 선택할 수 있습니다.

위의 스크린 샷의 최종 데이터 세트, 특히 회의 세부 정보, 회의 세부 정보 및 데이터베이스의 각 국가의 플래그를 보여주는 이미지를 업로드하는 필드에 대한 사용자 정의 영역 필드에 유의하십시오. 맵 자체에서 내용을 분리하고 WordPress 게시물 유형에 대한 기사 데이터로 가져 와서 한 단계 더 나아갈 수 있습니다. 이곳은 Advanced Custom Fields가 기사 편집기에서 이러한 데이터의 필드를 작성하고 제출 된 데이터를 맵의 값과 연결하는 데 도움이 될 수 있습니다. 물론 이것은 필요하지 않지만 우려를 분리하기 위해이 옵션을 갖는 것이 좋습니다.

지도 데이터를 보여줍니다

맵에 지역 또는 데이터베이스 개체에 대한 정보를 표시 할 때는 플러그인에 템플릿을 설정해야합니다. 팝업, 툴팁, 세부 사항보기, 디렉토리 및 태그의 5 가지 유형의 템플릿이 있습니다.

템플릿은 일반 텍스트, HTML 및 핸들 바 태그를 수용하여 영역 및 데이터베이스 변수 값을 표시합니다. 기사 데이터베이스 필드를 통해 기사 데이터를 가져 오면 표준 WordPress 필드, post.id, post.post_title, post.post_content, post.url 및이 구문을 사용하여 생성 된 모든 사용자 정의 필드에 액세스 할 수 있습니다 : post.acf.my_field_name. 리치 텍스트 필드 (예 : Post.Post_Content)를 렌더링해야 할 때마다 핸들 바의 {{{Triple-Stash}}} 구문을 사용하여 렌더링 된 HTML을 출력해야합니다.

handlebar syntax를 사용한다는 것은 또한 템플릿에 조건부 로직을 구축하여 지역 및 데이터베이스 값을 기반으로 동적 템플릿 뷰를 만들 수 있음을 의미합니다. MAPSVG 5.0 이후에서 템플릿 옵션에는 기본 영역 및 데이터베이스 필드에 대한 HTML 주석 및 시작 태그가 사전 인구로 제공됩니다. 매우 유용합니다!

페이지에지도를 추가하십시오

MAPSVG에는 맵을 모든 페이지 나 기사에 포함시키기위한 단축 코드가 포함되어 있습니다. 페이지에 Gutenberg 바로가 코드 블록을 놓고 MAPSVG를 맵 ID로 호출하십시오. [MAPSVG].

Classic WordPress 편집기에서 작업하거나 5.0보다 일찍 플러그인 버전을 사용하는 사용자의 경우 맵 아이콘이 Tinymce 도구 모음에 추가되어 맵 ID를 사용하여 기사 콘텐츠에 단축 코드를 주입합니다. MAP ID는 MAPSVG 편집기 대시 보드 또는 활동 맵의 상단 빵 부스러기에서 찾을 수 있습니다. 클립 보드 버튼에 대한 편리한 사본은 기사 편집기에 사용하기 위해이를 잡기 위해 단축 코드의 두 인스턴스 옆에 포함되어 있습니다.

데모

데이터 입력을 완료하고 추가 MAPSVG 설정을 전환 한 후에는 완전히 기능적인 대화식 및 반응 형 맵을 얻습니다! 이 과정에서 많은 코드에 노출이 거의 없습니다.

전체 데모를보십시오

지도 너머

플러그인의 SVG 기능의 장점은 기본적으로 SVG가 우리가 원하는 것이 될 수 있다는 것입니다. 건축 평면도, 인포 그래픽 또는 경력의 대화식 타임 라인과 같은 거의 모든 것의 벡터 경로에서 대화식 "맵"을 만들 수 있습니까? 단순한지도 그 이상입니다!

WordPress에 있지 않습니까? 괜찮아요. MAPSVG는 jQuery 플러그인으로도 제공되며 WordPress 외부의 대화식 맵을 사용하는 것이 좋습니다.

의지

• MAPSVG 웹 사이트 (관리 인터페이스의 실시간 데모 포함)
• MAPSVG 튜토리얼
• MAPSVG 문서
• MAPSVG LITE (WordPress 플러그인 디렉토리)
• MAPSVG 비디오 자습서 아카이브 (YouTube)

위 내용은 MAPSVG를 사용하여 WordPress에서 대화식 맵 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!