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.on('click', function(evt){
code here...
});
Levi,
This is what I use
map.on('click, touchend', function(evt){
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:
Levi,
So you are saying that adding touchend does not work either?
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.
Levi,
Since touchend is a whole other event I would say yes.
OK. My coworker tested it on an Android phone and can't get it to work either. The touch event is supposed to trigger a popup.
OK. Anytime I have had an issue with click on a mobile device if I added touchend to the event handler it always worked for me.
OK. Here is the JS for the app. Map_B is an html page that is loaded from a link button.
// Initialize app
var myApp = new Framework7();
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;
// Add view
var mainView = myApp.addView('.view-main', {
domCache: true
});
// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});
myApp.onPageInit('map_B', function (page){
var map;
require([
"esri/config",
"esri/map",
"esri/arcgis/utils",
"esri/tasks/Geoprocessor",
"esri/tasks/GeometryService",
"esri/graphic",
"esri/geometry/webMercatorUtils",
"esri/dijit/Popup",
"esri/InfoTemplate",
"esri/dijit/HomeButton",
"esri/dijit/Search",
"dojo/dom-construct",
"dojo/dom",
"dojo/i18n!esri/nls/jsapi",
"dojo/dom-attr",
"dojo/query",
"dojo/on",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojo/domReady!"
], function (
esriConfig, Map, arcgisUtils, Geoprocessor, GeometryService,
Graphic, webMercatorUtils, Popup, InfoTemplate, HomeButton, Search,
domConstruct, dom, esriBundle, domAttr, query, on, parser
) {
esriBundle.widgets.Search.main.placeholder = "Find address, place or lat/lon";
map = new Map("map", {
basemap: "hybrid",
center: [-97, 40],
zoom: 3,
slider: false
});
esriConfig.defaults.geometryService = new GeometryService("http://gis.mymetcon.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var home = new HomeButton({
map: map
}, "HomeButton_B");
home.startup();
var search = new Search({
map: map,
showInfoWindowOnSelect: false,
enableLabel: false,
enableHighlight: false,
enableSuggestions: true
}, "search_B");
search.startup();
var x,y;
//Initial click function
map.on('click, touchend', function(evt){
var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
x = mp.x.toFixed(3);
y = mp.y.toFixed(3);
map.graphics.clear();
var graphic = new Graphic(evt.mapPoint);
map.graphics.add(graphic);
map.infoWindow.setFeatures([graphic]);
map.infoWindow.resize(200,200);
map.infoWindow.setContent(" Longitude: " + x.toString() + " <br>Latitude: " + y.toString());
map.infoWindow.show(evt.mapPoint)
map.infoWindow.setTitle("Forecast Reports");
});
var locationStr;
window.gp_chart = new Geoprocessor("http://gis.mymetcon.com/arcgis/rest/services/Three_Week_Chart/GPServer/ThreeWeekChart");
//Three week chart link click
var link = domConstruct.create("a",{
"class": "action",
"id": "chartLink_B",
"innerHTML": "Generate Chart", //text that appears in the popup for the link
"href": "javascript: void(0);"
}, query(".actionList", map.infoWindow.domNode)[0]);
on(link, "click", function()
{
window.navigator.notification.prompt(
"Enter Location Name: ", // message
handleLocationPrompt, // callback
"", //title
["Ok", "Exit"] // button titles
);
// handle user's dialog action
function handleLocationPrompt(results) {
if (results.buttonIndex === 1) {
// Ok
locationStr = results.input1;
var lat,lon = "";
lat = x.toString();
lon = y.toString();
var taskParams = {
"Latitude": lat,
"Longitude": lon,
"Location": locationStr
};
domAttr.set(dom.byId("chartLink_B"), "innerHTML", "Generating Chart...");
window.gp_chart.execute(taskParams, gpChartResultAvailable);
}
}
});
var content = "";
var chartPath;
function gpChartResultAvailable(results, messages){
domAttr.set(dom.byId("chartLink_B"),"innerHTML", "Three Week Chart");
//clear any existing features displayed in the popup
map.infoWindow.startup();
if(results == 0){
var chartPath = "http://gis.mymetcon.com/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png";
//content = '<IMG SRC="' + chartPath + '" width=100% height=100%>';
}else{
content = " Unable To Generate Chart";
}
map.infoWindow.resize(250, 170);
map.infoWindow.setTitle("Click on Chart");
var img = document.createElement("img");
img.src=chartPath;
img.width=240;
img.height=160;
img.addEventListener("click", function () {window.location = chartPath;});
map.infoWindow.setContent(img);
map.infoWindow.reposition();
};
});
})
Maybe Andy can help.