0

So I want to build a table pop up using HTML in Folium. Everything is fine until I realize my block name is wrong, and it seems like my looping is false. Here's what I got

   # styling on tables pop up
    def popup_html_block(row):
        i = row
        block_name = All_Blocks['Block_Name'].iloc[i]
        status = All_Blocks['Status'].iloc[i]
        operator = All_Blocks['Operator'].iloc[i]
        kilo = All_Blocks['Sq. Kilometers'].iloc[i]
        miles = All_Blocks['Sq. Miles'].iloc[i]
        left_col_color = "#65b3d0"
        right_col_color = "#ebf2f7"

        html = """<!DOCTYPE html>
        <html>
        
        <head>
        <h4 style="margin-bottom:10"; width="200px">{}</h4>""".format(block_name) + """
        
        </head>
            <table style="height: 126px; width: 350px;">
        <tbody>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Status</span></td>
        <td style="width: 150px;background-color: """ + right_col_color + """;">{}</td>""".format(status) + """
        </tr>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Operator</span></td>
        <td style="width: 150px;background-color: """ + right_col_color + """;">{}</td>""".format(operator) + """
        </tr>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Sq. Kilometers</span></td>
        <td style="width: 150px;background-color: """ + right_col_color + """;">{}</td>""".format(kilo) + """
        </tr>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Sq. Miles</span></td>
        <td style="width: 150px;background-color: """ + right_col_color + """;">{}</td>""".format(miles) + """
        </tr>
        </tbody>
        </table>
        </html>
        """

        return html

# Put ESRI Satellite for the layer map
        tile = folium.TileLayer(
            tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
            attr='Esri',
            name='Esri Satellite',
            overlay=False,
            control=False
        ).add_to(map1)

        # put a minimap on bottom corner of the main map (optional, can be turned off) and other plugins such as szroll zoom toggler, fullscreen, etc
        minimap = plugins.MiniMap(toggle_display=True)
        map1.add_child(minimap)
        plugins.ScrollZoomToggler().add_to(map1)
        plugins.Fullscreen(position="topright").add_to(map1)
        plugins.Draw(position='topright').add_to(map1)

        # Adding blocks to the main map
        for i in range(0, len(All_Blocks)):
            html = popup_html_block(i)
            iframe = branca.element.IFrame(html=html, width=500, height=200)
            popup = folium.Popup(folium.Html(html, script=True), max_width=500)

        folium.GeoJson(data=All_Blocks,
                        style_function=lambda feature: {
                            'fillColor':  '#65b3d0',
                            #    'fillColor': '#F1D581' if 'x' in feature['properties']['Status'] == 'Exploration' else '#65b3d0',
                            'color': 'black',
                            'weight': 3,
                            'fillOpacity': 0.2,
                            'dashArray': '5,5'
                        },

                        highlight_function=lambda x: {
                            'fillOpacity': 1},

                        tooltip=folium.features.GeoJsonTooltip(
                            fields=['Block_Name'], aliases=['Name']),

                        popup=popup).add_to(map1)

