Sencha alert when POI is near current location of user - geolocation

Could really do with some help, I'm trying to push an alert on an android phone with the help of sencha when a user is near a certain set point of interest.
In my view I have a map
{
xtype: 'map',
id: 'mapOne',
cls: 'center',
flex: 1,
width: '100%',
mapOptions : {
mapTypeControl : false,
navigationControl : true,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 10,
draggable: true,
keyboardShortcuts: true,
scrollwheel: false,
enableHighAccuracy: true
},
listeners : {
maprender : function(comp, map){
var currentMarker = new google.maps.Marker({
position: new google.maps.LatLng(setlat,setlon),
//title : 'Sencha HQ',
map: map,
icon: image
});
setTimeout( function(){map.panTo (new google.maps.LatLng(markerlat, markerlong));} , 1);
}
}
In my controller I set the following before my map is rendered
var poi = new google.maps.LatLng(markerlat, markerlong);
Then in my controller im initalizing a geolocation object as follows
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
frequency :3000,//every 3 seconds
listeners: {
locationupdate: function(geo) {
var curlat = geo.position.coords.latitude;
var curlong = geo.position.coords.longitude;
console.log('New GEO CURRENT: ' + curlat + ' ' + curlong);
var me = new google.maps.LatLng(curlat, curlong);
if (me == poi){
alert("poi found");
}
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});
I have also set a geomarker to see if I being detected anyway near the poi.
GeoMarker = new GeolocationMarker(mapOne);
It shows my GeoMarker directly on top of the marker with no alert. I tried a few different similar things with no success like the following....
if (GeoMarker == poi){
alert("poi found");
}
I know my process is wrong here in both cases as my position won't be exactly the same as the poi but I can't figure out how to set the proper proximity of the current position to to alert. I'm finding it hard to find any documentation that shows how to successfully implement something similar with respect to alerting at a poi. Any help or links to documentation that might help would be greatly appreciated.
Thanks in advance

I first got successful results through using 'if' statements to check if the difference between the latitude and longitude values of both points were less than a set variable. But I thought there must be a more efficient method of implementing this through some form of radius around the current location.
Finally came across this thread.... Calculate distance between two points in google maps V3 and as it suggested in one of the answers I used the following with success......
google.maps.geometry.spherical.computeDistanceBetween (latLngA, latLngB);
to check if the distance between both points was less than my desired distance. Hope this helps someone in the future.
Any information from anyone to alternative methods for carry out the same would be welcomed though.

Related

Linking shapes to slides using text search in Google Slides script

Trying to link shapes to slides the same way it's done with images.
.
.
Reason for this request is linking images seems much harder in terms of locating the exact one to be linked.
Have realized it might be best to link shapes through match/search text then insert the images after.
Codes attempted though please ignore if completely irrelevent.
function myFunction(){
var searchText = "IMAGE1";
var presentation = SlidesApp.getActivePresentation();
var slide = presentation.getSlides()[4];
// 2. Replace the shape which has the text of "searchText" with the image of "imageUrl".
slide.getShapes().forEach(s => {
if (s.getText().asString().toLocaleUpperCase().includes(searchText.toLocaleUpperCase())) {
s.setLinkSlide('INSERT_SLIDE_LINK');
}
}
)
}
Slides Example
Thank you
I believe your goal is as follows.
You want to link the shape to a slide by searching the text in the shape on Google Slides.
You want to achieve this using Google Apps Script.
setLinkSlide can use Slides Object. I thought that this might be able to be used.
Sample script:
function myFunction() {
const obj = { text1: 3, text2: 3, text3: 4, text4: 5, text5: 4, text6: 3 }; // This is from your showing sample image.
const slides = SlidesApp.getActivePresentation().getSlides();
slides.forEach(s => {
s.getShapes().forEach(shape => {
const t = obj[shape.getText().asString().toLowerCase().trim()];
if (t) {
shape.setLinkSlide(slides[t - 1]);
}
});
});
}
Note:
This sample script is for your provided sample Google Slides. When you change this, please modify obj. Please be careful about this.
Reference:
setLinkSlide(slide)
SUGGESTION
If I've understood your post correctly, these are your goals:
Check the text on each of the shapes in your slides
See if the current text shape matches the current searchText value
If true, link a dedicated slide to the current shape.
Sample Tweaked Script
function sample() {
var presentation = SlidesApp.getActivePresentation();
var slide = presentation.getSlides();
//Define the 'searchText' value & it's dedicated slide to be linked
var find = {
search: [["Text1", slide[1]],
["Text2", slide[2]],
["Text3", slide[3]]]
};
find.search.forEach(d => {
let searchText = d[0];
let linkSlide = d[1];
slide[0].getShapes().forEach(s => {
s.getText().asString().trim().toLowerCase() === searchText.toLowerCase() ? s.setLinkSlide(linkSlide) : null;
});
})
}

Google Maps and ASP .NET MVC - Center the map at a marker

I'm building a page with a Google MAP that has a side bar with dynamically created divs linked to positions of markers in the map.
I'm using ASP.NET MVC with JQuery and Google Maps API v3.
Here is a look of it.
This page is loaded in a splash window and is generated dynamically.
In the background page the user types a state or city in an input field and in my controller action I search for all people that are located in that area and return a JSON.
I get the JSON and populate the map with markers and then I make the list of divs in the side bar.
I'd like to add a function to those divs that when they are clicked the map will center at the marker.
I came up with an idea for this solution which I could not finish.
I added class="clickable" and the attributes "Lat" and "Lng" with the values equal to the ones in the markers they are related to, and I tried to get their click event with JQuery and then set the map center with its Lat and Lng like this:
$(".clickable div").click(function(){
$('map_canvas').panTo($(this).attr('lat'), $(this).attr('lng'));
}
I had 2 problems with this approach.
- First, I didn't know how to get the map with JQuery.
I found 2 ways using like $('map_canvas').gMap but it didn't work. Tried a couple more things that I've found here in Stackoverflow but also didn't work.
Second - The JQuery would not catch the event click from the DIVs.
I tested on Google Chrome console the JQuery code and It worked but then my code would not trigger the click.
I tried something like $(".clickable div").click(function(){ alert("test"); } on Google Chrome and it worked, but in my script it did not.
I also tried to add listeners using addDomListener in my code but couldn't get around that either.
Could anyone please give me a light what would be a good way to do this without having to recreate the map when a div is clicked.
I also don't like the idea of adding Lat and Lng attributes to the divs, I don't know if that would work in any browser or if its good practice. I'm just out of solutions to this.
Here is the code I'm using. (I removed some of it to make it shorter and easier to read)
$(document).ready(function () {
//Google Maps API V3 - Prepares the ajaxForm options.
var options = {
beforeSubmit: showRequestPesquisaAdvogados,
success: showResponsePesquisaAdvogados,
type: 'post',
resetForm: false
};
$('#form-pesquisaAdvogado').ajaxForm(options);
//$(".clickable").click(function () { alert($(this).attr('lat')) });
});
function showRequestPesquisaAdvogados(formData, jqForm, options) {
$("#modal-processing-background").show(); //Shows processing splash window
}
function showResponsePesquisaAdvogados(responseText, statusText, xhr, $form) {
$("#modal-processing-background").hide();
//Hide processing window
loadSplashWindow();
CreateMap(responseText);
CreateSideBar(responseText);
}
}
function CreateMap(json) {
var mapOptions = {
center: new google.maps.LatLng(json[0].Endereco.Lat, json[0].Endereco.Lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map-result"), mapOptions);
for (i = 0; i < json.length; i++) {
var data = json[i]
var myLatlng = new google.maps.LatLng(data.Endereco.Lat, data.Endereco.Lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Endereco.Logradouro
});
(function (marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function (e) {
// Prepare the infoWindows content.
var contentString = //my content;
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
});
//here I tried to add the listener to the div.
google.maps.event.addDomListener($(".clickable")[i], 'click',
function () {
map.panTo(new google.maps.LatLng($(this).attr('lat'),
$(this).attr('lng')));
});
})(marker, data);
}
}
function CreateSideBar(json) {
$(".sideBarConteiner").empty();
for (i = 0; i < json.length; i++) {
var contentString =
"<div class='clickable' lat='" + data.Endereco.Lat +
"' lng='" + data.Endereco.Lng + "' >" +
//...div's content here
"</div>";
$(".sideBarConteiner").append(contentString);
}
}
If you have any suggestions to make the code better or better practices, since I have only 3 months of experience with programming I might be going in the wrong direction without knowing, so please, feel free to change something if you think it'd be a better way.
I know my post is a bit lenghty, I just wanted to make it clear.
Thank you for your support in advance.
Regards,
Cesar.
I've found a way to do this by creating a global variable in javascript and keeping the map information in order to call it again later.
To to this I just added a var "map" right at the top of the .
<script type="text/javascript">
$.ajaxSetup({ cache: false }); //Forces IE to renew the cash for ajax.
var zoom = 8;
var mapOptions, map;
And then call a method to pan to the right point.
I added the properties Lat and Lng to the div and then pass the div in the javascript function and get the attributes from it.
function CreateSideBar(json) {
$(".sideBarConteiner").empty();
for (i = 0; i < json.length; i++) {
var contentString =
"<div class='clickable' data-lat='" + data.Endereco.Lat +
"' data-lng='" + data.Endereco.Lng + "' onclick='MarkerFocus(this)'>" +
//...div's content here
"</div>";
$(".sideBarConteiner").append(contentString);
}
}
And in my function:
function MarkerFocus(obj) {
var myLatlng =
new google.maps.LatLng($(obj).attr('data-lat'), $(obj).attr('data-lng'));
map.panTo(myLatlng);
}
It worked for me. I hope it helps you too.
Thanks to all for the help and support.
Cesar

Loading Fusion Tables InfoWindow data in a div outside map

I hope someone can help with what is probably a fairly simple query. I have seen a question on here about trying to do this without a mouseclick, but I want to add an event listener to the markers on the Fusion Table map that will load the infoWindow content in a separate div below the map. So far I have suppressed the infoWindow, but I'm a bit lost on the next step of adding the click, retrieving the data relevant to that marker and loading into the div.
The marker display is limited to markers within a set radius of the user's location, in order to reduce load time.
I'm assuming I need to start with something like this:
google.maps.event.addListener(layer, 'click', function() {
I'd be grateful for any clues.
Here's the relevant bit of my code so far:
var tableid = '[ID]';
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: tableid,
where: 'ST_INTERSECTS(Location, CIRCLE(LATLNG'+marker.position+', 2000))'
},
options: {
suppressInfoWindows: true
}
});
var circle = new google.maps.Circle({
map: map,
radius: 2000,
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false
});
circle.bindTo('center', marker, 'position');
layer.setMap(map);
});
EDIT:
For everyone's amusement, this is what I've tried so far:
google.maps.event.addListener(layer, "click", function () {
$('#infoWindowDiv').append('new google.maps.infoWindowHtml');
});
It probably comes as a surprise ot no-one that it doesn't work. But hey, at least I'm trying! Thanks
EDIT 2:
I'm delighted to say I have found a solution that works - which I post here for anyone else who might have the same problem/goal:
google.maps.event.addListener(layer, "click", function (e) {
document.getElementById("infoWindowDiv").innerHTML = e.infoWindowHtml;
});
I'm delighted to say I have found a solution that works - which I post here for anyone else who might have the same problem/goal:
google.maps.event.addListener(layer, "click", function (e) {
document.getElementById("infoWindowDiv").innerHTML = e.infoWindowHtml;
});

