How can I add a live ipyleaflet map to Anvil?

[reda.gossony]

What I’m trying to do: I have some code on a Jupyter notebook that simulates the real-time movement of a vehicle along a pre-determined path (as a list of coordinates) on ipyleaflet. It basically shows the path between two markers, and then a third moving marker moves along the path (please see the Jupyter code). I’m trying to show this same interactive map within my Anvil app.

What I’ve tried and what’s not working: I tried to convert the map to HTML to show it on Anvil by calling a server function (shown below). But the problem is, once it’s converted to HTML it’s static and my Python code won’t be able to modify the position of the marker. So I’m not sure how to go about it within Anvil since I’m new to it.

Code Sample:

Server code to return map in HTML:

    # HTML placeholder:
    self.folium_placeholder = HtmlTemplate()
    
    # Add the template to our card:
    self.card_1.add_component(self.folium_placeholder)

    # Call server's "make_map" which returns the map in HTML:
    self.folium_placeholder.html = anvil.server.call('make_map')
    self.card_1.visible = True

Jupyter code to simulate movement along the map:

from ipyleaflet import Map, Marker, AntPath

# Center the map at the average X-Y points of the path:
center = (33.55423099111111, -7.624501421111111)

# Create a map object:
m = Map(center=center, zoom=13)

# Route to be taken: (normally this path is computed & stored in a DB but
# I copy-pasted it for simpler reproducibility)
path = [ [33.5411488, -7.5794811],
         [33.5412402, -7.5795595],
         [33.5417331, -7.57996],
         [33.5418974, -7.5800929],
         [33.5432614, -7.5812225],
         [33.5433477, -7.5813008],
         [33.5444994, -7.5822671],
         [33.5445967, -7.5823491],
         [33.544988, -7.5827073],
         [33.5476859, -7.5849085],
         [33.5477722, -7.5849964],
         [33.5486292, -7.5859519],
         [33.5487275, -7.5857875],
         [33.5491853, -7.5864057],
         [33.5499662, -7.5874609],
         [33.5498439, -7.587587],
         [33.5506432, -7.5884567],
         [33.5511799, -7.5889557],
         [33.5515046, -7.5892899],
         [33.5522733, -7.5900054],
         [33.5527107, -7.5904027],
         [33.553079, -7.5907443],
         [33.5533807, -7.5910218],
         [33.5543522, -7.5919123],
         [33.5544572, -7.5920105],
         [33.5547075, -7.5922415],
         [33.555303, -7.5927779],
         [33.556003, -7.5934134],
         [33.5561335, -7.5934934],
         [33.5573642, -7.5938461],
         [33.5574403, -7.5937775],
         [33.5575852, -7.5937772],
         [33.5577144, -7.5939521],
         [33.5587309, -7.5941295],
         [33.5604774, -7.5944197],
         [33.5623692, -7.5947609],
         [33.5628041, -7.5948519],
         [33.5627912, -7.5950528],
         [33.5623265, -7.5949738],
         [33.561216, -7.5947657],
         [33.5606722, -7.5946638],
         [33.5602063, -7.5945765],
         [33.5599793, -7.5945461],
         [33.5587228, -7.5983465],
         [33.5575395, -7.603906],
         [33.5564333, -7.6094216],
         [33.5540941, -7.6207419],
         [33.5529865, -7.6261197],
         [33.5523421, -7.6292593],
         [33.5503488, -7.63882],
         [33.5483646, -7.6451374],
         [33.5475533, -7.6462177],
         [33.5452278, -7.6508047],
         [33.5422984, -7.6558144],
         [33.5405838, -7.6587846],
         [33.5399228, -7.6598597],
         [33.5390237, -7.6615873],
         [33.5390865, -7.6627075],
         [33.5408139, -7.6629631],
         [33.5417034, -7.6628033],
         [33.5433927, -7.6634072],
         [33.5434618, -7.6635324],
         [33.544123, -7.6650199],
         [33.5445102, -7.6658912],
         [33.5448511, -7.666659],
         [33.5451912, -7.6674301],
         [33.5454642, -7.6680375],
         [33.5458589, -7.6689281],
         [33.552523, -7.6651507],
         [33.5529399, -7.6652832],
         [33.5542562, -7.6661919],
         [33.5568652, -7.6669174],
         [33.5616769, -7.6689237],
         [33.5618333, -7.6688144],
         [33.5625284, -7.668268],
         [33.5632622, -7.6681107],
         [33.5648033, -7.6678721],
         [33.5697028, -7.6678301],
         [33.5702167, -7.6678147],
         [33.569963, -7.6646805],
         [33.5696344, -7.6624301],
         [33.5697328, -7.6622584],
         [33.5698635, -7.6627064],
         [33.5702491, -7.6661483],
         [33.5711631, -7.6661208],
         [33.5720282, -7.6645927],
         [33.5715266, -7.6641963],
         [33.5718282, -7.6636678],
         [33.572115, -7.6631654],
         [33.5722511, -7.6629269]]

