Flutter: Is there a way to draw partial circles? - google-maps

I want to be able to enter an azimuth range, let's say: 180 to 240, and draw a partial circle for that range. Much like a piece of pie. Is there a way to do this? Perhaps by turning the rest of the circle transparent somehow? Here's how I draw full circles:
Future<void> _makeCircles() async {
GoogleMapController controller = await _controller.future;
TextEditingController _textEditingController = TextEditingController();
double n3 = double.parse(text);
double n1 = double.parse(text2);
double n2 = double.parse(text3);
setState(() {
for (var i = 0; i < "test".length; i++) {
var circleIdVal = UniqueKey();
final CircleId circleId = CircleId(circleIdVal.toString());
final Circle circle = Circle(
circleId: circleId,
center: LatLng(
n1,
n2,
),
radius: n3,
consumeTapEvents: true,
strokeWidth: 5,
fillColor: Color.fromRGBO(52, 235, 186, .04),
strokeColor: Color.fromRGBO(247, 16, 0, .2),
);

Related

How can I get this function to plot a new circle every time? I'm already using a unique key for each circle

var circleIdVal = UniqueKey();
String cir = circleIdVal.toString();
final CircleId circleId = CircleId(cir);
final Circle circle = Circle(circleId: circleId);
setState(() {
circles = Set.from([
Circle(
circleId: CircleId(cir),
center: LatLng(n1, n2),
radius: n3,
fillColor: Color.fromRGBO(255, 255, 255, .5),
strokeColor: Color.fromRGBO(247, 16, 0, .4))
]);
This is for a GoogleMap Widget. It plots fine but the old circle is constantly deleted and replaced with a new one.
additional info:
This is how it's called in the widget:
circles: circles,
and how it is set:
Set<Circle> circles;
Figured it out...
setState(() {
for (var i = 0; i < "test".length; i++) {
var circleIdVal = UniqueKey();
final CircleId circleId = CircleId(circleIdVal.toString());
final Circle circle = Circle(
circleId: circleId,
center: LatLng(
n1,
n2,),
radius: n3,
fillColor: Color.fromRGBO(255, 255, 255, .5),
strokeColor: Color.fromRGBO(247, 16, 0, .4));
setState(() {
circles[circleId] = circle;
});
}
});
}

Flutter draw multiple polyline colors

I have a number of trips with each having a list of positions.
I need assign a color for each trip but what's happening is that as the lines are being drawn, instead of changing the new color for each trip, it changes for all polylines already drawn.
How can I do it for each trip?
getTrips() async {
await Future.forEach(trips, (element) async {
List positions = element['positions'] as List;
await Future.forEach(positions, (element) async {
latitude = element['coordinates'][0];
longitude = element['coordinates'][1];
direction = element['direction'] ?? 0;
//Current position
position = LatLng(latitude ?? 0, longitude ?? 0);
positionList.add(position);
addMarker();
});
});}
addMarker() async {
var m = markers.firstWhere((p) => p.markerId == MarkerId(equipmentId), orElse: () => null);
if (markers.isNotEmpty) {
markers.remove(m);
}
selectedMarker = MarkerId(equipmentId);
markers
..add(Marker(
visible: true,
markerId: selectedMarker,
position: position,
icon: customIcon,
anchor: Offset(0.5, 0.5),
rotation: direction,
));
_polyline.add(Polyline(
polylineId: PolylineId(_polylineIdCounter.toString()),
visible: true,
width: 6,
points: positionList,
color: tripColors[++colorIndex % tripColors.length],
));
_polylineIdCounter++;
cPosition = CameraPosition(
zoom: cameraZoom,
target: LatLng(position.latitude, position.longitude),
);
if (mounted) setState(() {});
_animateCamera(cPosition);
}
I know it's been a while but just in case there's someone out there who needs this then here you go.
Theoretically, the polyline property is a "Set{}" which means you can have more than one polyline, so for each trip create a different polyline with a different color and add all of them to the set.
I believe that should solve it.

How to add values in google map v3

I have searched in google but i couldn't get it. I need this type where values to be in markers
I tried something but i didn't get the result
var locations = [
[33.906896, -6.263123, 20],
[34.053993, -6.792237, 30],
[33.994469, -6.848702, 40],
[33.587596, -7.657156, 50],
[33.531808, -7.674601, 8],
[33.58824, -7.673278, 12],
[33.542325, -7.578557, 15]
];
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(28.975750, 10.669184),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
icon: 'icon.png' + locations[i][2]
map: map
});
}
You cannot do that. A marker with label can only show 1 character. But you can create the marker icon on the fly in code. Here is a rough example :
function createMarker(width, height, title) {
var canvas, context, radius = 4;
canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
context = canvas.getContext("2d");
context.clearRect(0, 0, width, height);
context.fillStyle = "rgb(0,191,255)";
context.strokeStyle = "rgb(0,0,0)";
context.beginPath();
context.moveTo(radius, 0);
context.lineTo(width - radius, 0);
context.quadraticCurveTo(width, 0, width, radius);
context.lineTo(width, height - radius);
context.quadraticCurveTo(width, height, width - radius, height);
context.lineTo(radius, height);
context.quadraticCurveTo(0, height, 0, height - radius);
context.lineTo(0, radius);
context.quadraticCurveTo(0, 0, radius, 0);
context.closePath();
context.fill();
context.stroke();
context.font = "bold 10pt Arial"
context.textAlign = "center";
context.fillStyle = "rgb(255,255,255)";
context.fillText(title, 15, 15);
return canvas.toDataURL();
}
and when you place the markers :
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
icon: createMarker(30, 20, '$' + locations[i][2].toString()),
map: map,
});
}
demo -> http://jsfiddle.net/cfbh9va8/
As said this is a rough demonstration, showing the technique. I am sure there is a lot of examples drawing a canvas with arrow and so on, or perhaps you can easily do this yourself. My graphical skills are not that good :)