my geo json dummy data :

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Block_Name":"East-Block","Status":"Production","Operator":"A","Sq. Kilometers":145.97,"Sq. Miles":56.36},"geometry":{"coordinates":[[[96.4001057373053,5.208656351062942],[96.43375136718726,5.221648609300516],[96.46259047851515,5.23737571951817],[96.46121718750072,5.279084831409563],[96.35684707031174,5.279768564031215],[96.35753371582075,5.340617736210092],[96.26140334472717,5.341985064196123],[96.26140334472717,5.261307518914151],[96.32663466796942,5.23053789406255],[96.4001057373053,5.208656351062942]]],"type":"Polygon"}},{"type":"Feature","properties":{"Block_Name":"West-Block","Status":"Production","Operator":"B","Sq. Kilometers":171.38,"Sq. Miles":66.17},"geometry":{"coordinates":[[[96.1500638674625,5.274467547614364],[96.14897384519247,5.419171436272961],[96.01490110586337,5.42134172287426],[96.01526444661994,5.383360416138984],[96.07521567152321,5.3826369393847955],[96.07557901227983,5.355867695999478],[96.03488484749829,5.355867696870973],[96.03452150673985,5.334162042989206],[96.0501451592911,5.327288425995064],[96.06431544881394,5.305219978512483],[96.07812239757834,5.292557397961701],[96.10500961359554,5.285683317057433],[96.13117014809939,5.279894558164472],[96.14025366702509,5.278809159853225],[96.1500638674625,5.274467547614364]]],"type":"Polygon"}},{"type":"Feature","properties":{"Block_Name":"South-Block","Status":"Exploration","Operator":"A","Sq. Kilometers":48.74,"Sq. Miles":18.82},"geometry":{"coordinates":[[[96.15020619743746,5.321413143458614],[96.15075239154925,5.274369183512903],[96.15921840028875,5.269746173698309],[96.19062456174476,5.259684209917438],[96.21137993801023,5.259140315346897],[96.23814344951205,5.262403675642247],[96.26108360222605,5.263763404046799],[96.26108360222605,5.320325462349771],[96.15020619743746,5.321413143458614]]],"type":"Polygon"}},{"type":"Feature","properties":{"Block_Name":"Center-Block","Status":"Exploration","Operator":"C","Sq. Kilometers":48.74,"Sq. Miles":18.82},"geometry":{"coordinates":[[[96.14996393515247,5.321933704052],[96.26084133994107,5.320846023863609],[96.26138753405411,5.3417835292513445],[96.35451363019473,5.340967795663914],[96.35451363019473,5.36924592531598],[96.29224750139701,5.369789722668301],[96.29197440434115,5.401329137491388],[96.33922019505121,5.401057252985197],[96.33922019505121,5.419001368471612],[96.14887154692752,5.419545121233369],[96.14996393515247,5.321933704052]]],"type":"Polygon"}},{"type":"Feature","properties":{"Block_Name":"North-Block","Status":"Production","Operator":"A","Sq. Kilometers":64.55,"Sq. Miles":24.92},"geometry":{"coordinates":[[[96.08469351270912,5.419774728990944],[96.21141054675434,5.419774728990944],[96.33102705734086,5.41868722339008],[96.33048086322776,5.43826202425123],[96.24745935816333,5.438805759641596],[96.24745935816333,5.451311537935112],[96.30644832228882,5.451855261522326],[96.30590212817572,5.467079321826603],[96.15952210608873,5.466535612046528],[96.16006830020183,5.439893228949643],[96.08523970682091,5.440980696292215],[96.08469351270912,5.419774728990944]]],"type":"Polygon"}}]}

and here's the picture

enter image description here

enter image description here

it seems like it won't loop row by row, all the pop up are same, any help I would appreciate it. Thanks!

2
  • Seems like you are always binding the last element. Is the indentation for the "folium.GeoJson(data=All_Blocks," line wanted. Currently it's only executed once with the last popup element created in the loop right over.
    – Oivalf
    Feb 6 at 9:36
  • yeah I know. The problem is, if it is marker, you can pass folium.Marker(df['Longitude'][i], df['Latitude'][i]), and now, I dont know how to do that in folium.GeoJson, because it gets error if I pass folium.GeoJson(data=All_Blocks['geometry'][i]), do you know how to do like marker one but in folium.GeoJson? @Oivalf
    – naranara
    Feb 6 at 9:53

2 Answers 2

1

