How can I use raw div in elm-ui?

Learn
1

I want to incorporate a map using leafletjs into my page built by elm-ui. Leaflet need a root div to draw the map upon. But there is no a div component in the elm-ui package. What should I do? Can(how) I use raw div together with elm-ui?

I found the el of elm-ui does output div tag. so I could probably use it as the root div for my map. but I doubt it’s the right way to go.

A more general question is, how can I use the core html element with the elm-ui element? Any online references on this topic?

2

Use Element.html to convert Html into Element

3

It would probably be best if you encapsulate the leafletjs map in a web component. This way it will be isolated from the rest of your app. See here and example on how to do that.

Integrating it into your elm-ui page would be accomplished with the help of a few functions that implement the API of leaflet in terms of attributes (longitude, latitude, zoom, etc).

From there, you can integrate the component into your elm-ui using Element.html.

2 Likes
4

There is an Element.html functions that lets you use stuff from the Html package.
Trying to strip out a bunch of app specific stuff, something like this (I have Element imported)

layout
  [ width fill, height fill
  , htmlAttribute (Html.Attributes.id "layout")
  ] <|
  Keyed.row [ width fill, height fill ]
    [ ( "main"
      , Keyed.column [ width fill, height fill ]
        [ ( "map"
          , el
            [ width fill
            , height fill
            , htmlAttribute (Html.Attributes.id "map-container")
            ]
            (html <| Html.div [ Html.Attributes.id "map" ] [])
          )
        ]
      )
    ]

I’ve got a sidebar and timeline, so you can probably remove one of the row/column.

I haven’t tried making my map a custom element since I send a lot of data to it, and I’m not sure that would work well

1 Like
5

Thanks. I’ve read other posts mentioning the same. Looks like this is one of the best practices on incorporating big solution built by 3rd-party JS lib. I’m still exploring elm on different aspects, will definitely try this way later.

6

Thank you @wondible and @MartinS, I’ll give this a try. Looks like a simple solution.

7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.