I'm developing an application mobile in flutter and using HERE MAPS SDK explorer , one of this I must to do is in a single coordinate create a polygon circular con 100 meters radios with dashed border, like first photo
when i'm developing using here maps sdk , i created
const radiusInMeters = 100.0;
final geoCircle = GeoCircle(GeoCoordinates(lat, long), radiusInMeters);
final geoPolygon = GeoPolygon.withGeoCircle(geoCircle);
final fillColor = ColorPalette.warning.withAlpha(80);
final mapPolygon = MapPolygon(geoPolygon, fillColor);
and the result is this different.
how can I create a border circular 5px with dashed border and different color using here maps sdk api ?
Related
Currently, I'm using this package to draw some images. And I'm saving this image. I reviewed package classes and functions and tried many solution to achieve my aim. But I haven't found any solution yet. Maybe I'm trying to do impossible thing so I want to ask this: Can we draw a transparent canvas then our output image background can be another color?
Here's some code snippet:
canvas = Canvas(
recorder,
Rect.fromPoints(Offset.zero, Offset(size.width, size.height)),
);
paint.blendMode = mode;
ui.Image src = await picture.toImage(size.width.toInt(), size.height.toInt());
paint.isAntiAlias = true;
canvas.drawImage(src, Offset.zero, paint);
picture = recorder.endRecording();
ui.Image img = await picture.toImage(size.width.toInt(), size.height.toInt());
ByteData? imgBytes =
await img.toByteData(format: ui.ImageByteFormat.rawStraightRgba);
In above code snippet, we create a canvas and drawImage then we get the image bytes. But in this case, this image's background is transparent. But I want set red color. So when I
add
canvas.drawColor(Colors.red, BlendMode.src);
My image can be created as I want, but this time I see a red canvas in my view. But I want a transparent canvas when I draw it. I only want to see output image's background is red.
Is this possible?
I am trying to create custom dynamic markers (changes on tap) for my google maps project. Each marker shows a shop with some promotion going on. A single shop can have 3 promotions displayed at the same time and it is supposed to be highlighted if tapped on
I have tried to convert the SVGs for the markers in Canvas code using online tools, but it's bulky and I don't understand it well.
Here's the screenshot for an example screen
Here's the code written for converting theses SVGs to image byte data for use as marker icons
static Future<ByteData?> marker({double? width}) async {
width ??= 88;
double height = width * 1.2247191011235956;
final recorder = ui.PictureRecorder();
final canvas = Canvas(recorder,
Rect.fromPoints(const Offset(0.0, 0.0), const Offset(200.0, 200.0)));
Size size = Size(width, (width * 1.2247191011235956).toDouble());
_paintMarker(size: size, canvas: canvas);
final picture = recorder.endRecording();
final img = await picture.toImage((width).toInt(), height.toInt());
return await img.toByteData(format: ui.ImageByteFormat.png);
}
I'm doing an app in my app. I'm using google maps flutter and I'm having an issue regarding scrolling. When I scroll the map I want to get the center points (long, lat) of the map that is if I scroll the map and stop at certain place it would grab the location points of center.
Can anyone suggest how to solve this issue? It can be very helpful Thank you in advance..
I would get the bounds of the screen, and then find the center of those bounds. If you have a GoogleMapController for the GoogleMap, just use a function like this:
getCenter() async {
LatLngBounds bounds = await mapsController.getVisibleRegion();
LatLng center = LatLng(
(bounds.northeast.latitude + bounds.southwest.latitude) / 2,
(bounds.northeast.longitude + bounds.southwest.longitude) / 2,
);
return center;
}
In the latest version of google maps flutter we can get the coordinates of location by passing in the screen coordinatinates,
// some code here
Size screen = MediaQuery.of(context).size;
// some code here
final coords = await mapController.getLatLng(ScreenCoordinate( x: screen.width/2, y:
screen.width/2));
I´ve been following this post about using an image overlay for bing maps:
http://blogs.msdn.com/b/bingdevcenter/archive/2014/04/04/image-overlays-with-bing-maps-native.aspx
What I want to now is to be able to add polygons/polylines on top of this image. Lets say for example that we use the following code:
(From here: http://blogs.bing.com/maps/2014/01/23/make-clickable-shapes-in-the-native-bing-maps-control/)
private void MyMapLoaded(object sender, RoutedEventArgs e)
{
//Add a shape layer to the map
shapeLayer = new MapShapeLayer();
MyMap.ShapeLayers.Add(shapeLayer);
//Create mock data points
var locs = new LocationCollection();
locs.Add(new Location(coordinates that are over the image));
locs.Add(new Location(coordinates that are over the image));
locs.Add(new Location(coordinates that are over the image));
//Create test polygon
var polygon = new MapPolygon();
polygon.Locations = locs;
polygon.FillColor = Colors.Red;
shapeLayer.Shapes.Add(polygon);
var locs2 = new LocationCollection();
locs2.Add(new Location(20, 20));
locs2.Add(new Location(40, 40));
locs2.Add(new Location(50, 20));
//Create test polyline
var polyline = new MapPolyline();
polyline.Locations = locs2;
polyline.Width = 5;
polyline.Color = Colors.Blue;
//Add the shape to the map
shapeLayer.Shapes.Add(polyline);
}
The problem is that the polygon/polyline will always appear beneath the image.
ShapeLayer has a property for z-index but it does not help. Is there a way for my polygons to always be on top?
Not sure why you want to do this, but you won't be able to show a MapPolygon above a user control that is added as a child of the map. That said, you can create WPF Polygons and added them. What you could do is create a custom user control that combines the image overlay functionality with something like this: http://blogs.msdn.com/b/bingdevcenter/archive/2014/03/25/custom-shapes-in-windows-store-apps-c.aspx
I'm looking for best solution - I'm drawing a hexagonal map (Civilization like :) ) for my browser based game in GWT. Currently I'm drawing it on canvas which basically works.
However - I'm also able to slide map left,right,down and up to see another fragment of the map. In such situation I'm forced to redraw the whole map - which doesn't look too good, and will probaly cause preformance issues when the map gets more complex.
Is there a better approach for that? Some library? Or maybe I should make every hex a button like widget. so I could be able to move it instead creating from the scratch... but what about different resolutions then... I'm affraid the map could tear apart sometimes...
You could try doing it will simple DIVs (FlowPanel, HTMLPanel, etc) and style the hexagons using CSS. See this tutorial: http://jtauber.github.com/articles/css-hexagon.html
There are some neat suggestions here as well: html/css hexagon with image inside and hexagonal shaped cells in html
You could draw the entire map (usually just the relatively static background, not the animations!) in a hidden canvas, and then copy the parts you need to your visible canvas:
final Canvas hiddenCanvas = buildCanvas(1000, 1000);
drawHexPattern(hiddenCanvas);
// don't add the hiddenCanvas to your DOM
final Canvas visibleCanvas = buildCanvas(320, 200);
RootPanel.get().add(visibleCanvas); // add the visibleCanvas to the DOM
showArea(hiddenCanvas, visibleCanvas, 0, 0);
...
showArea(hiddenCanvas, visibleCanvas, 20, 10);
...
With a showArea() method like
private void showArea(final Canvas hiddenCanvas, final Canvas visibleCanvas,
final double x, final double y) {
final Context2d hiddenCtx = hiddenCanvas.getContext2d();
final Context2d visibleCtx = visibleCanvas.getContext2d();
final ImageData imageData = hiddenCtx.getImageData(x, y,
visibleCanvas.getCoordinateSpaceWidth(),
visibleCanvas.getCoordinateSpaceHeight());
visibleCtx.putImageData(imageData, 0, 0);
}
I created a pastebin with a working example: http://pastebin.com/tPN2093a