I have a simple map where I draw some polygons. Then I want to capture if the user clicks on a polygon - and get a handle to that polygon (e.g. by a custom id of the polygon or similar).
I use code like this to add the polygon:
var poly = Map.createPolygon({
points : points,
id : 'poly',
fillColor : '#55ec858f',
strokeColor : 'black',
strokeWidth : 2
});
mapView.addPolygon(poly);
where points is an array of latitude/longitude objects. I have registered a click handler:
mapView.addEventListener('click',clickHandler);
... and it is defined like this:
function clickHandler(e){
console.log("click: id=" + e.source.id + ", source=" + JSON.stringify(e.source));
console.log("click: clicksource=" + e.clicksource + ", latitude=" + e.latitude + ", longitude=" + e.longitude);
}
The click handler is triggered once I click within the polygon (well, more correctly it is triggered wherever on the map I click). This is fine. However, on iOS I cannot identify which of the polygons the user clicked on. The output looks like this:
[INFO] : click: id=undefined, source={"horizontalWrap":true,"visible":true,"mapType":1,"rotateEnabled":false,"region":{"longitudeDelta":0.010248234495520592,"latitudeDelta":0.009999999776482582,"longitude":11.154247283935547,"latitude":55.55887985229492}}
[INFO] : click: clicksource=polygon, latitude=55.55712556278878, longitude=11.154479577247997
On Android I get what I want:
[INFO] : click: id=poly, source={"fillColor":"#55ec858f","strokeColor":"black","points":[{"latitude":55.563299,"longitude":11.157998},{"latitude":55.562731,"longitude":11.157987},{"latitude":55.562719,"longitude":11.158029},{"latitude":55.562648,"longitude":11.158027},{"latitude":55.562153,"longitude":11.157851},{"latitude":55.561301,"longitude":11.157834},{"latitude":55.561088,"longitude":11.157913},{"latitude":55.560212,"longitude":11.157896},{"latitude":55.560106,"longitude":11.157935},{"latitude":55.559751,"longitude":11.157928},{"latitude":55.559515,"longitude":11.157882},{"latitude":55.559267,"longitude":11.157731},{"latitude":55.559184,"longitude":11.15775},{"latitude":55.559018,"longitude":11.15783},{"latitude":55.558899,"longitude":11.157953},{"latitude":55.558686,"longitude":11.157928},{"latitude":55.558604,"longitude":11.157864},{"latitude":55.558391,"longitude":11.157859},{"latitude":55.558143,"longitude":11.157834},{"latitude":55.557694,"longitude":11.157804},{"latitude":55.557233,"longitude":11.15769},{"latitude":55.556985,"longitude":11.157623},{"latitude":55.556678,"longitude":11.157513},{"latitude":55.556266,"longitude":11.157317},{"latitude":55.556041,"longitude":11.157291},{"latitude":55.555828,"longitude":11.157245},{"latitude":55.555592,"longitude":11.157157},{"latitude":55.555144,"longitude":11.156961},{"latitude":55.554779,"longitude":11.156786},{"latitude":55.554507,"longitude":11.156677},{"latitude":55.554401,"longitude":11.156675},{"latitude":55.554366,"longitude":11.156632},{"latitude":55.554385,"longitude":11.156451},{"latitude":55.554447,"longitude":11.155964},{"latitude":55.554525,"longitude":11.155484},{"latitude":55.554621,"longitude":11.155014},{"latitude":55.554733,"longitude":11.154556},{"latitude":55.554862,"longitude":11.154111},{"latitude":55.555005,"longitude":11.153681},{"latitude":55.555164,"longitude":11.153268},{"latitude":55.555337,"longitude":11.152873},{"latitude":55.555524,"longitude":11.152498},{"latitude":55.555724,"longitude":11.152145},{"latitude":55.555936,"longitude":11.151815},{"latitude":55.556159,"longitude":11.151509},{"latitude":55.556393,"longitude":11.151228},{"latitude":55.556636,"longitude":11.150974},{"latitude":55.556887,"longitude":11.150747},{"latitude":55.557147,"longitude":11.150549},{"latitude":55.557412,"longitude":11.150379},{"latitude":55.557684,"longitude":11.15024},{"latitude":55.557959,"longitude":11.150131},{"latitude":55.558238,"longitude":11.150053},{"latitude":55.55852,"longitude":11.150006},{"latitude":55.558802,"longitude":11.14999},{"latitude":55.559084,"longitude":11.150006},{"latitude":55.559366,"longitude":11.150053},{"latitude":55.559645,"longitude":11.150131},{"latitude":55.55992,"longitude":11.15024},{"latitude":55.560192,"longitude":11.150379},{"latitude":55.560457,"longitude":11.150549},{"latitude":55.560717,"longitude":11.150747},{"latitude":55.560968,"longitude":11.150974},{"latitude":55.561211,"longitude":11.151228},{"latitude":55.561445,"longitude":11.151509},{"latitude":55.561668,"longitude":11.151815},{"latitude
[INFO] : click: clicksource=polygon, latitude=55.55844486621942, longitude=11.154376566410065
The id is really enough for me to get the relevant data (and be able to show the user some more details about the area).
I have tried to add an event handler to the polygon - but it does not work (and really I would want to use one global event listener as in the example above).
I think the only thing I have not tried yet is to try to calculate which polygon I am inside based on the GPS points... I am not really good at such geometric arithmetic - so would like not to go down that road if possible ;-)
Any good ideas?
Thanks in advance!
Edited:
Forgot to mention platform...
Appc CLI 5.1.0
Studio: 4.4.0
ti.map: 2.3.6 (Android)
ti.map: 2.5.2 (iOS)
/John
You can use e.shape.title
I do it like this:
map.addEventListener('click', function(e) {
Ti.API.info('You clicked ' + JSON.stringify(e.shape.title));
});
I can't remember what is available on the e.shape, but i guess you should be able to find an id, or something else to identify your polygon.
I need to automate tapping on a specific bar in a bar chart that's stored inside of a canvas in a Safari browser on iOS. There's no useful information in the html to get this information unfortunately so I need to rely on hard coded coordinates in order to tap where I need to. On Android I can easily do this by turning on Pointer location in the developer settings - I can't seem to find the equivalent on iOS.
I found some javascript code snippets on the net that I could inject into the web inspector on safari to give me coordinates based on user touch but it seems like the coordinates I get there are relative to the web screen, I need absolute coordinates of the entire screen (if resolution is 1920x1080 I need to select which pixel to tap on).
$( document ).click(
function( event ){
// Client variables.
console.log(
"clientX/Y: " +
event.clientX + ", " +
event.clientY
);
// Page variables. NOTE: These are the ones
// that are officially supported by the
// jQuery Event object.
console.log(
"pageX/Y: " +
event.pageX + ", " +
event.pageY
);
// Hrule.
console.log( "......" );
}
);
I didn't find a way to do this using code but I found out that you can easily get this information from taking a picture on your phone and then opening the file up in an image editing program. In my case I used Seashore.
I have a table which displays results like the image posted below. Now I need to do some actions on each row by selecting it. There are two options I can think of,
1) We can provide a radio button for each row & a drop down on the right side to perform an action. But here i need to generate this code dynamically from a javascript file like below
function getMessage(result){
for (var j = 0; j < result.invocationResult.resultSet.length; j++) {
var tmp = "<tr>";
var resSet = result.invocationResult.resultSet[j];
for(res in resSet){
tmp += "<td>" + resSet[res] + "</td>";
}
$("#mytable > tbody").append(tmp+"</tr>");
$('#AppBody').hide();
$('#AuthBody').hide();
$('#ResTable').show();
}
}
2) Provide a link to a particular item in the row like Dispute Number & when clicked it should take me to another page where I can perform those action with a drop down. But here the links should be applied dynamically to the items in the rows. As per my knowledge we should not navigate using href as i am using worklight.
Please help me with approach and also examples.
Thanks.
So I'm not sure what is the issue you are facing with option 1...
As for option 2,
There is no problem navigating to another "page" using Worklight and jQuery Mobile, as long as you're doing it responsibly (definitely not use href). That is, not lose the Worklight context, at which point stuff will stop working.
The idea is this:
In the app's index.html you (will/should) have a <div data-role="page"> and in the case of Worklight, you will need to switch its contents with another from some other HTML file.
Here's a simplified Worklight 6.2 sample project: https://github.com/IdanAdar/Multipage-Navigation-Using-jQM
In the HTML:
load page1
In the JavaScript:
function changeToSomePage() {
$(':mobile-pagecontainer').pagecontainer('change','somepage.html');
}
I have Markers setup with gmaps4rails.
Now I want to implement a classic search function.
If I find one object, it should directly show the marker.infowindow
How do I open it directly?
I tried:
function focusSearch() {
handler.map.centerOn({ lat: <%=#searchy.latitude %>, lng: <%=#searchy.longitude %>});
handler.getMap().setZoom(16);
marker = <%=#searchy.id%>
marker.infowindow.open(map, marker.serviceObject);
}
But I guess I am going wrong there...
Anyone can help?
If you have an Idea how to directly use the #search:params, I am happy!
Thanks for helping out!
I've created a plunkr with working code here.
Basically steps are:
associate the marker to the original json data where ids are available
search the marker list for the id you expect
trigger the 'click' google map event on the marker which triggers pan + infowindow
I am using the following code in the fusion tables 'customize info window' to create hyperlinked URL's from a column in my table:
"{URL}"
This works fine in returning the clickable hyperlink in the info box except fusion maps by default tacks on https: instead of http: when the link is clicked. This causes problems when the user clicks the hyperlink and it tries to take them to a secure site when in fact it is not secure. The browsers throw up all sorts of warnings that will scare the pants off a lot of users who don't know what is happening.
Does anybody know how to remedy this and have the default be http and not the current https?
Thanks, Shep
You may want to abandon the "{URL}" approach and display the hyperlink with some simple HTML. This example from Google shows how to modify the info window's HTML in Javascript:
google.maps.event.addListener(layer, 'click', function(e) {
// Change the content of the InfoWindow
e.infoWindowHtml = e.row['Store Name'].value + "<br>";
// If the delivery == yes, add content to the window
if (e.row['delivery'].value == 'yes') {
e.infoWindowHtml += "Delivers!";
}
});
Changing the e.row['Store Name'] to your URL column name (maybe, e.row['URL']) and surrounding by a couple of hyperlink tags <a> should do the trick:
e.infoWindowHtml = "<a href='" + e.row['URL'].value + "'>Click here!</a>";
There are three ways:
Specify a full URL including protocol in your data
Use Link here in a custom info window layout
Completely override the content as in the answer above
I would recommend #1 because you can choose the right protocol for every link. However #2 is probably easier in that you can leave your data the way it is.