# Marker for starting position in the route:
marker1 = Marker(location=path[0])
m.add_layer(marker1)

# Marker for arriving position in the route:
marker2 = Marker(location=path[len(path)-1])
m.add_layer(marker2)

# Tracker: marker to simulate movement of the vehicle along the path:
tracker = Marker(location=path[0])
m.add_layer(tracker)

# AntPath to display the direction of the path:
ant_path = AntPath(
    locations= path,
    dash_array=[1, 10],
    delay=1000,
    color='#7590ba',
    pulse_color='#3f6fba'
)
# add the AntPath layer:
m.add_layer(ant_path)

# Simulate movement along the path:
display(m)
for i in range(1, len(path)-1):
    tracker.location = path[i+1]  # update tracker to the next coordinate

[p.colbert]

You might be interested in Referring to the form from Javascript in

HTML Forms

[divyeshlakhotia]

Since I can’t see your HTML, I cannot tell for sure. But anvil.js module can solve your problem.

In Anvil Code

from anvil.js.window import document

Dom_node=document.getElementById('id_of_div')

You can use all methods of getting a div and even jQuery, all in Python!

[reda.gossony]

Thank you for your reply. I’m not sure how I’m supposed to use this within the app since I’m not really familiar with JS and frontend dev.

The HTML of the map is as such:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IPyWidget export</title>
</head>
<body>


<!-- Load require.js. Delete this if your page already loads require.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js" integrity="sha256-Ae2Vz/4ePdIu6ZyI/5ZGsYnb+m0JlOmKPjt6XZ9JJkA=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@jupyter-widgets/html-manager@^0.20.0/dist/embed-amd.js" crossorigin="anonymous"></script>

