Folium Map上のピンに順番を表示する方法

目次

1.はじめに
2.コードとは

1. はじめに

数字を表示するアイコンと背景のアイコンを組み合わせることでルートの順番を表示する方法

Folium Mapの標準機能ではルート上の順番表示ができませんでした。
そこで、Folium Map上でピンに順番を表示できるようにした方法です。
参考文献は色々漁っていたので紛失しました。

2. コード

数字を表示するアイコンの関数

def number_div_icon(color: str, number: int) -> DivIcon:
    icon = DivIcon(
        icon_size=(150, 36),
        icon_anchor=(14, 40),
        html="""<span class="fa-stack " style="font-size: 12pt" >>
                    <!-- The icon that will wrap the number -->
                    <span class="fa fa-circle-o fa-stack-2x" style="color : {:s}"></span>
                    <!-- a strong element with the custom content, in this case a number -->
                    <strong class="fa-stack-1x">
                         {:02d}
                    </strong>
                </span>""".format(
            color, number
        ),
    )
    return icon

背景を白色で塗りつぶすアイコンと合わせて使用

          # 背景を白色で塗りつぶし
            group.add_child(
                folium.Marker(
                    location=(latitude, longitude),
                    icon=folium.Icon(color="white", icon_color="white"),
                )
            )
          # 順番を入れる　先ほどの自作DivIcon
            group.add_child(
                folium.Marker(
                    location=(latitude, longitude),
                    icon=utils.number_div_icon(color="black", number=1),
                )
            )