gmap3 init action doesn't display map properly in hid div

I think I really should be posting new question instead of responding to a closed post.
Here I have two tabs for 2 maps. One is hiden. They both start blank and identical so I use gmap3 selector to initialize both maps in one shot. clicking on the tabs would bring up corresponding map without reinitializing. Thanks to Philar and MattBall, using resize fixed one display problem. However, the map that is initially hidden is off center and at a different zoom level. No clue why. Anyone have any idea? Here is the code.
function initmap() {
// setup map and basic overlay
$('.gmap').gmap3(
{ action: 'init',
options: {
zoom: DefaultZoom,
minZoom: DefaultMinZoom,
center: mapcenter,
mapTypeId: google.maps.MapTypeId.TERRAIN,
scrollwheel: false,
rotateControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
style: "SMALL"
},
panControl: false,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
style: "SMALL"
},
streetViewControl: false,
heading: 90
}
},
{ action: 'addGroundOverlay',
url: '../maps/assets/sectors_color.png',
bounds: [
[49.313821, -123.022082],
[49.199900, -123.264825]
],
tag: 'SectorMapOverlay'
}
);
map1 = $(mapID1).gmap3('get');
map2 = $(mapID2).gmap3('get');
$("#switchmap").click(function () {google.maps.event.trigger(map1, 'resize')});
$("#switchmap2").click(function () {google.maps.event.trigger(map2, 'resize')});
}
Or you can do it manually:
map = $("#foo-map").gmap3('get');
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
map.panToBounds(map.getBounds());

