그래픽으로 CSS를 사용하여 데이터 드릴 다운

Question

우리는 고객이 대규모 주택 단지 인 새로운 프로젝트를 가지고 있습니다. 10 개 지역/지구 (1 지구, 2 지구 등)가 있으며 고객이지도를 제공했습니다.

각 구에는 3-4 개의 주택 건물이 있으며 각 건물에는 아파트 건물이 있습니다. 각 아파트 건물은 임대 용 객실입니다.

클라이언트는 각 레벨 (전체 구역, 각 구역, 각 건물, 각 아파트, 각 방)에 대한 그래픽 맵을 원합니다.

지도에 완벽한 모양이 없습니다. 우리는 데이터베이스를 완성했으며 드릴 다운 데이터를 드릴 다운했습니다. 우리는 각 레벨 맵의 PNG를 찾고, 녹색 (사용 가능한 공간), 빨간색 (점령 된) 등을 나타내는 맵의 특정 영역에 DIV를 오버레이하는 방법을 찾고 있습니다. 150 또는 235- 유효한.

사용자는 각지도 영역을 클릭하고 다른 MAPS로 드릴 다운하여 세부 정보를 얻을 수 있습니다.

<map name="mapDistrict"> <area shape="circle" coords="90,58,3" href=" Building/1" alt=" Building 1"> <area shape=" poly" coords="124,58,8" href=" Building/2" alt=" Building 2"> </map> 

가 더 나은 솔루션이 있습니까 : 우리는 동적으로 HTML을 생성하는 필드와 테이블을 생성 받게 요? 우리는 CSS, Javascript (JQUERY)를 사용하고 싶습니다. FLASH!

Answer 1

저는 여러 번이 유형의 부동산지도를 작성했습니다. 당신이하는 일은 꽤 효과적입니다. JS 배열 또는 JSON을 사용하여 좌표에 대한 단위 매핑 및 각 유닛에 대한 상태 매핑을 원할 수 있습니다.

전체 건물의 경우지도 영역을 컬러 오버레이로 변환하는 http://www.netzgesta.de/mapper/을 볼 수 있습니다.

일부 other approaches이 있습니다. 그 간단한 사용 사각형 링크를 고려하고 싶을 수도 있습니다.

또한 오버레이를 표시하도록 지역지도에 이벤트를 연결 할 수 있습니다

<area COORDS="80,88,120,125" HREF="#" onMouseOver="showUnit('a')">