<script type="application/vnd.jupyter.widget-state+json">
{
  "version_major": 2,
  "version_minor": 0,
  "state": {
    "0944f24610d343d09bcf41981098c54f": {
      "model_name": "LeafletMapStyleModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {}
    },
    "6363dede50594cff83784d6f0d4a07d3": {
      "model_name": "LeafletMapStyleModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "cursor": "move"
      }
    },
    "80323d5e2a0049c5907f25518bdf56ac": {
      "model_name": "LeafletTileLayerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
        "base": true,
        "max_zoom": 19,
        "min_zoom": 1,
        "name": "OpenStreetMap.Mapnik",
        "options": [
          "attribution",
          "detect_retina",
          "max_native_zoom",
          "max_zoom",
          "min_native_zoom",
          "min_zoom",
          "no_wrap",
          "tile_size",
          "tms"
        ],
        "url": "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
      }
    },
    "59153c1440ea4313a800aeb06d476279": {
      "model_name": "LayoutModel",
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "state": {}
    },
    "9bddcc51850b43a3a85c8350c56e6497": {
      "model_name": "LeafletMapStyleModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {}
    },
    "7441d31d2c524dd083c2f2bbc3621c6a": {
      "model_name": "LeafletMapModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "_dom_classes": [],
        "bottom": 841070.0,
        "center": [
          33.55423099111111,
          -7.624501421111111
        ],
        "controls": [
          "IPY_MODEL_0ec158a2a4724823a2ab46232e452e52",
          "IPY_MODEL_095b54c3616b41e78d47800c0184ad03"
        ],
        "crs": {
          "name": "EPSG3857",
          "custom": false
        },
        "default_style": "IPY_MODEL_0944f24610d343d09bcf41981098c54f",
        "dragging_style": "IPY_MODEL_6363dede50594cff83784d6f0d4a07d3",
        "east": -7.54039764404297,
        "layers": [
          "IPY_MODEL_80323d5e2a0049c5907f25518bdf56ac",
          "IPY_MODEL_336d78d342e34d5a8f649e0c7fbe2faa",
          "IPY_MODEL_0b730e24e99b417d92420731d284a7d5",
          "IPY_MODEL_a33c4dea08d34fa3bdca86026e4dba05",
          "IPY_MODEL_193c89961f1348248b68ee1c55790b8c"
        ],
        "layout": "IPY_MODEL_59153c1440ea4313a800aeb06d476279",
        "left": 1003670.0,
        "north": 33.58287718199355,
        "options": [
          "bounce_at_zoom_limits",
          "box_zoom",
          "center",
          "close_popup_on_click",
          "double_click_zoom",
          "dragging",
          "fullscreen",
          "inertia",
          "inertia_deceleration",
          "inertia_max_speed",
          "interpolation",
          "keyboard",
          "keyboard_pan_offset",
          "keyboard_zoom_offset",
          "max_zoom",
          "min_zoom",
          "prefer_canvas",
          "scroll_wheel_zoom",
          "tap",
          "tap_tolerance",
          "touch_zoom",
          "world_copy_jump",
          "zoom",
          "zoom_animation_threshold",
          "zoom_delta",
          "zoom_snap",
          "zoom_start"
        ],
        "right": 1004650.0,
        "south": 33.52565471117594,
        "style": "IPY_MODEL_9bddcc51850b43a3a85c8350c56e6497",
        "top": 840670.0,
        "west": -7.708625793457032,
        "window_url": "http://localhost:8888/notebooks/Freterium.ipynb",
        "zoom": 13.0
      }
    },
    "0ec158a2a4724823a2ab46232e452e52": {
      "model_name": "LeafletZoomControlModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "options": [
          "position",
          "zoom_in_text",
          "zoom_in_title",
          "zoom_out_text",
          "zoom_out_title"
        ]
      }
    },
    "095b54c3616b41e78d47800c0184ad03": {
      "model_name": "LeafletAttributionControlModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "options": [
          "position",
          "prefix"
        ],
        "position": "bottomright"
      }
    },
    "336d78d342e34d5a8f649e0c7fbe2faa": {
      "model_name": "LeafletMarkerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "location": [
          33.5411488,
          -7.5794811
        ],
        "options": [
          "alt",
          "draggable",
          "keyboard",
          "rise_offset",
          "rise_on_hover",
          "rotation_angle",
          "rotation_origin",
          "title",
          "z_index_offset"
        ]
      }
    },
    "0b730e24e99b417d92420731d284a7d5": {
      "model_name": "LeafletMarkerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "location": [
          33.5722511,
          -7.6629269
        ],
        "options": [
          "alt",
          "draggable",
          "keyboard",
          "rise_offset",
          "rise_on_hover",
          "rotation_angle",
          "rotation_origin",
          "title",
          "z_index_offset"
        ]
      }
    },
    "1c4e4ad4ff7543ca8155028c98d93a1d": {
      "model_name": "LeafletAwesomeIconModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "icon_color": "black",
        "name": "fa-truck",
        "options": []
      }
    },
    "a33c4dea08d34fa3bdca86026e4dba05": {
      "model_name": "LeafletMarkerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "icon": "IPY_MODEL_1c4e4ad4ff7543ca8155028c98d93a1d",
        "location": [
          33.5411488,
          -7.5794811
        ],
        "options": [
          "alt",
          "draggable",
          "keyboard",
          "rise_offset",
          "rise_on_hover",
          "rotation_angle",
          "rotation_origin",
          "title",
          "z_index_offset"
        ]
      }
    },
    "193c89961f1348248b68ee1c55790b8c": {
      "model_name": "LeafletAntPathModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "color": "#7590ba",
        "dash_array": [
          1,
          10
        ],
        "delay": 1000,
        "locations": [
          [
            33.5411488,
            -7.5794811
          ],
          [
            33.5412402,
            -7.5795595
          ],
          [
            33.5417331,
            -7.57996
          ],
          [
            33.5418974,
            -7.5800929
          ],
          [
            33.5432614,
            -7.5812225
          ],
          [
            33.5433477,
            -7.5813008
          ],
          [
            33.5444994,
            -7.5822671
          ],
          [
            33.5445967,
            -7.5823491
          ],
          [
            33.544988,
            -7.5827073
          ],
          [
            33.5476859,
            -7.5849085
          ],
          [
            33.5477722,
            -7.5849964
          ],
          [
            33.5486292,
            -7.5859519
          ],
          [
            33.5487275,
            -7.5857875
          ],
          [
            33.5491853,
            -7.5864057
          ],
          [
            33.5499662,
            -7.5874609
          ],
          [
            33.5498439,
            -7.587587
          ],
          [
            33.5506432,
            -7.5884567
          ],
          [
            33.5511799,
            -7.5889557
          ],
          [
            33.5515046,
            -7.5892899
          ],
          [
            33.5522733,
            -7.5900054
          ],
          [
            33.5527107,
            -7.5904027
          ],
          [
            33.553079,
            -7.5907443
          ],
          [
            33.5533807,
            -7.5910218
          ],
          [
            33.5543522,
            -7.5919123
          ],
          [
            33.5544572,
            -7.5920105
          ],
          [
            33.5547075,
            -7.5922415
          ],
          [
            33.555303,
            -7.5927779
          ],
          [
            33.556003,
            -7.5934134
          ],
          [
            33.5561335,
            -7.5934934
          ],
          [
            33.5573642,
            -7.5938461
          ],
          [
            33.5574403,
            -7.5937775
          ],
          [
            33.5575852,
            -7.5937772
          ],
          [
            33.5577144,
            -7.5939521
          ],
          [
            33.5587309,
            -7.5941295
          ],
          [
            33.5604774,
            -7.5944197
          ],
          [
            33.5623692,
            -7.5947609
          ],
          [
            33.5628041,
            -7.5948519
          ],
          [
            33.5627912,
            -7.5950528
          ],
          [
            33.5623265,
            -7.5949738
          ],
          [
            33.561216,
            -7.5947657
          ],
          [
            33.5606722,
            -7.5946638
          ],
          [
            33.5602063,
            -7.5945765
          ],
          [
            33.5599793,
            -7.5945461
          ],
          [
            33.5587228,
            -7.5983465
          ],
          [
            33.5575395,
            -7.603906
          ],
          [
            33.5564333,
            -7.6094216
          ],
          [
            33.5540941,
            -7.6207419
          ],
          [
            33.5529865,
            -7.6261197
          ],
          [
            33.5523421,
            -7.6292593
          ],
          [
            33.5503488,
            -7.63882
          ],
          [
            33.5483646,
            -7.6451374
          ],
          [
            33.5475533,
            -7.6462177
          ],
          [
            33.5452278,
            -7.6508047
          ],
          [
            33.5422984,
            -7.6558144
          ],
          [
            33.5405838,
            -7.6587846
          ],
          [
            33.5399228,
            -7.6598597
          ],
          [
            33.5390237,
            -7.6615873
          ],
          [
            33.5390865,
            -7.6627075
          ],
          [
            33.5408139,
            -7.6629631
          ],
          [
            33.5417034,
            -7.6628033
          ],
          [
            33.5433927,
            -7.6634072
          ],
          [
            33.5434618,
            -7.6635324
          ],
          [
            33.544123,
            -7.6650199
          ],
          [
            33.5445102,
            -7.6658912
          ],
          [
            33.5448511,
            -7.666659
          ],
          [
            33.5451912,
            -7.6674301
          ],
          [
            33.5454642,
            -7.6680375
          ],
          [
            33.5458589,
            -7.6689281
          ],
          [
            33.552523,
            -7.6651507
          ],
          [
            33.5529399,
            -7.6652832
          ],
          [
            33.5542562,
            -7.6661919
          ],
          [
            33.5568652,
            -7.6669174
          ],
          [
            33.5616769,
            -7.6689237
          ],
          [
            33.5618333,
            -7.6688144
          ],
          [
            33.5625284,
            -7.668268
          ],
          [
            33.5632622,
            -7.6681107
          ],
          [
            33.5648033,
            -7.6678721
          ],
          [
            33.5697028,
            -7.6678301
          ],
          [
            33.5702167,
            -7.6678147
          ],
          [
            33.569963,
            -7.6646805
          ],
          [
            33.5696344,
            -7.6624301
          ],
          [
            33.5697328,
            -7.6622584
          ],
          [
            33.5698635,
            -7.6627064
          ],
          [
            33.5702491,
            -7.6661483
          ],
          [
            33.5711631,
            -7.6661208
          ],
          [
            33.5720282,
            -7.6645927
          ],
          [
            33.5715266,
            -7.6641963
          ],
          [
            33.5718282,
            -7.6636678
          ],
          [
            33.572115,
            -7.6631654
          ],
          [
            33.5722511,
            -7.6629269
          ]
        ],
        "options": [
          "color",
          "dash_array",
          "delay",
          "hardware_accelerated",
          "paused",
          "pulse_color",
          "radius",
          "reverse",
          "use",
          "weight"
        ],
        "pulse_color": "#3f6fba"
      }
    },
    "8ae9992fa96446e188104891b7c19fbd": {
      "model_name": "LeafletMapStyleModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {}
    },
    "0e89c7aead624a8cab00545dbb97807f": {
      "model_name": "LeafletMapStyleModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "cursor": "move"
      }
    },
    "3e4768c27cb049aeae6c1acb8787fcfd": {
      "model_name": "LeafletTileLayerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
        "base": true,
        "max_zoom": 19,
        "min_zoom": 1,
        "name": "OpenStreetMap.Mapnik",
        "options": [
          "attribution",
          "detect_retina",
          "max_native_zoom",
          "max_zoom",
          "min_native_zoom",
          "min_zoom",
          "no_wrap",
          "tile_size",
          "tms"
        ],
        "url": "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"
      }
    },
    "fdd9ed7251f641d88625343744de43cb": {
      "model_name": "LayoutModel",
      "model_module": "@jupyter-widgets/base",
      "model_module_version": "1.2.0",
      "state": {}
    },
    "d8dafbff8d6b4b908c04bb3dbe8643bd": {
      "model_name": "LeafletMapStyleModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {}
    },
    "07684481be414b05ab535cd9d9aac747": {
      "model_name": "LeafletMapModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "_dom_classes": [],
        "bottom": 841070.0,
        "center": [
          33.55423099111111,
          -7.624501421111111
        ],
        "controls": [
          "IPY_MODEL_c6105abc8e5948f3953dad22ddb81d63",
          "IPY_MODEL_0c3459b97b2f4a18af4a067b9e5dad19"
        ],
        "crs": {
          "name": "EPSG3857",
          "custom": false
        },
        "default_style": "IPY_MODEL_8ae9992fa96446e188104891b7c19fbd",
        "dragging_style": "IPY_MODEL_0e89c7aead624a8cab00545dbb97807f",
        "east": -7.54039764404297,
        "layers": [
          "IPY_MODEL_3e4768c27cb049aeae6c1acb8787fcfd",
          "IPY_MODEL_e9751bdd910c44919481e17b773a5166",
          "IPY_MODEL_8d86106287664d48bf1f9948c3aded19",
          "IPY_MODEL_6dda539017c443da9aecc847bcf3dbd2",
          "IPY_MODEL_ea957e973c88408383c8725bf78f97c5"
        ],
        "layout": "IPY_MODEL_fdd9ed7251f641d88625343744de43cb",
        "left": 1003670.0,
        "north": 33.58287718199355,
        "options": [
          "bounce_at_zoom_limits",
          "box_zoom",
          "center",
          "close_popup_on_click",
          "double_click_zoom",
          "dragging",
          "fullscreen",
          "inertia",
          "inertia_deceleration",
          "inertia_max_speed",
          "interpolation",
          "keyboard",
          "keyboard_pan_offset",
          "keyboard_zoom_offset",
          "max_zoom",
          "min_zoom",
          "prefer_canvas",
          "scroll_wheel_zoom",
          "tap",
          "tap_tolerance",
          "touch_zoom",
          "world_copy_jump",
          "zoom",
          "zoom_animation_threshold",
          "zoom_delta",
          "zoom_snap",
          "zoom_start"
        ],
        "right": 1004650.0,
        "south": 33.52565471117594,
        "style": "IPY_MODEL_d8dafbff8d6b4b908c04bb3dbe8643bd",
        "top": 840670.0,
        "west": -7.708625793457032,
        "window_url": "http://localhost:8888/notebooks/Freterium.ipynb",
        "zoom": 13.0
      }
    },
    "c6105abc8e5948f3953dad22ddb81d63": {
      "model_name": "LeafletZoomControlModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "options": [
          "position",
          "zoom_in_text",
          "zoom_in_title",
          "zoom_out_text",
          "zoom_out_title"
        ]
      }
    },
    "0c3459b97b2f4a18af4a067b9e5dad19": {
      "model_name": "LeafletAttributionControlModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "options": [
          "position",
          "prefix"
        ],
        "position": "bottomright"
      }
    },
    "e9751bdd910c44919481e17b773a5166": {
      "model_name": "LeafletMarkerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "location": [
          33.5411488,
          -7.5794811
        ],
        "options": [
          "alt",
          "draggable",
          "keyboard",
          "rise_offset",
          "rise_on_hover",
          "rotation_angle",
          "rotation_origin",
          "title",
          "z_index_offset"
        ]
      }
    },
    "8d86106287664d48bf1f9948c3aded19": {
      "model_name": "LeafletMarkerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "location": [
          33.5722511,
          -7.6629269
        ],
        "options": [
          "alt",
          "draggable",
          "keyboard",
          "rise_offset",
          "rise_on_hover",
          "rotation_angle",
          "rotation_origin",
          "title",
          "z_index_offset"
        ]
      }
    },
    "5fbd5ebf2911470789ca9ce02e302482": {
      "model_name": "LeafletAwesomeIconModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "icon_color": "black",
        "name": "fa-truck",
        "options": []
      }
    },
    "6dda539017c443da9aecc847bcf3dbd2": {
      "model_name": "LeafletMarkerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "icon": "IPY_MODEL_5fbd5ebf2911470789ca9ce02e302482",
        "location": [
          33.5574403,
          -7.5937775
        ],
        "options": [
          "alt",
          "draggable",
          "keyboard",
          "rise_offset",
          "rise_on_hover",
          "rotation_angle",
          "rotation_origin",
          "title",
          "z_index_offset"
        ]
      }
    },
    "ea957e973c88408383c8725bf78f97c5": {
      "model_name": "LeafletAntPathModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "color": "#7590ba",
        "dash_array": [
          1,
          10
        ],
        "delay": 1000,
        "locations": [
          [
            33.5411488,
            -7.5794811
          ],
          [
            33.5412402,
            -7.5795595
          ],
          [
            33.5417331,
            -7.57996
          ],
          [
            33.5418974,
            -7.5800929
          ],
          [
            33.5432614,
            -7.5812225
          ],
          [
            33.5433477,
            -7.5813008
          ],
          [
            33.5444994,
            -7.5822671
          ],
          [
            33.5445967,
            -7.5823491
          ],
          [
            33.544988,
            -7.5827073
          ],
          [
            33.5476859,
            -7.5849085
          ],
          [
            33.5477722,
            -7.5849964
          ],
          [
            33.5486292,
            -7.5859519
          ],
          [
            33.5487275,
            -7.5857875
          ],
          [
            33.5491853,
            -7.5864057
          ],
          [
            33.5499662,
            -7.5874609
          ],
          [
            33.5498439,
            -7.587587
          ],
          [
            33.5506432,
            -7.5884567
          ],
          [
            33.5511799,
            -7.5889557
          ],
          [
            33.5515046,
            -7.5892899
          ],
          [
            33.5522733,
            -7.5900054
          ],
          [
            33.5527107,
            -7.5904027
          ],
          [
            33.553079,
            -7.5907443
          ],
          [
            33.5533807,
            -7.5910218
          ],
          [
            33.5543522,
            -7.5919123
          ],
          [
            33.5544572,
            -7.5920105
          ],
          [
            33.5547075,
            -7.5922415
          ],
          [
            33.555303,
            -7.5927779
          ],
          [
            33.556003,
            -7.5934134
          ],
          [
            33.5561335,
            -7.5934934
          ],
          [
            33.5573642,
            -7.5938461
          ],
          [
            33.5574403,
            -7.5937775
          ],
          [
            33.5575852,
            -7.5937772
          ],
          [
            33.5577144,
            -7.5939521
          ],
          [
            33.5587309,
            -7.5941295
          ],
          [
            33.5604774,
            -7.5944197
          ],
          [
            33.5623692,
            -7.5947609
          ],
          [
            33.5628041,
            -7.5948519
          ],
          [
            33.5627912,
            -7.5950528
          ],
          [
            33.5623265,
            -7.5949738
          ],
          [
            33.561216,
            -7.5947657
          ],
          [
            33.5606722,
            -7.5946638
          ],
          [
            33.5602063,
            -7.5945765
          ],
          [
            33.5599793,
            -7.5945461
          ],
          [
            33.5587228,
            -7.5983465
          ],
          [
            33.5575395,
            -7.603906
          ],
          [
            33.5564333,
            -7.6094216
          ],
          [
            33.5540941,
            -7.6207419
          ],
          [
            33.5529865,
            -7.6261197
          ],
          [
            33.5523421,
            -7.6292593
          ],
          [
            33.5503488,
            -7.63882
          ],
          [
            33.5483646,
            -7.6451374
          ],
          [
            33.5475533,
            -7.6462177
          ],
          [
            33.5452278,
            -7.6508047
          ],
          [
            33.5422984,
            -7.6558144
          ],
          [
            33.5405838,
            -7.6587846
          ],
          [
            33.5399228,
            -7.6598597
          ],
          [
            33.5390237,
            -7.6615873
          ],
          [
            33.5390865,
            -7.6627075
          ],
          [
            33.5408139,
            -7.6629631
          ],
          [
            33.5417034,
            -7.6628033
          ],
          [
            33.5433927,
            -7.6634072
          ],
          [
            33.5434618,
            -7.6635324
          ],
          [
            33.544123,
            -7.6650199
          ],
          [
            33.5445102,
            -7.6658912
          ],
          [
            33.5448511,
            -7.666659
          ],
          [
            33.5451912,
            -7.6674301
          ],
          [
            33.5454642,
            -7.6680375
          ],
          [
            33.5458589,
            -7.6689281
          ],
          [
            33.552523,
            -7.6651507
          ],
          [
            33.5529399,
            -7.6652832
          ],
          [
            33.5542562,
            -7.6661919
          ],
          [
            33.5568652,
            -7.6669174
          ],
          [
            33.5616769,
            -7.6689237
          ],
          [
            33.5618333,
            -7.6688144
          ],
          [
            33.5625284,
            -7.668268
          ],
          [
            33.5632622,
            -7.6681107
          ],
          [
            33.5648033,
            -7.6678721
          ],
          [
            33.5697028,
            -7.6678301
          ],
          [
            33.5702167,
            -7.6678147
          ],
          [
            33.569963,
            -7.6646805
          ],
          [
            33.5696344,
            -7.6624301
          ],
          [
            33.5697328,
            -7.6622584
          ],
          [
            33.5698635,
            -7.6627064
          ],
          [
            33.5702491,
            -7.6661483
          ],
          [
            33.5711631,
            -7.6661208
          ],
          [
            33.5720282,
            -7.6645927
          ],
          [
            33.5715266,
            -7.6641963
          ],
          [
            33.5718282,
            -7.6636678
          ],
          [
            33.572115,
            -7.6631654
          ],
          [
            33.5722511,
            -7.6629269
          ]
        ],
        "options": [
          "color",
          "dash_array",
          "delay",
          "hardware_accelerated",
          "paused",
          "pulse_color",
          "radius",
          "reverse",
          "use",
          "weight"
        ],
        "pulse_color": "#3f6fba"
      }
    }
  }
}
</script>
<script type="application/vnd.jupyter.widget-view+json">
{"version_major": 2, "version_minor": 0, "model_id": "07684481be414b05ab535cd9d9aac747"}
</script>

