I have a React Native application that contains a (react-native-maps) mapview with several different polylines and polygons created from http request data. The problem is that the map renders the background twice as you can see in the attached picture. This second layer is always a bit larger and more out of focus than the actual layer (the polygon/lines match with coordinaates on the clear defined layer). Im wondering how this second background came to be and how to prevent it from rendering.
Kind regards
Are you saying, that without providing an you are getting two layers?
Otherwise, when you use a different provider, for a layer and want to hide the layer provided by google, You should set mapType to "none".
Related
I was curious of the new "turn on/off" background blur functionality of Google Meet (currently in test). I have investigated a bit and it seems it is using Tensorflow Lite models:
segm_heavy.tflite
segm_lite.tflite
via WASM
mediapipe_wasm_simd.wasm
while the model graph should be
background_blur_graph.binarypb
The model seems works at the level of the HTMLCanvasElement as far as I can see. Anyone aware of a similar model?
[UPDATE]
Thanks to Jason Mayes and Physical Ed I was able to reproduce a very close background blur effect in the Google's BodyPix demo
The settings of the application are showed in the Controls box. There is a backgroundBlurAmount option that let you customize the blur percentage to apply as well.
The result is almost close to the official Google Meet application.
majority of segmentation models give alpha channel as a result (some give more, but alpha is most useful) - what is masked and what is not
so if you want to blur the background, its a multi-step process:
resize input to model expected size
run model to get alpha channel
resize output back to original size
draw original image on canvas
draw alpha channel over it so only foreground stays visible
for example using ctx.globalCompositeOperation = 'darken'
optionally blur it a bit since model output is never perfect
for example using ctx.filter = blur(8px)`;
so if you want to blur the background, simply apply apply blur simply copy canvas from 4, apply blur on it and draw if back before going to step 5
regarding models, google meet is not bad but i had better results with google selfie model
bodypix is older model, great configurability but not that great results
example code: https://github.com/vladmandic/human/blob/main/src/segmentation/segmentation.ts
https://www.youtube.com/watch?v=CmftPUqQ0nE at 3:42 suddenly the photo becomes grainy or something. I can't replicate it since the uploader disabled the comments section and description is not helpful as well.
An effect like this can be achieved with a high pass filter. To do this, duplicate the layer (Ctrl+J, Cmd+J on a Mac). Put a high pass filter on the top layer (fairly small radius, i.e. less than around 2 pixels) and then set the blend mode of the layer to overlay.
EDIT: If you convert to a smart object before applying the high pass filter, you can play with the radius afterwards.
I am using Google maps in iOS using iOS SDK, letting users mark an area using few markers, creating a polygon.
I want to highlight that area and gray out the rest of the map, something like this:
Is this possible somehow?
You have to draw your own UIImage where you create the gray area, clear area, and polygon borders. After that add it as an overlay tile using GMSGroundOverlay. This will fix it in place for when the user scrolls.
https://developers.google.com/maps/documentation/ios/overlays
This is similar to how radar overlays are drawn for weather apps.
I would approach this problem using several steps.
1) collect your points from the user that will define your polygon.
2) send the collection of points to your server.(ajax post)
3) server side, dynamically create a grey image with a transparent hole in it that is your polygon.
4) store image on server, send back response with info telling browser how to retrieve it(url,id,whatever).
5) using javascript + google maps api, apply an overlay referencing your newly created image.
each step may have its challenges but the problem becomes manageable if you focus on the different steps.
1) and 2) will involve using javascript, capturing 'clicks' and having feedback to the user in the form of a line or something on the map. Once finished, the server call can be initiated by the user or by your programming.
3) I would use python with an image library(skimage, etc.) and a mapping library (gdal). Making an image is not hard but combining it with GIS and getting the right projection, etc. will take some fiddling.
4) shouldn't be a problem once you've got that far.
5) using zimmryan's comment about creating a ground overlay could be helpful for this step.
good luck!
i am take two layer Background and Cloud and in background i put background image and cloud layer i put cloud image and both TMX add to my project and when run i got error TMX: Only 1 tilset per layer is supported but only one layer use it run successfully..
Code:
CCTMXTiledMap *TiledFirst = [CCTMXTiledMap tiledMapWithTMXFile:#"BackgroundTiled.tmx"];
[self addChild:TiledFirst];
CCTMXTiledMap *Clould = [CCTMXTiledMap tiledMapWithTMXFile:#"Clould.tmx"];
[self addChild:Clould];
Cocos2d only supports one tileset per layer. This error occurs as soon as you add one tile (even a completely transparent one) from another tileset onto the same layer. Since there's no easy way to identify these tiles in Tiled and your map still being simple the easiest fix is to delete and re-add both layers, then make sure you add only tiles of one tileset to either layer.
PS: both KoboldTouch and Kobold Kit do not have this restriction.
I'm having problems with google maps, drawing icons was working fine few weeks ago in my project. At some time the icons are very frequently drawing in partly and I don't know what is causing it. It is both happening on my development machine and production server and on all machines.
I'm only using two different icons so I know the bitmap images are not corrupt.
Here below are two sample images.
You'll get more help if you post your outputted JSON. Your gmaps JSON must not have quotes around width or height, like so: "picture":"/assets/dayhome.png","width":32,"height":37,"lat":53.5402,"lng":-113.628
Another fix is to include optimized:false which disables the html5 canvas (the squares that are cutting off the markers).
My much more detailed analysis here: Canvas Tiles Cut Off Custom Markers
Set optimized:false in your Marker options.
If optimized is true (the default), then your marker images are incorporated into the tiles. Unfortunately where markers cross tile boundaries, they are not also used on the adjacent tile, so appear to be truncated at the edge of the tile. Using optimized:false forces the icons to be placed on the map as separate DOM objects.