I found the solution, here's is the full code

    # styling on tables pop up
    def make_popup(df):
        blockname = df["Block_Name"]
        status = df["Status"]
        operator = df["Operator"]
        kilos = df["Sq. Kilometers"]
        miles = df["Sq. Miles"]
            
        left_col_color = "#65b3d0"
        right_col_color = "#ebf2f7"
        
        html = """
        <!DOCTYPE html>
        <html>
        
        <head>
        <strong><h4 style="margin-bottom:30px; width:200px; font-size: 25px;">{}</strong></h4>""".format(blockname) + """

        
        </head>
            <table style="height: 126px; width: 300px;">
        <tbody>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Status</span></td>
        <td style="width: 200px;background-color: """ + right_col_color + """;">{}</td>""".format(status) + """
        </tr>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Operator</span></td>
        <td style="width: 200px;background-color: """ + right_col_color + """;">{}</td>""".format(operator) + """
        </tr>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Sq. Kilometers</span></td>
        <td style="width: 200px;background-color: """ + right_col_color + """;">{}</td>""".format(kilos) + """
        </tr>
        <tr>
        <td style="background-color: """ + left_col_color + """;"><span style="color: #151515;">Sq. Miles</span></td>
        <td style="width: 200px;background-color: """ + right_col_color + """;">{}</td>""".format(miles) + """
        </tr>
        </tbody>
        </table>
        </html>
        """
        return html

        map1 = folium.Map(location=location,
                        zoom_start=11, control_scale=300, tiles=None)

        # Put ESRI Satellite for the layer map
        tile = folium.TileLayer(
            tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
            attr='Esri',
            name='Esri Satellite',
            overlay=False,
            control=False
        ).add_to(map1)

        # put a minimap on bottom corner of the main map (optional, can be turned off) and other plugins such as szroll zoom toggler, fullscreen, etc
        minimap = plugins.MiniMap(toggle_display=True)
        map1.add_child(minimap)
        plugins.ScrollZoomToggler().add_to(map1)
        plugins.Fullscreen(position="topright").add_to(map1)
        plugins.Draw(position='topright').add_to(map1)
        
        
        def filter_by_name(df, name):
            return df[df['Block_Name'].isin(name)]
        
        # option_block = st.multiselect('Select the block name', (All_Blocks['Block_Name']), default=All_Blocks['Block_Name'])
        df_filter = filter_by_name(All_Blocks,All_Blocks['Block_Name'])
        
        # Adding blocks to the main map (UPDATE)
        for i, row in df_filter.iterrows():
            geo_json = folium.features.GeoJson(row.geometry.__geo_interface__, name=str(i), 
                                                style_function=
                                                lambda feature: {
                                                'fillColor':  '#65b3d0',
                                                #    'fillColor': '#F1D581' if 'x' in feature['properties']['Status'] == 'Exploration' else '#65b3d0',
                                                'color': 'black',
                                                'weight': 3,
                                                'fillOpacity': 0.2,
                                                'dashArray': '5,5'
                                            },

                                            highlight_function=lambda x: {
                                                'fillOpacity': 1},

                                            tooltip=folium.features.Tooltip(All_Blocks.iloc[i]['Block_Name'], sticky=False))
                                                # fields=All_Blocks.iloc[i]['Block_Name'], aliases=['Name']))
            
            geo_json.add_child(folium.Popup(make_popup(All_Blocks.iloc[i])))
            geo_json.add_to(map1)
0

Maybe use the GeoJsonPopup (https://python-visualization.github.io/folium/modules.html#folium.features.GeoJsonPopup). This allows you to bind different popups to different GeoJson elements. Lookup the parameters on the website for the binding attributes.

2
  • can you give me an example of how to use GeoJsonPopup in my case? Sorry if I ask this to you, but I really confuse right now. Thanks!
    – naranara
    Feb 6 at 10:03
  • I'm not able to run your code, due to not having all data. But binding the popups with a geoJsonMarker may look like this: popup=folium.GeoJsonPopup(fields=['Status', 'Operator', '"Sq. Kilometers', 'Sq. Miles']) Remove the loop to create the popups and use that line to create the popups. I think that may work. For customs styles like the style created in "popup_html_block()" you can use the style attribute of GeoJsonPopup.
    – Oivalf
    Feb 6 at 10:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.