Integrating high level components

First, Ionic looks like an awesome framework and I am very impressed by the ‘complete package’ feel. I just started with Ionic, but keep up the good work.

I have read a number of the threads related to integrating 3rd party controls and libraries (like angular-ui, mobiscroll, etc.), but I think my question is different.

I am looking to integrate a map, drawing, vector and possibly a 3d viewer where I need pretty complete control of the UX (e.g. provide a ‘slippy map’ and drawing/snapping experience), which requires a lot of low-level DOM event handling.

I am thinking that Ionic would provide the navigation framework, and on certain (tab) pages, it would yield to the custom (graphical) component.

I have downloaded a number of examples for integrating a basic Google Map, but some examples use a simple

container and others use directives that disable scrolling, etc, and others set up a ‘MapApp’ directive.

I also noted the section in the documentation on ‘tap’ and the ‘data-tap-disabled’ directive.

Is there a particular best practice for integrating these types of views and components? I know there are a number of ways to do all of these things in frameworks like Ionic and AngularJS, but does anyone have suggestions, recommendations or experience with this?

I have read a number of warnings related to integrating with other control libraries, especially those that want to participate in scrolling or touch events, so I thought this was worth asking before I go too far into trial-and-error.

[BTW, I hope at some point the Ionic framework will allow for ‘plugins’ of 3rd party controls as well.]

Hey there! So that’s a pretty ambitious app your working on :smile:

So the best thing to keep in mind, is that this is just angular. If you can find or build the directive needed for it, you can do it.

For any kind of maps, this directive library has always proven useful!/

Or if google is your cup of tea!/

As far as handling other libraries that need touch/mouse events, data-tab-disable handles most cases.

Thanks for your reply. Actually, it is not one application, but a framework for a range of map and drawing applications. We have been developing a lot of the tools and components for a year now, and have been evaluating various frameworks along the way to see if and how we wanted to integrate with them.

Thanks for the pointer to the Leaflet Directives; these look interesting and we will check it out. We actually sit on top of AND along side of Leaflet in our map engine component, so this is certainly of interest.

I have only be working with Ionic for a week or so, and I am very impressed. I even managed to integrate some Mobiscroll components, which seem very complimentary to the Ionic navigation framework.

Thanks again,

Hi There,

Well, I finally got to the point of bringing in maps and drawing overlays, but ran into a problem with selectively wanting to have touch events.

I am attaching a screen shot so you understand.

I have some tools in toolbars, and in order to get these to respond to ‘clicks’, I had to use data-tap-disabled on the map panel. This is OK, but some of these tools actually allow the user to ‘draw’ using touch events (complete with a snapping magnifying glass).

Of course the draw tools do not get the right touch events either. I have a lot of logic that handles touch-drag vs. touch-tap, but I don’t currently see the touch events coming through.

Is there a way to get finer grained control than data-tap-disabled?


Hmm, well you could create a directive and then look for elements that should have data-tap-disable and then apply it

.directive('disableTap', function($timeout) {
  return {
    link: function() {

      $timeout(function() {
        document.querySelector('.element').setAttribute('data-tap-disabled', 'true')

Note this gets applied to the body or view