How to get the map zoom action on Ti.map - google-maps

There are articles about ti.map.
Map
View
I found some entry about zoom.
However I couldn't figure out how to get the map zoom level,
when user pinch the maps on devices.
I tried like this but in vain.
var mapView = Map.createView({
mapType:Map.NORMAL_TYPE,
userLocation:true,
region: {latitude:35.699058, longitude:139.326099,
latitudeDelta:0.01, longitudeDelta:0.01},
animate:false,regionFit:true,
userLocation:true,
});
mapView.addEventListener('pinch', function(evt) {
Ti.API.info("pinch " + evt);
//This is not fired.
});
mapView.addEventListener('click', function(evt) {
Ti.API.info("Clicked " + evt.clicksource + " on " + evt.latitude + "," + evt.longitude);
// This is fired.
});
Thanks to #Fokke Zandbergen's help
I solve the problem.
mapView.addEventListener('regionChanged',function(evt){
Ti.API.info('regionchanged delta lati,longi ' + evt.latitudeDelta + "," + evt.longitudeDelta);
if (evt.latitudeDelta > 0.020){
// do something.
}
});

I think you can achieve your goal by listening to the regionchanged event of the view. You'll get the region displayed, but there's zoom level. Depending on what you need it for you'll have to use the region to calculate that yourself.

Related

ChromiumWebBrowser - how to set height to HTML doc height

I have a chromiumWebBrowser hosted in my application.
user can navigate between html pages (with binging to address).
I need xaml scroller (not css), so I have a scrollViewer and inside the Chromium browser.
Every time the Address changes, chromium height needs to be full html doc height, to get the scrolling right.
I have tried setting it similar to answer in this Q:
cefSharp ChromiumWebBrowser size to page content
which works well first time, but when navigating, it only grows - if first page is 600, and next is 200 - it returns 600 second time too.
XAML:
<ScrollViewer x:Name="scroller" >
<wpf:ChromiumWebBrowser x:Name="chrome"
Address="{Binding CurrentUrl}" />
</ScrollViewer>
C#:
chrome.LoadingStateChanged += async (s, e) =>
{
if (!e.IsLoading) // browser.CanExecuteJavascriptInMainFrame == TRUE !
{
JavascriptResponse response =
await chrome.EvaluateScriptAsync(
// GET HEIGHT OF CONTENT
$"(function() " +
"{ var _docHeight = " +
" document.documentElement.scrollHeight; " +
" " +
" return _docHeight; " +
"} " +
")();");
int docHeight = (int)response.Result;
chrome.Dispatcher.Invoke(() => { chrome.Height = docHeight; });
}
};

Leaflet Ajax JSON file Add to Map as Overlay

I have a JSON file that is not formatted in any way to meet geoJson standards. I am trying to load the data I parse from it on the map. I am able to create markers from the data and add them:
$.getJSON( tsdata, function ( data ) {
//loop through all the data
$.each( data.response.docs, function ( key, val ) {
//console.log(val);
if ( typeof val.mc_geo !== 'undefined' ) {
//lat lng isn't consitently 1, so getting the first only.
var geo = val.mc_geo;
var gLat = geo.toString().split( ',' )[ 0 ];
var gLng = geo.toString().split( ',' )[ 1 ];
//add markers to map
var marker = L.marker( [ gLat, gLng ],{icon: tsMarker,} ).bindPopup( "<p><strong><a href='" + val.filename + "'>" + val.title + "</a></strong><hr/><br/><strong>Abstract:</strong> " + truncateString( val.abstract, 350 ) + "</p><p><strong>Author(s): </strong>" + val.author + "<p><strong>Station:</strong> " + val.station_primary_full + "</p>" );
markerArray.push( marker );
}
} );
layer_group = L.layerGroup(markerArray);
map.addLayer(layer_group);
});
This adds the marker layers (layer_group) to the map no problem. However, if I try and add them to the:
L.control.layers(baseMaps, overlayMaps).addTo(map);
I get an error. Basically, L.control.layers is not seeing my layer_group. I can define it before the getJSON call, but L.control.layers will not show the layer full of data though it is "checked" in the layers panel... there are no markers displayed.
How do I dynamically create this marker layer group and have control over it showing (on / off) in my L.control.layers?
It sounds like you add your layer_group to your Layers Control while it is empty ($.getJSON works asynchronously), then re-assign it, so there is no longer a reference between your Layers Control and the markers you have instantiated.
2 easy workarounds:
Add your layer_group to your Layers Control after it is fully built: myLayersControl.addOverlay(layer_group, "Markers")
Use a placeholder Layer Group in your Layers Control, then add your markers into it (myLayerGroup.addLayer(marker)) or simply add your layer_group at the end to it (myLayerGroup.addLayer(layer_group))

