While there exist a variety or recourses already talking about something close to this, I mean this. I want to dynamically trace say a small forest/Building as I go around it live on google maps, I.e., If I stand at the edge of a building in the field with my phone (With my currentlocationenabled: true), I can trace the building from start to end and come back and close it at the starting point. Currently, I can draw any polygon anywhere on the map, but I want a dynamic one: When I go to the edge of a building I call the drawPolygonNow(), then so on and so on. My current sample code, that was guided by this resource:
class _MyMapScreenState extends State<MyMapScreen> {
LatLng latLngPosition = LatLng(userCurrentPosition!.latitude, userCurrentPosition!.longitude);
/* Data: Add point markers, lines, polygons */
Set<Marker> _markers = {};
Set<Polygon> _polygons = HashSet<Polygon>();
List<LatLng> polygonLatLngs1 = <LatLng>[];
// Draw Polygon
void _drawPolygon(LatLng latLngPosition) {
final String polygonIdVal = 'Area ID_$_polygonIdCounter';
_polygons.add(Polygon(
polygonId: PolygonId("1"),
points: polygonLatLngs1,
strokeWidth: 2,
strokeColor: strokeColor,
fillColor: fillColor
));
body: Stack(
children[
GoogleMp(
polygons: _polygons,
onCameraMove: _onCameraMove,
onTap: (latLngPosition) {
if (_isPolygon) {
setState(() {
polygonLatLngs1.add(latLngPosition);
_drawPolygon(latLngPosition);
});
}
},
...
Related
I am trying to have a system where a user can go from a starting point to the finish with several stops (Waypoints) on the way. The polyline that gets returned (polylineCoordinates) is composed of ~300 LatLong points and I do not know where to cut it in order to color the section differently as an independent polyline. I was thinking to find closest points to my waypoints, and manualy assign them as breaking points, but it seems unelegant and increases the complexity quite a bit.
I am using:
package:flutter_polyline_points/flutter_polyline_points.dart
Illustration of what I want to achieve (top current outcome, bottom desired outcome):
Here is the code responsible for making one polyline which I desire to "cut-up".
List<PolylineWayPoint> waypoints = [];
for (var i = 0; i < active.length; i++) {
waypoints.add(PolylineWayPoint(
location:
"${active[i].coord.latitude},${active[i].coord.longitude}"));
}
PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
googleApiKey,
PointLatLng(start.latitude, start.longitude),
PointLatLng(end.latitude, end.longitude),
travelMode: enums.TravelMode.walking,
wayPoints: waypoints,
optimizeWaypoints: true
);
if (result.points.isNotEmpty) {
List<LatLng> polylineCoordinates = [];
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
routes.add(Polyline(
polylineId: PolylineId("Poly1"),
color: Colors.red,
points: polylineCoordinates
));
}
I am trying to customize my apple map on web (Mapkit JS). I know you can set the maps colorScheme (Light or Dark). But is there a better way to customize it with more colors?
Yes, you can use a PolygonOverlay and set a custom color to it. Your map will then appear in your desired color.
// init mapkit
mapkit.init({...});
// init map
const map = new mapkit.Map("mapId", {
colorScheme: mapkit.Map.ColorSchemes.Light, // mapkit.Map.ColorSchemes.Dark
});
// polygon points
const points = [
[89.9,90],
[89.9,0.1],
[89.9,-90],
[89.9,-179.999],
[0,-179.999],
[-89.9,-179.999],
[-89.9,-90],
[-89.9,0.1],
[-89.9,90],
[-89.9,179.999],
[0,179.999],
[89.9,179.999]
];
// Map the coordinate points to Coordinates:
const coordinates = points.map((point) => new mapkit.Coordinate(point[0], point[1]));
const polygon = new mapkit.PolygonOverlay(coordinates, {
style: new mapkit.Style({
lineWidth: 0,
strokeColor: "transparent", // you can define HEX values as you wish
fillColor: "#F00F00", // red overlay
}),
selected: true
})
// add overlay over the whole map
map.addOverlay(polygon);
I have use google_directions_api: ^0.5.0 this flutter library for implement google Direction api.
await directinosService.route(request,
(DirectionsResult response, DirectionsStatus status) {
if (status == DirectionsStatus.ok) {
for(GeoCoord value in response.routes.asMap().values.single.overviewPath){
_polylineCoordinates.add(LatLng(value.latitude,value.longitude));
}
} else {
print('Im not in ok state');
// do something with error response
}
});
Polyline polyline = Polyline(
width: 4,
visible: true,
polylineId: PolylineId(_latitude.toString()),
color: (randomColour.toList()..shuffle()).first,
points: _polylineCoordinates
);
_polylines.add(polyline);
i get tha polyline but its not clear when zoom some points are away from road
when zoom out Zoom in
I need implement Google map like this with flutter
I found Flutter lib but its not clear to me
if someone can help me how i exactly get waypoints to recorrect polyline
In the following code in Ionic Project, sometimes map doesn't fit correctly an center
code:
initMap() {
this.mapInitialised = true;
this.bounds = new google.maps.LatLngBounds();
this.Geolocation.getCurrentPosition().then((position) => {
this.location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: this.location,
zoom: 15,
draggable: true,
backgroundColor: 'white',
fullscreenControl: false,
mapTypeControl: false,
zoomControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.map.fitBounds(this.bounds); //# auto - zoom
this.map.panToBounds(this.bounds);
console.log(this.location);
this.PostMarker(this.Postlatlng);
this.CurrentMarker(this.location);
});
}
CurrentMarker(location){
console.log(location.lat, location.lng);
let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: location,
icon: image
});
this.bounds.extend(new google.maps.LatLng(location.lat(), location.lng()));
}
PostMarker(location) {
console.log(location.lat,location.lng);
let image = 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: location,
icon: image
});
this.bounds.extend(new google.maps.LatLng(location.lat, location.lng));
}
output:
after zooming out:
update
As you can see in the output map of the screen is pacific ocean while test data point is a place in Tibet and the second point is my current location in Iran. instead of fitting this two point in screen it shows wrong location/area.
This problem mostly happens when two point is so far from each other. In near location Isaw this problem one or two times.
Set the minZoom map option. Otherwise, the screenshot you have posted it how the API (correctly) behaves when you zoom out to 0.
For example:
new google.maps.Map(element,{minZoom:3});
I am using leaflet.js to visualize the map. I updating the markers on the map using the following code
map.dragging.enable();
data.forEach(function(d)
{
lat=d.lat;
lon=d.lon;
road=d.road;
detector=d.detector;
markers.push((new L.circle([lat, lon], 200, {
color: 'yellow',
fillColor: '#f0f',
fillOpacity: 0.5
})).bindPopup("Road Name:"+road+"<br>Detector ID: "+detector))
});
for (var i = 0; i < markers.length; i++) {
map.addLayer(markers[i]);
}
map.setView([lat, lon],13);
map.dragging.enable();
I am enabling the dragging of the map both before and after the loop. But the map is still not draggable after the update operation. But initially when i have not updated the map markers its draggable. But when the marker locations are updated it becomes non draggable. How can i solve this problem?
Don't you have to show us where you are declaring lat, lon? Is it outside of scope? You could be calling a setView with invalid parameters which might cause Leaflet to throw an error.