13 대화식 및 사용자 정의 된 맵 작성을위한 JavaScript 라이브러리

이전에 Google지도 작성기와 10 개의 다른 도구를 사용해지도를 만들었습니다. 그러나 Javascript 라이브러리를 대신 사용하려는 경우 게시물을 준비해야합니다. 특별지도 마커를 표시하거나 맞춤 경로를 그리거나지도의 특정 지점을 가리 키거나 클릭하면 대화 상자를 표시하는 데 사용할 수있는 JS 라이브러리가 있습니다..

원하는 스타일로지도 맞춤 설정 -지도 중 일부는 CSS로 스타일을 지정할 수 있습니다. 원하는만큼 대화식으로지도를 맞춤 설정할 수 있습니다.. 귀하의 편의를 위해 각 도서관의지도 데이터, 의존성 및 라이센스의 출처가 포함되었습니다.

Hongkiat에 대한 추가 정보 :

Google지도 스타일 지정 방법
HTML5 Geolocation API로 사용자 위치 얻기
데이터 시각화 : 20 가지 이상의 유용한 도구 및 리소스

GMaps

GMaps Google지도를 쉽게 추가하고 사용자 정의합니다. 지도를 추가하는 것 외에도 경로를 그리는 데 유용 할 수있는 폴리선, 특수 메뉴 컨트롤 및 HTML 요소와 같이 맵에 몇 가지 사항을 추가 할 수 있습니다.

GMaps는 정사각형과 같은 특정 앱과지도를 통합 할 때 사용할 수있는 JSON 형식의 데이터와 호환됩니다..

지도 데이터 소스: 구글지도
종속성: 없음
특허: MIT 라이센스

여기

5KB에서 jHERE는 크기가 중요하지 않다는 것을 보여줍니다. 몇 가지 사용자 정의 옵션을 사용하여 강력한 대화 형 맵을 작성할 수 있습니다. jHERE는 Windows Phone에서 가장 인기있는지도 제공 업체 중 하나 인 HERE지도에서지도 시각화를 유도합니다..

라이브러리는 새로운 기능으로 확장 될 수 있으며 셰이프, 경로 및 사용자 정의 마커를 추가하는 라이브러리를 비롯하여이 라이브러리에 대해 개발 된 몇 가지 확장이 있습니다.

지도 데이터 소스: 여기에지도
종속성: jQuery 또는 ZeptoJS
특허: MIT 라이센스

카르 토 그래프

카르 토 그래프 SVG 형식으로지도를 생성하는 Kartograph.ph와지도 위에 대화 형 요소를 추가하는 Kartograph.js의 두 파일로 구성됩니다. Kartograph.js는 Raphael.js 위에 구축되었으므로 맵은 IE7까지 훌륭하게 작동합니다. 인터랙티브지도 데모를 통해 Kartograph가 할 수있는 것을 발견 할 수 있습니다.

지도 데이터 소스: 카르 토 그래프
종속성: Kartograph.py, Raphael 및 jQuery
특허: AGPL 및 LGPL

Mapael

jQuery Mapael 우아한 데이터 시각화와 상호 작용이 가능한 맵을 만들 수 있습니다. 예를 들어,지도를 만들고지도상의 각 지역을 지역에 따라 다른 색상으로 지정할 수 있습니다. 지역의 툴팁은 물론 이벤트 핸들러도 추가 할 수 있습니다. 딸깍 하는 소리 또는 공중 선회.

이지도는 JavaScript 생성 콘텐츠를 크롤링 할 수없는 검색 엔진 로봇에 대체 콘텐츠를 제공하여 SEO를 염두에두고 만들어졌습니다..

지도 데이터 소스: Raphael.js
종속성: jQuery
특허: MIT 라이센스

D3js

D3.js HTML, SVG 및 CSS를 통해 데이터에 생명을 불어 넣을 포괄적 인 JavaScript 라이브러리입니다. 고도로 대화식지도를 구축하는 것을 포함하여 D3 사용은 매우 다양합니다. World Bank Global Development지도를 보면 D3.js로 구축 할 수있는 가능성을 알 수 있습니다..

지도 데이터 소스: D3.js
종속성: 없음
특허: 정의되지 않음

데이터 맵

