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.
Related
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.
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);
I'm trying to center the map by given bounding box. On OpenLayers FAQ is even an example of it (with the swissProjection) but it just don't work. Looked around in some forums and just can't figure out how to make it work.
Maybe someone knows.
Here is the code:
var extent = [-9022321.0707,3022167.2243,-8849726.2608,3148441.1951];
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
extent: extent,
units: 'm'
});
ol.proj.addProjection(projection);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: [0,0],
zoom: 0
})
});
Your code is correct but the center is out of range from your extent. There's two way to fix it.
First, set valid view center and level.
e.g.)
view: new ol.View({
projection: projection,
center: [-8936023.66575, 3085304.2097], // guess it's the center of extent
zoom: 8 // whatever you want.
})
Second, use View.fit instead setting extent on Projection.
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
//extent: extent,
units: 'm'
});
...
map.getView().fit(extent);
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
});
Im new on openlayers so i try to make a itinerary using tow point, i can draw a line but not itinerary.
here is my code
var lineFeature = new ol.Feature(
new ol.geom.LineString([ol.proj.transform([4.658166 ,44.199790], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([ 1.425145 , 43.340356 ],'EPSG:4326', 'EPSG:3857')])
);
var style = {
strokeColor: '#0000ff',
strokeOpacity: 0.5,
strokeWidth: 5
};
var vectorlinenew = new ol.layer.Vector({
source: new ol.source.Vector({
features:[ lineFeature ]
}),
name:'linefeature'
});
map.addLayer(vectorlinenew);
I'm not sure I got your question right, but I believe it draws the line just because you passed just two points to ol.geom.LineString whereas it accepts multiple points and would draw the line over all of them. So all you have to do is just pass an array of all your points to ol.geom.LineString and it will draw the itinerary line.