How to extract users longitude and latitude in real time using leaflet - mobile

I am using Leaflet in a cross-platform mobile app.
I want the user to see his/her movement on the map in real time.
I also want to hold their longitude and latitude separately as global variables for I need this information to make a calculation later on.
Below is what I have so far:
map.locate({
watchPosition:true,
maxZoom:16
});
function onLocationFound(e)
{
var radius = e.accuracy / 2;
L.circle(e.latlng, radius,
{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 400
}).addTo(map);
}
map.on('locationfound', onLocationFound);
I believe the "watchPosition:true" enables the map to keep on watching the user.
I just could not figure out how to extract the longitude and latitude information .
Thanks in advance

The Leaflet map.locate option is just watch:
If true, starts continuous watching of location changes (instead of detecting it once) using W3C watchPosition method.

function onLocationFound(e)
{
var radius = e.accuracy / 2;
userLat = e.latlng.lat;
userLng = e.latlng.lng;
movingCircle.setLatLng(e.latlng);
movingCircle.redraw();
}
var userLocation = map.locate
({
watch:true,
maxZoom:16,
enableHighAccuracy: true
});
var userLat;
var userLng;
enter code here
var movingCircle = L.circle([0,0], 20,
{color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
draggable: true }).addTo(map);

Related

How to change the stroke color of a polygon onMouseEnter in React Google Map API

I am having an array of polygon coordinates which are being mapped and displayed on the map.
Secondly, I have a mouseenter and mouseout event which takes in the particular lat and lng coordinate of a particular polygon and zooms over them to focus on them.
Now what I want to achieve is that, anytime I mouse over any polygon from the list on the table, I want the strokeColor of that particular polygon to change. My current logic only changes the strokeColor of every polygon, which is not what I want.
My code is explained below:
This is the mouse-enter function
const handleRowHover = (event, props) => {
console.log("event", event);
console.log("props", props);
setCenter({
lat: props?.data?.geoData?.point?.coordinates?.[1],
lng: props?.data?.geoData?.point?.coordinates?.[0],
});
setZoomLevel(18);
setMapColor("red");
};
This is the mapped list of polygons from an API endpoint
{allFarmsPolygons.map((poly) => (
<Polygon paths={poly} options={options} />
))}
This is the react google maps api options
const options = {
fillColor: "rgb(128,128,128, 0.5)",
fillOpacity: 1,
strokeColor: center ? mapColor : "#066344",
strokeOpacity: 10,
strokeWeight: 2,
clickable: true,
draggable: false,
editable: false,
geodesic: false,
zIndex: 2,
};
Please any help or hint would be much appreciated. If additional info is needed, I can provide them.
I have tried putting the strokeColor into state, but it just applies to every polygon on the iteration. I want it to apply to only the particular polygon being mouse entered. I am using material-table to display the names of each polygon by the way.

Highchart extend x-axis and then update y-axis data

I am trying to build chart like expertoption.com and iqoption.com using highchart. I have no experience in the chart. Can anyone tell how to build a chart like expert option live chart?
please check the code below:
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
The issue is that I want the time axis to extend more than the current time.
I am trying to edit this realtime chart.
Below is the reference, I want to build this type of chart: expert option chart
To show more than the current time you can set xAxis.overscroll in Highstock like that:
xAxis: {
overscroll: 10 * 1000 // 10 seconds
}
Demo:
https://jsfiddle.net/BlackLabel/t43qfxh7/1/

How to add image in polygon google map api?

I have written my own google map directive in Angular.
I have drawn polygon using the drawing manager. Then from the coordinates drew by the user, got the coordinates and drew the Polygon.
Now I want to add the image in polygon.
How to add the image in polygon area?
bermudaTriangle = new google.maps.Polygon({
paths: polygonsArray,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
, editable: true
});
Here we need do a trick like following.
Add a polygon
Get the polygon coordinates.
Now draw a icon with the marker in the specified coordinates
Then it will look like an icon inside the polygon
So here, after adds the polygon, I have drawn icon with the help of marker in the center place of the polygon.
var bounds = new google.maps.LatLngBounds();
var i, center;
for (i = 0; i < polygonsCoordinates.length; i++) {
bounds.extend(polygonsCoordinates[i]);
}
center = bounds.getCenter();
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: { lat: center.lat(), lng: center.lng() },
map: map,
icon: image
});

Leaflet with two switchable maps

I have two types of map tiles, and I want to be able to switch between them using layers with a custom html control. Both will have the same tilesize and the other options that I have set. The only difference is that one is located in normal map folder and the other in gridmap folder.
This is the code that I use to display one map:
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.MySimple
}).setView([0, 0], 2);
L.tileLayer('normalmap/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tileSize: 268,
noWrap: true,
tms: false,
continuousWorld: true
}).addTo(map);
I tried to follow the leaflet example: http://leafletjs.com/examples/layers-control.html
But no luck.
Can someone explain to me how to add 2 maps with a custom control?
Keep a reference to both your tile layers and add/remove them as appropiate:
var map = L.map(...);
var tilelayer1 = L.tileLayer('map1/{z}/{x}/{y}.jpg', { ... });
var tilelayer2 = L.tileLayer('map2/{z}/{x}/{y}.jpg', { ... });
tilelayer1.addTo(map);
document.getElementById('switch-layers').addEventHandler('click', function(ev){
if (map.hasLayer(tilelayer1)) {
map.addLayer(tilelayer2);
map.removeLayer(tilelayer1);
} else {
map.addLayer(tilelayer1);
map.removeLayer(tilelayer2);
}
})
Keep in mind that you can create layers and not add them to the map right away.

Draw line on google map in angularjs

I want when map loaded, a straight line between two city drawed e.g. pecan and London.
How I can draw a straight line between two city on Google map with angularjs?
Drawing Simple Polylines, you can save latitude and longitude in arrays like this:
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
Then, use google.maps.Polyline draw them out.
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
For more details, please refer to here.

Resources