Generating an Action from an feature select in an OpenLayers map to a halogen 5 component

Help
,
#1

Hi,

I have an application in Halogen 5 (rc9) and are using an openlayers map (written a small FFI) and are having a hard time to understand how to handle a select of a feature in the map and have the callback in Halogen 5 or an Action triggered in my component.

[https://github.com/dnulnets/haccessibility](http://My github repo)

For buttons in the map which is part of the DOM I have managed to do it with eventListenerEventSource, but not for the features in the map.

I have the following in javascript (FFI) when I add the interaction, just to see that it works:

var select = new Select(); /* OpenLayers Select interaction */
select.on('select', function (e) {
	console.log ("Got it!!!");
}

and then add it as an interaction to the map. That works fine, but I would like it to generate an Action in my component, or subscribe on an eventsource for it but have not been able to wrap my head around how to go about. I have tried to look around and found an effectEventSource, and maybe sending an emitter into the javascript. But alas, no joy.

So, where is my thinking off?

Thanks,

Tomas

#2

The Ace example in the Halogen repository has an example of doing this, using effectEventSource as you noticed. Iā€™d start there!

1 Like
#3

Hrmpfh, that easy ā€¦ :grin: Pretty obvious once I start thinking about it. Thanks a million for the pointer. Really appreciate it. Was not that far off, but I did not wrap it up ā€¦

Cheers :slight_smile:

1 Like
#4

Just for the sake of completion, this is what I ended up with:

-- Subscribe for feature selects on the map
s <- H.liftEffect $ Select.create Nothing
sfeat <- H.subscribe $ HQE.effectEventSource \emitter -> do
      key <- Select.onSelect s (\e -> HQE.emit emitter (FeatureSelect e))
      pure (HQE.Finalizer (Select.unSelect s key))
H.liftEffect $ sequence_ $ addInteraction <$> olmap <*> (Just s)

Initially I also forgot to run the effect in the eventhandler so nothing happened until I saw how onImpl was done in the Ace example.

exports.onImpl = function (event, f, self) {
  return function () {
      return self.on (event, function(e) {
          f(e)();
      });
  }
}

Everything works fine now, learned something new today, thanks :slight_smile:

2 Likes