Intersection of two polygons in google map

I am trying to draw multiple polygons using google shapes API. I need to get the intersection of two polygons.
Here I can draw the background polygon(in black) by giving the array of path of each polygon.
Below is my code, here I am giving MVC Array as paths for polygon.
I just want the intersection area to be in separate color. Please check the screen shot link attached after the code.
var bgAreaCoordinates = [];
var bgbounds = map.getBounds(); // Boundary coordinates of the visible area of map
var NE = bgbounds.getNorthEast();
var SW = bgbounds.getSouthWest();
var bgPathCoordinates = [NE, new google.maps.LatLng(NE.lat(),SW.lng()),
SW, new google.maps.LatLng(SW.lat(),NE.lng())];
// Array of boundary coordinates of the visible part of the map
bgAreaCoordinates.push(bgPathCoordinates);
for (var key in flightPlanCoordinates) {
for (var k in flightPlanCoordinates[key]) {
bgAreaCoordinates.push(flightPlanCoordinates[key][k]);// Getting array of coordinates of each polygon
}
}
if (bgPath['bg']) {
bgPath['bg'].setMap(null); // remove the previous bg
}
console.info(bgAreaCoordinates);
bgPath['bg'] = new google.maps.Polygon({
// paths: [bgPathCoordinates, bgAreaCoordinates],
paths:bgAreaCoordinates,
geodesic: true,
strokeColor: '',
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#687472',
fillOpacity: 0.7
});
bgPath['bg'].setMap(map); // Draw the bg polygon : Google shapes Api
http://i.stack.imgur.com/VjTZe.png
Thanks in advance!
Here is an example that does what I think you want to do (make a hole in a polygon that covers the earth and cover that hole with a polygon with a different color). The example polygon happens to be a circle.
code snippet
// This example creates circles on the map, representing
// populations in the United States.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2842518
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8143197
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3844829
};
var cityCircle;
var bounds = new google.maps.LatLngBounds();
function drawCircle(point, radius, dir) {
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;
// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = new Array();
if (dir == 1) {
var start = 0;
var end = points + 1
} // one extra here makes sure we connect the ends
else {
var start = points + 1;
var end = 0
}
for (var i = start;
(dir == 1 ? i < end : i > end); i = i + dir) {
var theta = Math.PI * (i / (points / 2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
extp.push(new google.maps.LatLng(ex, ey));
bounds.extend(extp[extp.length - 1]);
}
return extp;
}
function initialize() {
// Create the map.
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var outerbounds = [
new google.maps.LatLng(85, 180),
new google.maps.LatLng(85, 90),
new google.maps.LatLng(85, 0),
new google.maps.LatLng(85, -90),
new google.maps.LatLng(85, -180),
new google.maps.LatLng(0, -180),
new google.maps.LatLng(-85, -180),
new google.maps.LatLng(-85, -90),
new google.maps.LatLng(-85, 0),
new google.maps.LatLng(-85, 90),
new google.maps.LatLng(-85, 180),
new google.maps.LatLng(0, 180),
new google.maps.LatLng(85, 180)
];
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
paths: [outerbounds, drawCircle(citymap['newyork'].center, 10, -1)]
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Polygon(populationOptions);
map.fitBounds(bounds);
var coverHole = new google.maps.Polygon({
strokeColor: '#FFFF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.35,
map: map,
paths: [drawCircle(citymap['newyork'].center, 10, -1)]
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Draw text along the arc on layer

I am trying to add text along the arc and I read the tutorial. There is a function as below. I don't quite understand the difference between Layer and Context and which one I should use. Is a Layer Canvas plus Context?
I created an arc on the layer which is different from the tutorial. In drawTextAlongArc, how can I draw the text along the arc using Layer? Or I have to use Context to do the work? It's not working now. But if it works, will the arc be drawn on the layer?
function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
var len = str.length, s;
context.save();
context.translate(centerX, centerY);
context.rotate(-1 * angle / 2);
context.rotate(-1 * (angle / len) / 2);
for(var n = 0; n < len; n++) {
context.rotate(angle / len);
context.save();
context.translate(0, -1 * radius);
s = str[n];
context.fillText(s, 0, 0);
context.restore();
}
context.restore();
}
var stage = new Kinetic.Stage({
container: "mainContainer",
width: $("#mainContainer").width(),
height: $("#mainContainer").height()
});
var layer = new Kinetic.Layer();
var kineticGroup = new Kinetic.Group({
x: 300,
y: 120,
draggable: true,
fill: 'black',
draggable: true
});
var arc = new Kinetic.Arc({
innerRadius: 90,
outerRadius: 92,
stroke: 'black',
strokeWidth: 1,
angle: 180,
rotationDeg: 180
});
var canvas = layer.getCanvas(),
context = canvas.getContext('2d'),
centerX = canvas.width / 2,
centerY = canvas.height - 30;
drawTextAlongArc(context, 'Text along arc path', centerX, centerY, 92, 180);
context.stroke();
kineticGroup.add(arc);
layer.add(kineticGroup);
stage.add(layer);
stage.draw();