nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Map.on ‘Click’ Event Works in IOS but not Android

deleted-user-1_r2dgYuILKY

I have a PhoneGap hybrid app developed with ArcGIS JS API 3.24 and Framework7 v1. I have a map click event that’s working in IOS, but not Android. Is there an event handler method that works for both?

 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'click'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; code here<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

All comments

RobertScheitlin__GISP

Levi,

This is what I use

map<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">on</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit; font-size: 14px;">'click, touchend'</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">,</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit; font-size: 14px;">function</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">(</SPAN>evt<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">{</SPAN>

deleted-user-1_r2dgYuILKY

Robert,

This method works in iOS but not in the Android emulator (appetize.io). I don't have an Android device, so that's what I've been using to test the apk. Here is a link to the debug build:

https://build.phonegap.com/apps/3040375/download/android

RobertScheitlin__GISP

Levi,

So you are saying that adding touchend does not work either?

deleted-user-1_r2dgYuILKY

Not when I run the apk in Appetize.io. Maybe it will work on an actual Android device though? Since I'm using a mouse click through the browser.

AndyGup

Hey Levi, map click event works on Cordova 8.0.0 using ArcGIS API for JavaScript 3.24 and Android 8.1.0. That tells me it's very possible Framework 7 is introducing the problem.

Did you try using the ArcGIS API for JavaScript 4.x?

deleted-user-1_r2dgYuILKY

I did not. The ArcGIS JS 3.24 portions of this app were ported over from our website. Should I add a Cordova script? The iOS version of this is working like as it should and is ready to be distributed, so I can't make any major changes now.

AndyGup

>> Should I add a Cordova script?

From your code snippet line 12 above, I assumed you're already using Cordova?

Since we don't test the JS API with Framework7, here are some options for you:

- Try porting a simple test app to JS API 4.x and see if you have the same issue

- Deep debug this issue in Framework7

- Use something other than Framework7

Something is interfering with the map click. You could try debugging inside the Framework7 code click handlers, for example, click.js.

deleted-user-1_r2dgYuILKY

OK. Instead of map.on("click"), $$(document).on(“click”) seems to work on iOS and Android, but it as not as responsive as map.on("click"). Also, sometimes the ESRI basemaps don't load when I navigate to the pages. I have to go back and try again.

It's working in iOS, but I get this error in the dev console in Safari TypeError: undefined is not an object (evaluating 'b.type') in relation to this function:

<SPAN class="token function">$$</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> mp <SPAN class="operator token">=</SPAN> webMercatorUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">webMercatorToGeographic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x <SPAN class="operator token">=</SPAN> mp<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y <SPAN class="operator token">=</SPAN> mp<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>graphic<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">" Longitude: "</SPAN> <SPAN class="operator token">+</SPAN> x<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">" <br>Latitude: "</SPAN> <SPAN class="operator token">+</SPAN> y<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">)</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTitle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Forecast Reports"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I think it's having trouble with evt,mapPoint, but it's still generating a popup.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.