jQuery UI SelectMenu Dropdown - opens UP instead of DOWN

I'm using jQuery UI Select Menu and occasionally have some issues.
This is located at the top left of my users' pages. Using the "dropdown/address" type, sometimes (seemingly random), the dropdown opens UP instead of DOWN, and you can't select any options in it except the first one because it's all "above" the screen.
Anyone know of a setting/option in there to force it to open down? Thanks!
update.... 11/23/11 1:11pm est
Here is some code of the call:
$(function(){
$('select#selectionA').selectmenu({
style:'dropdown',
menuWidth: 220,
positionOptions: {
collision: 'none'
},
format: addressFormatting
});
});
The plugin uses the Position utility of the jQuery UI library. If you look at the default options in the source of the plugin, there is a positionOptions property that is used in the function _refreshPosition():
options: {
transferClasses: true,
typeAhead: 1000,
style: 'dropdown',
positionOptions: {
my: "left top",
at: "left bottom",
offset: null
},
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null,
bgImage: function() {},
wrapperElement: "<div />"
}
_refreshPosition: function() {
var o = this.options;
// if its a pop-up we need to calculate the position of the selected li
if ( o.style == "popup" && !o.positionOptions.offset ) {
var selected = this._selectedOptionLi();
var _offset = "0 " + ( this.list.offset().top - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2);
}
// update zIndex if jQuery UI is able to process
this.listWrap
.zIndex( this.element.zIndex() + 1 )
.position({
// set options for position plugin
of: o.positionOptions.of || this.newelement,
my: o.positionOptions.my,
at: o.positionOptions.at,
offset: o.positionOptions.offset || _offset,
collision: o.positionOptions.collision || 'flip'
});
}
You can see it uses a default value 'flip' if none is provided for the collision option of the position utility which is. According to jQuery UI documentation:
flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.
fit: so the element keeps in the desired direction, but is re-positioned so it fits.
none: not do collision detection.
So i guess you could pass an option when initializing the plugin to define none for the collision option:
$('select').selectmenu({
positionOptions: {
collision: 'none'
}
});
Have not tested yet, this is just by looking at the code.
Edit following comment
I've noticed that the version of the javascript available on github and the one used on the plugin website are not the same. I don't know which one you are using but the one used on the website does not have a positionOptions option actually, so it has no effect to specify it when calling selectmenu().
It seems it's not possible to link directly to the javascript on the site so here's some code to illustrate:
defaults: {
transferClasses: true,
style: 'popup',
width: null,
menuWidth: null,
handleWidth: 26,
maxHeight: null,
icons: null,
format: null
}
_refreshPosition: function(){
//set left value
this.list.css('left', this.newelement.offset().left);
//set top value
var menuTop = this.newelement.offset().top;
var scrolledAmt = this.list[0].scrollTop;
this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
scrolledAmt -= $(this).outerHeight();
});
if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){
menuTop+=scrolledAmt;
this.list.css('top', menuTop);
}
else {
menuTop += this.newelement.height();
this.list.css('top', menuTop);
}
}
I was able to make it work as I first described with the version from github. In my opinion it is a more recent/complete version. Besides it was updated a few days ago.
I have created a small test page with two selects. I've changed for both the position for the dropdown to show above.
The first one does not specify the collision option, thus 'flip' is used and the dropdown displays below because there is not enough space above.
The second has 'none' specified and the dropdown shows above even if there is not enough space.
I've put the small test project on my dropbox.
I'm the maintainer of the Selectmenu plugin. There are currently three versions, please see the wiki for more information: https://github.com/fnagel/jquery-ui/wiki/Selectmenu
I assume you're using my fork. The collision problem could be related to this fix https://github.com/fnagel/jquery-ui/pull/255, please try the latest version.
To force a scrollbar use option maxHeight.

Resources