D3.js로지도를 작성하는 것이 압도적 인 경우, 데이터 맵. DataMaps는 기본적으로지도를 작성하기 위해 특별히 개발 된 D3.js 플러그인입니다. D3.js의 많은 기능을 상속하므로 간단하거나 매우 맞춤화 된지도를 만들 수 있습니다. 나는지도가 반응적임을 언급 했는가??

지도 데이터 소스: D3.js
종속성: D3.js와 TopoJSON
특허: MIT 라이센스

지오 차트

GeoChart는 세부 정보가 적은 본격적인지도 대신 지역, 마커 및 텍스트를 렌더링하는 단순화 된 Google지도입니다. 지도는 SVG에서 생성되며 지역 색상 변경, 팝업 추가 및 맞춤지도 마커 등 다양한 방법으로 맞춤 설정할 수 있습니다..

지도 데이터 소스: 구글지도
종속성: 없음
특허: Google지도 TOS 읽기

마플스

마플스, Google지도 API v3을 통해지도를 생성하는 jQuery 플러그인 Maplace는 IE6을 포함한 모든 브라우저에서 작동합니다. 가능한 가장 쉬운 방법으로지도를 작성하려는 경우 이것이 주목할 가치가있는 또 다른 멋진 플러그인입니다..

지도 데이터 소스: 구글지도
종속성: jQuery
특허: MIT 라이센스

위엄 있는

Stately는 미국지도를 생성하기 위해 개발 된 JavaScript 라이브러리입니다. 라이브러리는 생성 된지도 위에 상호 작용 요소를 추가 할 수 있다는 점을 고려하면 비교적 가볍습니다..

지도 데이터 소스: 당당한 / SVG
종속성: 없음
특허: MIT 라이센스

GeoComplete

GeoComplete는 고유 한 JavaScript 라이브러리입니다. 도서관은지도와 함께 입력 필드를 추가하여 입력시 도시, 국가 또는 주에 대한 제안 사항을 표시합니다..

지도 데이터 소스: 구글지도
종속성: jQuery
특허: MIT 라이센스

지도 도구

지도 도구는 직관적 인 API를 제공하여 Google지도를 추가합니다. 지도를 렌더링하기 위해 TopoJSON 및 GeoJSON과 같은 지리 형식의 JSON 데이터로드를 지원합니다. 그 위에 맵을보다 생생하게 표현할 수있는 움직이는 마커를 추가하거나 변수 또는 자리 표시자를 사용하여 HTML 내용을 삽입 할 수 있습니다. 핸들 바.

지도 데이터 소스: 구글지도
종속성: GeoJSON / TopoJSON
특허: MIT 라이센스

OpenLayers

OpenLayers 다양한 매핑 서비스를 사용하여 대화식지도를 작성하는 고성능 오픈 소스 JavaScript 프레임 워크입니다. 여러지도 서비스에서 타일 레이어 또는 벡터 레이어를 사용하여지도 레이어 소스를 선택할 수 있습니다..

OpenLayer는 모바일 장치를 즉시 사용할 수있게하여 장치 및 브라우저에서 맵을 작성하는 데 적합합니다. 지도를 다른 모양으로 보려면 CSS를 사용할 수 있습니다. OpenLayers를 사용하여 웹에서지도를 구현하려면 다음을 참조하십시오..

지도 데이터 소스: OpenStreetMap
종속성: 없음
특허: 정의되지 않음

전단

개발자가 준 전단 기본 기능은 완벽하게 작동하고 크기를 작게 유지하며 모바일 장치에 적합합니다. 특정 기능의 경우, 플러그인을 사용하여 전단지를 확장하십시오. 전단지에는 타일 레이어, 팝업, 마커, 폴리 라인, 폴리곤, 원 또는 직사각형과 같은 자유로운 벡터 레이어가 필요한 대부분의 온라인지도 기능이 있습니다. CSS3를 사용하여 쉽게 스타일을 사용자 정의 할 수 있지만 멋진 기본 디자인이 제공됩니다..

전단지는 모바일 및 데스크톱 브라우저 모두에서 가장 많이 사용되는 상호 작용 기능을 제공합니다..

지도 데이터 소스: OpenStreetMap
종속성: 없음
특허: 정의되지 않음