Streamlit으로 정비소 탐색 지도 만들기

들어가며

• SQL LIKE 구문을 통한 검색 지원

• 고객이 정비 받기를 원하는 희망 정비 지역으로부터 추천 정비소 사이의 거리 파악이 어려움

도구 탐색

• 빠르게 결과물을 내서 메카닉분들이 직접 사용하고 피드백을 받는 것이 중요했음

• 낮은 러닝커브와 다양한 elements 보유

• 이전에 검색 결과 고도화 작업으로 ES를 사용한 경험이 있었기 때문에 정비소 검색에도 이를 사용하는데 큰 어려움이 없었던 상황

• ES Cloud 이전으로 좋아진 사용성

• 프로젝트에서 필요로 하였던 기능(필터, 검색, 데이터프레임)들을 가지고 있음

• 다른 라이브러리와 호환가능(Folium, Aggrid)

본격 정비소 지도 개발

레이아웃

정비소 데이터베이스 구축

Streamlit으로 어플 만들기

with st.sidebar:
    st.[element_name]

ES로 거리 검색하기

{
  "query": {
    "bool": {
      "must": [
        {
          "match": {
            "companyName": company_name
          }
        }
      ],
      "filter": [
        {
          "geo_distance": {
            "distance": distance,
            "location": {
              "lat": lat,
              "lon": lon
            }
          }
        },
        {
          "terms": {
            "tagName": company_tag
          }
        },
        {
          "terms": {
            "type": company_type
          }
        }
      ]
    }
  },
  "size": 10000,
  "sort": [
    {
      "_score": {
        "order": "desc"
      }
    },
    {
      "_geo_distance": {
        "distance_type": "plane",
        "location": {
          "lat": lat,
          "lon": lon
        },
        "order" : "asc",
        "unit" : "km"
      }
    }
  ]
}

{
  "geo_distance": {
    "distance": distance,
    "location": {
      "lat": lat,
      "lon": lon
    }
  }
}

"sort": [
  {
    "_geo_distance": {
      "distance_type": "plane",
      "location": {
        "lat": lat,
        "lon": lon
      },
      "order" : "asc",
      "unit" : "km"
    }
  }
]

데이터프레임 구축(streamlit-aggrid 사용하기)

1. 데이터프레임: 정비소 기본 정보를 표로 한눈에 볼 수 있도록 함

2. 지도: 정비소 위치를 시각적으로 표현

gd = GridOptionsBuilder.from_dataframe(df)
gd.configure_selection(selection_mode='multiple', use_checkbox=True)

gridoptions = gd.build()
grid_table = AgGrid(df, height=600, gridOptions=gridoptions, fit_columns_on_grid_load=True,
                      update_mode=GridUpdateMode.SELECTION_CHANGED, license_key=aggrid_license_key, enable_enterprise_modules=True)

정비소를 지도에 표시해보자

map = folium.Map(location=[user_lat, user_lon], zoom_start=13, control_scale=True)

# 나타내고 싶은 html
html = """
 업체명: OOO <br>
 전문분야: 판금/도색 <br>
 ...
"""

# Popup 속성 지정
iframe = folium.IFrame(html,
                       width=350,
                       height=400)

popup = folium.Popup(iframe)

# Marker를 지도에 추가
folium.Marker(location=coords,
              popup=popup,
              tooltip=html).add_to(map)

feature_group = folium.FeatureGroup("Locations")
feature_group.add_child(folium.Marker(
                          location=coords,
			  popup=popup,
		       	  tooltip=html
			 )
		       )
map.add_child(feature_group)

folium.Circle([user_lat, user_lon],
                color='tomato',
                radius=radius*1000
              ).add_to(map)

완성된 정비소 지도

사용 후기

효과

• 지도와 필터 기능을 동시에 이용할 수 있어 거리와 특징을 종합하여 문의를 안내하기 용이

• Tooltip 기능을 통해 업체 정보를 빠르게 파악 가능

• 업체명 일부만 알아도 검색이 가능

보완점

마치며

Reference

• https://docs.streamlit.io/

• https://python-visualization.github.io/folium/

• https://streamlit-aggrid.readthedocs.io/en/docs/