</body>
</html>

The “make_map” server function returns this HTML which I pass to the Anvil form and it shows the static map correctly when I run the app. But not sure how to move the marker’s position after that. I think the relevant part of the HTML is :

6dda539017c443da9aecc847bcf3dbd2": {
      "model_name": "LeafletMarkerModel",
      "model_module": "jupyter-leaflet",
      "model_module_version": "^0.15.0",
      "state": {
        "icon": "IPY_MODEL_5fbd5ebf2911470789ca9ce02e302482",
        "location": [
          33.5574403,
          -7.5937775
        ],
        "options": [
          "alt",
          "draggable",
          "keyboard",
          "rise_offset",
          "rise_on_hover",
          "rotation_angle",
          "rotation_origin",
          "title",
          "z_index_offset"
        ]
      }
    }

Since that’s where I found the marker’s coordinates.

[reda.gossony]

Hello,
Thank you for your response ! In fact, I’m not familiar with JS so I’m not really sure how to go about that. That’s why I was trying to achieve this through Python.

[p.colbert]

Gotcha. Once the web page, defined in HTML, is loaded into the browser, it is stored there as a corresponding, dynamic data structure. That structure is accessible from JavaScript, of course, but also from Python.

As @divyeshlakhotia demonstrated, the data structure is not JavaScript-specific. Deep inside the browser, it’s defined and manipulated with compiled languages such as C, C++, and Rust. It’s just been traditionally described in JavaScript terms, because that used to be the only way for web-page code to access it.

