how to create interactive map component #158

pandadezzz · 2023-10-12T03:51:22Z

pandadezzz
Oct 12, 2023

How would one go about creating a interactive map like streamlit-folium where user can interact with map and get output of coordinates of where user clicked?

example html would be

<!DOCTYPE html>
<html>
<head>
    <title>My Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <style>
        #map {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>

<div id="map"></div>

<script>
    // Create the map
    var map = L.map('map');

    // Set the view to a given place and zoom
    map.setView([51.505, -0.09], 13);

    // Add the OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    // Initial marker variable to null
    var marker = null;

    // Move the marker to clicked location
    map.on('click', function(e) {
        // Remove old marker
        if(marker) {
            map.removeLayer(marker);
        }

        // Add new marker
        marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
    });
</script>

</body>
</html>

But i am not sure how to add this to html element? Or then access the values of e.latlng.lat, e.latlng.lng to be used in app?

FabienArcellier · 2023-10-15T12:12:32Z

FabienArcellier
Oct 15, 2023
Collaborator

Map component is a must have. We didn't take time to implement it properly.

Someone has opened a PR with custom component for mapping with leaflet. I try using it it work almost fine. There is some fix to perform to remove some bugs. I don't know when a map component would be release.

#155

1 reply

pandadezzz Oct 16, 2023
Author

thanks for info. I've tested the commit - it's a nice start. I am going to fix the issues and make a simple map component PR soon.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to create interactive map component #158

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

how to create interactive map component #158

pandadezzz Oct 12, 2023

Replies: 1 comment · 1 reply

FabienArcellier Oct 15, 2023 Collaborator

pandadezzz Oct 16, 2023 Author

pandadezzz
Oct 12, 2023

Replies: 1 comment 1 reply

FabienArcellier
Oct 15, 2023
Collaborator

pandadezzz Oct 16, 2023
Author