geolocation + distance measurement - extjs

launch: function() {
// The following is accomplished with the Google Map API
var position = new google.maps.LatLng(12.9833, 77.5833), //Sencha HQ
infowindow = new google.maps.InfoWindow({
content: 'bengaluru'
}),
//Tracking Marker Image
image = new google.maps.MarkerImage(
'resources/images/point.png',
new google.maps.Size(32, 31),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
),
shadow = new google.maps.MarkerImage(
'resources/images/shadow.png',
new google.maps.Size(64, 52),
new google.maps.Point(0, 0),
new google.maps.Point(-5, 42)
),
trackingButton = Ext.create('Ext.Button', {
iconMask: true,
iconCls: 'locate'
}),
trafficButton = Ext.create('Ext.Button', {
iconMask: true,
pressed: true,
iconCls: 'maps'
}),
toolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{
xtype:'button',
id:'calculate',
text:'calculate',
handler:function(){
alert('hello');
}
}
]
});
var mapdemo = Ext.create('Ext.Map', {
mapOptions : {
center : new google.maps.LatLng(37.381592, 122.135672), //nearby San Fran
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
plugins : [
new Ext.plugin.google.Tracker({
trackSuspended: true, //suspend tracking initially
allowHighAccuracy: false,
marker: new google.maps.Marker({
position: position,
title: 'My Current Location',
shadow: shadow,
icon: image
})
}),
new Ext.plugin.google.Traffic()
],
listeners: {
maprender: function(comp, map) {
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout(function() {
map.panTo(position);
}, 1000);
}
}
});
Any ideas how can i measure distance between two destinations whose latitude and longitude are know........
this code is taken from the example provided by the sencha touch2 with little modification.
Its for sencha touch 2

try google.maps.geometry.spherical.computeDistanceBetween(from:LatLng, to:LatLng, radius?:number)
radius is the earth's radius = 6371000 metres (average)

Related

How to show weekends in calendar?

I have installed fmstarting point solution and it has a calendar done by java.
How can I change default weekends from sat sun to other days?
The code is down below.
BR
Dino
// This is where you can change the settings for your calendar.
var calendarEl = document.getElementById('calendar');
var calendar;
var initCalendar = function() {
calendar = new FullCalendar.Calendar(calendarEl, {
//Custom Button to add task
customButtons: {
FMNewTask: {
text: '+ Add Appointmen',
click:
function() {
var focus = calendar.getDate().toISOString();
doThis = NewTask(focus, '(0882)NewTask');
}
}
},
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
height: 'parent',
header: {
left: 'FMAdd,FMNewTask',
center: 'title',
right: 'prev,next today' //More options: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
defaultView: '**VIEW**',
defaultDate: '**DefaultDate**',
navLinks: true, //Can click day/week names to navigate views.
editable: true,
eventLimit: true, //Allow "more" link when too many events
locale: 'en', //To change the locale. Examples: en-gb, fr, zh-tw
slotDuration: '00:30:00',
slotLabelInterval: '00:60:00',
minTime: '10:00:00',
maxTime: '19:00:00',
scrollTime: '06:00:00',
nowIndicator:true,
weekends:true,
businessHours: false,
businessHours: { daysOfWeek: [6,0,1,2,3,], // enable all days
startTime: '10:00',
endTime: '19:00',
},

ExtJS add tooltip in a element inside iframe

I'm try to use tooltip in a element inside a iframe(generated by htmleditor component).
This is i'm trying:
Ext.tip.QuickTipManager.init();
Ext.create('Ext.form.HtmlEditor', {
width: 750,
height: 250,
renderTo: Ext.getBody(),
listeners: {
afterrender: function () {
this.getToolbar().add([{
xtype: "combobox",
flex: 1,
displayField: "name",
valueField: "value",
store: {
data: [{
name: "#NAME# (User's name)",
value: "#NAME#"
}]
}
}, {
xtype: "button",
text: "Add",
handler: function () {
var value = this.prev().getValue();
var htmlEditor = this.up("htmleditor");
if (value) {
var id = Ext.id();
value = "<span id=\"" + id + "\" style=\"cursor:pointer;\">" + value + "</span>";
htmlEditor.insertAtCursor(value);
var doc = htmlEditor.getDoc();
var elSpan = doc.getElementById(id);
var tTip = Ext.create("Ext.tip.ToolTip", {
html: "User's name tooltip.",
shadow: false,
scope: doc
});
elSpan.addEventListener("mouseover", function () {
tTip.showAt(elSpan.offsetLeft, elSpan.offsetTop)
});
elSpan.addEventListener("mouseleave", function () {
tTip.hide();
});
}
}
}])
}
}
});
But, when the component is shown, it appear in wrong position. See on the fiddle.
Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vj4
I found a solution!
elSpan.addEventListener("mouseover", function (e) {
var x = e.pageX;
var y = e.pageY;
var region = htmlEditor.getRegion();
x += region.x;
y += region.y;
tTip.showAt([x, y]);
});

Angular Leaflet map refresh

I have a leaflet map that shows a company stores arround the country and a form that i can use to filter the stores by state, but when i change de state, i re-call the map but it doesn't refresh the markers. How can i do this? I'm using Angular Leaflet. The function that return the positions works, but the markers doesn't change. Below there is my code:
$http.get(url_sistema + 'mapaFiltro/'+estado).then(function(response) {
var local_icons = {
default_icon: {
iconUrl: url_sistema+'web_files/img/marker.png',
iconSize: [35,50],
iconAnchor: [18, 50]
}
};
angular.extend($scope, {
icons: local_icons,
center: {
lat: -20.0990815,
lng: -52.6113324,
zoom: 4
},
markers: [],
defaults: {
tileLayer: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
zoomControlPosition: 'topright',
tileLayerOptions: {
opacity: 0.9,
detectRetina: true,
reuseTiles: true,
attribution: '© OpenStreetMap | &copy AngelLira',
},
scrollWheelZoom: false,
minZoom: 2,
worldCopyJump: true
}
});
for (var i = 0; i < response.data.dados_mapa.length; i++) {
$scope.markers.push(
{
'lat': response.data.dados_mapa[i].latitude,
'lng': response.data.dados_mapa[i].longitude,
'focus': false,
'message':
'<div class="logo_mapa">'+
'<img src="web_files/img/logo_mapa.png">'+
'</div>'+
'<div class="texto_mapa">'+
'<h1>'+response.data.dados_mapa[i].titulo+'</h1>'+
'<h2>'+response.data.dados_mapa[i].telefones+'</h2>'+
'<h2>'+response.data.dados_mapa[i].email+'</h2>'+
'<p>'+response.data.dados_mapa[i].endereco+'</p>'+
'</div>'
,
'draggable': false,
'icon': local_icons.default_icon
}
);
}
}, function(error) {
});
The response of my request are the new markers, that should me showing in the map.
Add this partial code after your for loop of push markers:
leafletData.getMap().then(function(map) {
setTimeout(function() {
map.invalidateSize();
map._resetView(map.getCenter(), map.getZoom(), true);
}, 200);
});
In additionally, you need inject leafletData to controller.

how to add a rectangle on an ui-leaflet map in angular1 programmatically

in HTML my map is defnied as this
<leaflet bounds="map.spatial_bounds_card" layers="map.layers_card" height="200px" ></leaflet>
in the controller, I expand the angular scope, to define bounds and layers. I dont know how to access the leaflet map, in order to add OverlayItems to it. Currently I have created a rectangle, but its not shown on the map.
function Ctrl($scope, leafletBoundsHelpers, leafletDrawEvents) {
var drawnItems2 = new L.FeatureGroup();
angular.extend($scope, {
map: {
spatial_bounds_card: {},
layers_card: {
baselayers: {
osm: {
name: 'OpenStreetMap',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
type: 'xyz'
}
}
},
drawOptions: {
position: "bottomright",
draw: {
polyline: false,
polygon: false,
circle: false,
rectangle: {
metric: false,
showArea: true,
shapeOptions: {
color: 'blue'
}
},
marker: false
},
edit: {
featureGroup: drawnItems2,
remove: false
}
},
defaults: {
scrollWheelZoom: false
}
}
});
var bb = L.latLngBounds($scope.filters.spatial.params.southwest, $scope.filters.spatial.params.northeast);
console.log(bb);
var selectedBoundingBox = new L.rectangle(bb,
{
color: 'blue'
});
selectedBoundingBox.addTo($scope.map); // <-- error here
}
I do get this error when running the code:
angular.js:13920 TypeError: t.addLayer is not a function
at e.addTo (leaflet.js:7)
at new FilterSpatialCardCtrl (filter_spatial_card.controller.js:50)
at Object.invoke (angular.js:4718)
at $controllerInit (angular.js:10354)
at nodeLinkFn (angular.js:9263)
at angular.js:9673
at processQueue (angular.js:16383)
at angular.js:16399
at Scope.$eval (angular.js:17682)
at Scope.$digest (angular.js:17495)
In your code there is over head, extra parameters too. Make it as simple as possible.
like:
angular.extend($scope, {
center: {
lat: 54.559322,
lng: -5.767822,
zoom: 14
},
defaults: {
maxZoom: 25,
minZoom: 1,
path: {
weight: 10,
color: '#800000',
opacity: 1
}
}
});
var markersFeatureGroup = new L.FeatureGroup();
leafletData.getMap()
.then(function(map) {
var latlang = L.latLng(50.5, 30.5);
var circleobj = L.rectangle([[54.559322, -5.767822], [54.560900, -5.760000]],{
color: 'blue'
}).bindLabel("Hello World", { direction: 'bottom', clickable: "interactive" });//use left, left, auto,
markersFeatureGroup.addLayer(circleobj);
map.addLayer(markersFeatureGroup);
});
Refer Jsfiddle for more information : http://jsfiddle.net/nidhiarya1245/5hukx0g5/

Resize Google Map Marker

I want to add customized google map pin on my google map API. My image is big 135px(w) x 185px (h), i want to make it smaller , eg in 26px(w) x 35px(h) to looks fit in googlemap. Is that anyway can make the pin looks smaller besides resize the image using tools (ps/ai)?
How to add scaledSize?
var map = {
control: {},
center: {
latitude: xxx,
longitude: yyy
},
zoom: 17,
options: {
mapTypeControl: mapTypeControl,
mapTypeControlOptions: {
style: 1, // GoogleMapApi.maps.MapTypeControlStyle.HORIZONTAL_BAR
position: 1, // GoogleMapApi.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
zoomControl: zoomControl,
zoomControlOptions: {
style: 0, // google.maps.ZoomControlStyle.DEFAULT,
position: 5, // google.maps.ControlPosition.LEFT_CENTER
},
scrollwheel: true,
panControl: false,
scaleControl: false,
draggable: true,
maxZoom: 20,
minZoom: 15,
},
trigger: false,
bounds: {},
dragging: false,
events: {
dragend: function() {
},
click: function(map, eventName, args) {
},
idle: function() {
}
},
rebuildWindows: false,
templateUrl: 'templates/infowindow.html'
};
Thank you.
If the image you want to use as a marker is too big, the first (but obvious) advice should be to change the size of your image, to fit your needs.
However, you can do it programatically :
var customPin = new google.maps.MarkerImage("../path-of-you-pin/myPin.png"),
new google.maps.Size(21, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
// or use the size you want, this are the default sizes
And use it like this :
var marker = new google.maps.Marker({
// ...
icon: customPin,
// ...
});

Resources