His post alludes to Accessing a Document Object Model (DOM) Node. That documentation goes into more detail. It’s not a complete DOM reference. But it has a link to one, right near the top:

You can access the DOM node for any Anvil Component in Python

[reda.gossony]

Latest thing I tried is I added :
dom_node = anvil.js.get_dom_node(self.card_1)

in order to peek around using Python’s dir() but to no avail. Since I’m not familiar with how HTML and JS work under the hood so I’m not really sure where to even start even if it’s in Python since the concepts I’ll have to use are JS-based.

Edit:
Since ipyleaflet renders the marker within an HTML script I tried to get all scripts using:

from anvil.js.window import  jQuery
    for script in jQuery('script'):
      print(script)

In the hopes of maybe locating the marker’s script and finding a way to modify it through Python. The output is:

<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>
<HTMLScriptElement proxyobject>

Kept using the methods available under proxyobject (inspecting them using dir) but couldn’t find anything. Referring to the section “Working with proxyobjects” on Anvil Docs | Accessing Javascript didn’t seem to help.

I hope someone can help. Thank you.

[divyeshlakhotia]

I did some research on it and it appears that modifying the marker position may not be possible in client side. Only a Server function can do it.

Howeve, leaflet only has a library available in js. Maybe that can be implemented in your app

[reda.gossony]

