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
});
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);
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.
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.
I've used NVD3 to make a line chart, where the X axis is Age (30-75), and the Y axis is risk of a heart attack (0-100%), drawing a line showing the risk over the complete age-span of 30-75:
In the HTML:
<nvd3-line-chart
data="riskchartData"
id="riskPrediction"
height="300"
margin="{left:90,top:20,bottom:70,right:20}"
yaxisLabel="My CHD Risk"
xaxisLabel="Age"
showXAxis="true"
showYAxis="true"
tooltips="true"
interactive="true"
showLegend="true"
showControls="true"
color="colorFunction()">
<svg></svg>
</nvd3-line-chart >
In the JS:
$scope.RiskChartRedraw = function(){
risklines = predemo();
$scope.yMaxFunction();
$scope.riskchartData = [
{
"key": "My current risk",
"area": false,
"values": risklines[0],
"color": "red",
}
];
};
I want to add a circle onto this line, showing the user's current age - say, 50:
In the JS:
$scope.age = 50; // user's current age
$scope.risk = .03; // percentile risk of heart attack at current age
d3.select('#riskPrediction svg')
.append('circle')
//.data(circlerisk)
.attr({
fill: 'red',
stroke: 'red',
cx: $scope.age,
cy: $scope.risk,
r: 7
});
... but this bypasses the translation NVD3 makes of the age and risk data values into d3/SVG graph coordinates.
How does one align the cx and cy coordinates of the circle, to the point on the linegraph that matches a specific age value?
EDIT:
We're inching closer .. adding this at the bottom of the NVD3 section in the HTML above draws a circle that updates with the correct values in realtime:
<svg>
<circle cx="{{agecircle}}" cy="{{riskcircle}}" r="5.656854249492381" style="fill:black;"></circle>
</svg>
... but the values are still not aligned with the line in the chart. Trying to bind this circle to the same values in the dataset is not working:
<circle cx="function(d) { d.x = {{agecircle}}; return x;}" cy="function(d) { d.y = {{riskcircle}}; return y;}" r="8" style="fill:black;"></circle>
Any clues as to what we're missing?
EDIT2:
And closer still ..
Capture XAxis value NVD3 Stacked Area Chart