jquery button works fine first time but second time not working

I created a very simple index.html file and inside I included some jquery script. You can see below:
<script>
$(document).ready(function(){
var $tweets = $('.tweets');
var current_position = -1;
function getTweets(){
var index = streams.home.length - 1;
var cp = index;
while(index >= current_position + 1){
var tweet = streams.home[index];
$tweets.append('<div class="twe"><span class="name" style="color:blue">' + '#' + tweet.user + ': ' + ' </span><span class="message">' + tweet.message + tweet.created_at + '</span></div>');
index--;
}
current_position = cp;
}
getTweets();
$('button').click(function(){
getTweets();
});
$('.name').click(function(){
$tweets.prepend('<div>' + 'objname' + streams.home.length + '</div>');
});
});
</script>
there is one button used for updates all the tweets and dynamically put them in the section with class="tweets" part. And this button works fine no matter how many times I press it.
Then I add click event to all those with class name 'name' and once I click it , it will add 'objname' + streams.home.length to the front of my
section class="tweets" part. The problem is first time , I CLICK the $('.name') it works fine , but later after I added more items through $('button') click event. it seems the new created $('.name') items is not clickable which means they don't generate 'objname' + streams.home.length to the front of my
section with class="tweets" part. I am really confused here and don't know why.
try following
$("body").on("click",".name",function(){
$tweets.prepend('<div>' + 'objname' + streams.home.length + '</div>');
});
As your element gets added runtime on the page, it needed to be taken care separately with help of "on" which bind events automatically when event gets created.
check reference

Why does Google Maps containsLocation never find a point inside my polygon?

I'm having issues with the following code in that my points never find a point within a polygon using google.maps.geometry.poly.containsLocation. You can see the full code and that there are indeed points in the polygon here http://htinteractive.com/crime_map_fairview.html However in the console you will see that none of the points were found to be in the polygon per the containsLocation function.
I feel like maybe I'm not passing in one the values correctly to the containsLocation function, but so far what I've found in the documentation this seems correct.
var myLatlng = new google.maps.LatLng(lat,lon);
fairview = [
new google.maps.LatLng(39.161536, -86.535107),
new google.maps.LatLng(39.17885, -86.534825),
new google.maps.LatLng(39.179068, -86.547164),
new google.maps.LatLng(39.180989, -86.551803),
new google.maps.LatLng(39.181546, -86.556001),
new google.maps.LatLng(39.170956, -86.569335),
new google.maps.LatLng(39.158487, -86.570365),
new google.maps.LatLng(39.161482, -86.566674),
new google.maps.LatLng(39.157156, -86.559807),
new google.maps.LatLng(39.160084, -86.553961),
new google.maps.LatLng(39.160317, -86.550700),
new google.maps.LatLng(39.160733, -86.548464),
new google.maps.LatLng(39.161482, -86.546172),
new google.maps.LatLng(39.161536, -86.535107)
];
var pv = new google.maps.Polygon(fairview);
if (google.maps.geometry.poly.containsLocation(myLatlng, pv)) {
console.log("Location Found in Polygon!!!!! " + myLatlng.lat() + " " + myLatlng.lng());
} else {
console.log(":( " + myLatlng.lat() + " " + myLatlng.lng());
}
As Dr. Molle pointed out I was instantiating my polygon incorrectly.
var pv = new google.maps.Polygon({path:fairview});

iTunes search API undefined first result

Hi I'm struggling for a long time with the itunes api album listing.
My issue is the thumbnail and album title in the first <li></li> always comes back as undefined.
The code is based on itunes artist search which works as intended, but my version for album listing always gives this glitch.
$(document).ready(function(){
var searchTerm = '909253';
$.getJSON( "http://itunes.apple.com/lookup?id=" + searchTerm + '&limit=30' + '&entity=album' + '&callback=?', function(data) {
$.each(data.results, function() {
$('<li></li>')
.hide()
.append('<img src="' + this.artworkUrl60 + '" />' )
.append('<span><a href="http://itunes.apple.com/search?term='
+ this.artistName + '">' + 'Artist: ' + this.artistName
+ '</a> ' + '<br />Album Title: ' + this.collectionName + '</span>')
.appendTo('#results')
.fadeIn();
});
$("#results").listview("refresh");
});
});
​
See http://jsfiddle.net/tris_wood/u2sYe/2/
I've seen similar posts with this issue wth the itunes api but no solutions that I could find.
Any help would be greatly appreciated.
This is because the first returned element is always the parent element, in this case the artist.
If you request:
http://itunes.apple.com/lookup?id=909253&entity=album
You will get (as you can see in wrapperType):
0) Artist information
1) First album
2) Second album
Unfortunately your code is temporary offline at the moment and I can't check if my intuition is correct.