Lisplog

Blogging in Lisp

Search

Feed Aggregator

Rendered on Tue, 19 Jun 2018 10:32:56 GMT  newer latest older 
Next udpate: Tue, 19 Jun 2018 11:00:00 GMT feeds

Updating nested list records

via Elm Discourse - Latest posts by @Guy_Bowden Guy Bowden on Mon, 18 Jun 2018 23:19:43 GMT

That was simple :slight_smile: thanks.

module Main exposing (main)

import Html exposing (Html)


main : Html msg
main =
    Html.div [] (List.indexedMap m items)


items = [
    { contents= "bob" }, { contents= "foo" }]

m idx item =
    Html.div [] [Html.text (toString idx), Html.text item.contents]

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @enetsee Michael Thomas on Mon, 18 Jun 2018 18:03:06 GMT

Perfect. Thank you for your help Luke.

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @luke Luke Westby on Mon, 18 Jun 2018 17:41:30 GMT

yep! the values you can pass as properties are in the set of anything you can represent as a Json.Encode.Value, which includes arrays and objects.

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @enetsee Michael Thomas on Mon, 18 Jun 2018 17:30:03 GMT

Cool - I’ll give it a try that way.

One thing that isn’t immediately clear is how to set up properties when there are multiple values (as is the case for both layers and sources).

Would you simply encode as a JSON object (or array) and iterate through using the API add them on the JS side?

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @luke Luke Westby on Mon, 18 Jun 2018 17:21:21 GMT

that one is a little trickier because it requires shadow dom to do correctly and browser support and polyfills for shadow dom are much shakier than custom element definitions. the way i would go first is to make types that describe layers and sources and then encode them to json and pass them as properties in the same way that the example passes zoom as an int. still declarative! but it just doesn’t look as satisfying in the dom explorer.

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @enetsee Michael Thomas on Mon, 18 Jun 2018 17:14:40 GMT

That’s… awesome :heart_eyes:

Is it possible to use the same, declarative, approach for sources and layers i.e. using nested custom elements? If so, do you have any references you could point me toward?

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @luke Luke Westby on Mon, 18 Jun 2018 15:59:18 GMT

You can try it here if you fill in your mapbox token in the HTML editor

https://ellie-app.com/xJCBDRbbcqa1


Browser support for this ellie: https://caniuse.com/#feat=custom-elementsv1

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @luke Luke Westby on Mon, 18 Jun 2018 15:38:10 GMT

Use a custom element

customElements.define('mapbox-gl', class extends HTMLElement {
  constructor() {
    super()
    this._zoom = 0
  }
  get zoom() {
    return this._zoom
  }
  set zoom(value) {
    if (this._zoom === value) return
    this._zoom = value
    if (!this._map) return
    this._map.setZoom(this._zoom)
  }
  connectedCallback() {
    this._map = new Map({
      container: this,
      zoom: this._zoom
    })
  }
  disconnectedCallback() {
    this._map.remove()
  }
})

zoom : Int -> Html.Attribute msg
zoom howMuch =
    Html.Attributes.property "zoom" (Json.Encode.int howMuch)


mapbox : List (Html.Attribute msg) -> Html msg
mapbox attrs =
    Html.node "mapbox-gl" attrs []

Initializing MapboxGL.js within a single page app

via Elm Discourse - Latest posts by @enetsee Michael Thomas on Mon, 18 Jun 2018 14:16:03 GMT

Hi,

I have been trying to figure out a non-hacky way of initializing a MapboxGL map within the a single page application.

The MapboxGL library exposes a method Map([options]) which allows you specify the id of the node which should act as the parent and I am able to call this via a port. Clearly the node must exist at the point that call is made.

My application is structured along the lines of @rtfeldman single page app example.

The problem arises since I don’t know when to send my port messages after loading a specific page since I don’t know when the node onto which Mapbox will mount has been rendered.

My current approach involves queueing port messages when the target node does not exist and using a MutationObserver to replay then when the node is added but this seems both a long winded way to doing it and slightly fragile.

Does anyone know of other approaches for this kind of thing?

Thanks

Michael

Updating nested list records

via Elm Discourse - Latest posts by @rupert Rupert Smith on Mon, 18 Jun 2018 12:56:10 GMT

Like this?

http://package.elm-lang.org/packages/elm-lang/core/5.1.1/List#indexedMap

Tell: elm-native-expo-counter upgraded to React Native 0.55 / Expo 27

via Elm Discourse - Latest posts by @system system on Mon, 18 Jun 2018 11:42:42 GMT

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

 newer latest older