Only a Server function can do it.

How would it be done through a server function? I think that’s what I’ve been trying to do with the code above.

Maybe that can be implemented in your app

How would I have to include the js into the Anvil app?

[divyeshlakhotia]

For implementing js in your Anvil App, you can take a look at this documentation
Anvil Docs | Accessing Javascript

However, that will require prior knowledge of js.
I will have a look at the library and let you know if I have some success.

Edit: It looks like it has already been done

GoogleMap.Circle events missing

Hi @garaycs, welcome to the Forum! I’m sorry that that’s not currently supported in our Python wrapping of the Google Maps API. You can still use the Google Maps Javascript API. You can import it using Native Libraries - this is where you can write HTML to inject into the <head> of your page, so you can use <script> and <link> tags to import JS libraries: [01] Then you can use that library in a Custom HTML Form or a HTML file in Assets (in a <script> tag, of course). Here’s an example using …

[divyeshlakhotia]

Also, have you checked out the Google Maps component in Anvil? Maybe it can help you accomplish what you are trying to do.

Anvil Docs | Maps

It will not require any knowledge of javascript and you can do everything with Python.

[reda.gossony]

Thank you a lot for your help. I’ll try to see if I can convert what I did in Python into js to implement your first solution in order to keep the Leaflet objects I’m using. If not I guess I’ll switch to Google Maps.