Git Product home page Git Product logo

Comments (2)

hansthen avatar hansthen commented on June 15, 2024 1

You need to add an id property to the geojson's features (or use a JsCode object to generate an id). Perhaps your input csv contains a column that provides a unique key for each row?

from folium.

shyney7 avatar shyney7 commented on June 15, 2024

@hansthen thank you! I've changed the create_geojson() function to this:

def create_geojson():
    with open(r'./gpslive/gpstobfilt.csv', 'r') as csvfile:
        reader = csv.DictReader(csvfile)

        # init an empty list to store GeoJSON features
        features = []

        # loop through each row in the CSV
        for index, row in enumerate(reader):
            # create a GeoJSON feature
            feature = {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [float(row['longitude']), float(row['latitude'])]
                },
                "properties": {
                    "id": index,
                    "total_counts": float(row['total_counts']),
                    "altitude": float(row['altitude'])
                }
            }

            # add the feature to the list
            features.append(feature)

            # write the features to a new GeoJSON file
            with open(r'./gpslive/data.geojson', 'w') as geojsonfile:
                json.dump({'type': 'FeatureCollection', 'features': features}, geojsonfile)

            #wait for 1 second
            time.sleep(1)

That fixed only the last point to be shown.
And I also changed the Realtime class initiation to this:

Realtime(
    source,
    get_feature_id=JsCode("(f) => { return f.properties.id}"),
    point_to_layer=JsCode("""
        (f, latlng) => {
            var color = 'red';
            if (f.properties.total_counts < 5) {
                color = 'green';
            } else if (f.properties.total_counts < 10) {
                color = 'yellow';
            }
            var marker = L.circleMarker(latlng, {radius: 8, fillOpacity: 0.2, color: color});
            marker.bindPopup(
                'ID: ' + f.properties.id + '<br>' +
                'Total Counts: ' + f.properties.total_counts + '<br>' +
                'Altitude: ' + f.properties.altitude
            );
            return marker;
        }
        """),
    interval=1000,
).add_to(m)

To be able to see the porperties data when I click on a Point.

from folium.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.