I am using Leafletjs in Nuxt by using a NPM package. Thus I am using a wrapper to use Leafletjs in Nuxt.
The problem I have now is with this piece of code:
<l-map
:zoom="4"
:center="[0, 0]"
:max-zoom="6"
:min-zoom="3"
:options="{ attributionControl: false }"
#mousedown="mouseMovClick($event)"
>
<l-circle
:lat-lng="[markerPosition.lat, markerPosition.lng]"
:radius="100000"
color="rgba(76, 211, 40, 0.9)"
:fill="false"
:weight="2"
/>
<l-circle
:lat-lng="[markerPosition.lat, markerPosition.lng]"
:radius="200000"
color="rgba(76, 211, 40, 0.9)"
:fill="false"
:weight="2"
/>
<l-circle
:lat-lng="[markerPosition.lat, markerPosition.lng]"
:radius="300000"
color="rgba(76, 211, 40, 0.9)"
:fill="false"
:weight="2"
/>
</l-map>
For each "circle" that I add, they obviously become bigger. But they also become more "egg" shaped for some reason that I do not understand.
Does anyone know what could be wrong or what could be causing this anomaly?
EDIT: Found out, well, I think that the circle is bending to the shape of the earth. In my case I do not want it to bend. It should always remain a perfect circle. Is that possible?
I added this to my code:
import { CRS } from 'leaflet'
And inside my setup:
const crs = CRS.Simple
This seems to be working, but now I end up with this error:
window is not defined
var requestFn = window.requestAnimationFrame ||
getPrefixed('RequestAnimationFrame') || timeoutDefer
EDIT: I got it working (will update my post soon), but the next problem now is that the image names have changed and thus the map does not load anymore.
I am using this script to make the tiles in Photoshop.
https://github.com/bramus/photoshop-google-maps-tile-cutter
I have no options/ influence for the names. So, when I do not set the CRS the names are correct i.e. 5/4/2.png but when I use CRS the names change to i.e. 5/4/-2.png and those do not exist.
I also tried https://github.com/libvips/build-win64-mxe/releases but that gives me a weird output where all tiles will be unsorted somehow.
vips.exe dzsave IMAGE_LOCATION FOLDER_LOCATION --layout google --background 0E0E0E --centre --suffix .png[Q=100]
I think I have to, somehow, have to make sure that the map only starts and ends within these folders:
1/1/1.png up to 1/24/64.png
2/*/*
3/*/*
4/*/*
5/*/*
6/1/1.png up to 6/24/64.png
where all numbers are positive never negative. The same applies to the image names. Always positive numbers never negatives. The above reassembles my directory structure after tiling the images.
Also, another thing that happend is when I refresh my map, the markers look like they are in place, but the map itself has moved away to the bottom right for some reason. No clue why it shifted.
Related
After installing R2018b, the first figure I opened contained an interesting message (shown in blue):
The reason it's interesting is because it contains features like text wrapping, transparency, the fact that the image maintains a constant width even though the text resizes (this reminded me of CSS3 flexbox, hence the tag), etc.
The last part of the animation is in slow motion, to better show how the div's size follows that of the figure.
In case it matters, I'm using Win 10 v1803.
Question:
I'd like to know how we can draw similar, custom, divs (for a lack of a better word) in our figures. (It's important to stress that this is not a UIFigure!)
What I found so far:
The Learn More link opens the page:
web(fullfile(docroot, 'matlab/creating_plots/interactively-explore-plotted-data.html'))
yet breakpoints in the entry points of either web or docroot (or even doc) aren't hit.
Assuming that this element is a Child of the figure, I attempted to locate a handle to it:
>> set(gcf,'MenuBar','none'); findall(gcf)
ans =
22×1 graphics array:
Figure (1)
ContextMenu
AnnotationPane
Axes
AxesToolbar
Text
Text
Text
ToolbarStateButton (Brush/Select Data)
ToolbarStateButton (Data Tips)
ToolbarStateButton (Rotate 3-D)
ToolbarStateButton (Pan)
ToolbarStateButton (Zoom In)
ToolbarStateButton (Zoom Out)
ToolbarPushButton (Restore View)
Button
Button
Button
Button
Button
Button
Button
however, making these controls invisible using set(h(2:end), 'Visible', false) didn't make the div disappear.
Saving the figure as .fig or generating code for it, doesn't leave any trace of this div.
When uiinspect-ing the figure, this div doesn't show (or at least, I couldn't find it).
I don't know what exactly I did to make it reappear once more, but since it's set to appear on the very first time you boot R2018b, I suspect deleting prefdir (obviously, after backing it up) and restarting MATLAB could bring it back.
The only thing I didn't try yet, is to attach a java debugger to MATLAB and attempt to trace the caller to com.mathworks.mlservices.MLHelpServices.setCurrentLocation (from mlservices.jar), which opens the help browser.
After some digging in the Java side of things (starting from findjobj, followed by a lot of .getComponent(0).getComponent(0)...), I've finally managed to locate the component in question. Here's what I learned:
This component is called InfoPanel, and is part of MATLAB's Java API. The class definition itself is found in:
MATLAB/R2018b/java/jar/hg.jar!/com/mathworks/hg/util/InfoPanel.class
To make it appear, we need to call the static method addBannerPanel, passing in a figure handle:
com.mathworks.hg.util.InfoPanel.addBannerPanel( figure(randi(1E4)) );
Or another signature that also accepts a custom panel:
jIP = com.mathworks.hg.util.InfoPanel;
jIP.setBackground(java.awt.Color(0.8, 0.7, 0.1));
com.mathworks.hg.util.InfoPanel.addBannerPanel( figure(randi(1E4)), jIP );
The MATLAB setting that controls whether this should appear is showinteractioninfobar inside the <prefdir>/matlab.settings XML.
It appears that the "interesting parts" of InfoPanel are private, which means it allows barely any customization (mostly some colors; not the string or the icon), but it should be fairly easy to make a copy of this class and expose all elements we need.
I'm reading an imageOverlay URL from an ArcGIS webserver that uses the leaflet getBound() coordinates as part of the URL (we have large maps that are filtered for the current window 'extent'). Apologies for not including the actual path (I'm working with sensitive client data). Eg:
http://myarcgiswebserver.com/MapServer/export/dpi=96&format=png32&bbox=27.119750976562504%2C-31.194007509998823%2C32.39044189453126%2C-29.692824739380754&size=1719%2C434
[bbox] = current imageBounds
When dragging my map the imageOverlay url is updated correctly but my leaflet window is no longer aligned to the imageBound values that were set when first adding the imageOverlay which results in a skewed output (this is my assumption):
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Am i approaching this problem incorrectly or would the introduction of a function to update the current imageBounds resolve this? Perhaps not a new function but the expansion of setUrl with additional parameters...?
Many thanks for any feedback...
As #ghybs pointed out, your use case might be better served by using the WMS
interface of your ArcGIS server.
Anyway, you say
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Well, that glitch is due to you probably doing something like:
Remove old overlay
Add new overlay
Wait until the image is received from the network
Wait one frame so the new overlay is shown
and instead you should be doing something like:
Add new overlay
Wait until the image is received from the network
Remove old overlay
Wait one frame so the new overlay is shown
The problem is just the async wait and the possible race conditions there, but should be easy to hack together, e.g.:
var activeOverlay = null;
var overlayInRequest = null;
map.on('moveend zoomend', {
// If we are already requesting a new overlay, ignore it.
// This might need some additional debouncing logic to prevent
// lots of concurrent requests
if (overlayInRequest) {
overlayInRequest.off('load', showOverlay);
}
overlayInRequest = L.imageOverlay( computeUrl( map.getBounds() ), myOverlayOptions );
overlayInRequest.on('load', showOverlay);
});
function showOverlay(ev) {
activeOverlay.remove();
activeOverlay = overlayInRequest;
activeOverlay.addTo(map);
overlayInRequest = undefined;
}
If you use an ImageOverlay but change its url dynamically, with a new image that reflects a new bounding box, then indeed that is the reason for the behaviour you describe: you display an image that has been generated using a new bbox, but positioned in the initial bbox, since the image overlay remains at the same geographical position on the map.
Instead, it sounds to me that you should use a TileLayer.WMS.
It would automatically manage the bounding box update for you. You may need to find the correct options to fit your service provider required URL syntax, though.
Example: http://playground-leaflet.rhcloud.com/yel/1/edit?html,output
This must be really simple, but I can't seem to get, how one could fix together two bodies in cannon.js. I have experimented with different types of constraints no (first I thought, LockConstraint should be exactly what I need, being desribend as "removing all degrees of freedom").
What I want to achieve is to "stick together" several bodies so that they rotate/behave together if one of them moves/rotates, e.g. like a hammer to its shaft, but absolutely "fix". (The constraints behave a little like if the bodies were connected with rubber bands, even if applying a very high "maxForce" option)
How would I do that? Is body.addShape() the right direction..?!
Thanks a lot for any hints.
If you want two shapes to always have the same relative transform, you should put them in the same Body.
This example code creates a body with two boxes in it, at X=2 and X=-2 locally in the Body, relative to the center of mass.
var body = new CANNON.Body({ mass: 1 });
var shapeA = new CANNON.Box(new CANNON.Vec3(1,1,1));
body.addShape(shapeA, new CANNON.Vec3(2,0,0), new CANNON.Quaternion());
var shapeB = new CANNON.Box(new CANNON.Vec3(1,1,1));
body.addShape(shapeB, new CANNON.Vec3(-2,0,0), new CANNON.Quaternion());
Also see the compound demo: http://schteppe.github.io/cannon.js/demos/compound.html
I would like to put a shadow around any given text, or make the text more anti-aliased looking.
For example lets say I'm running a simple text such as:
var titleName = R.text(x+200, y-75, "Lorem Ipsoup de jour")
.attr({font: '75px Helvetica, Arial', opacity: 1, fill: "#dfe6ec"})
The text is somewhat chunky looking at that size, and doesn't blend well against a background. Is there a way I can create a drop-shadow effect (with alpha channel, ideally)?
In SVG a text shadow effect isn't as simple as with CSS3, but it's reasonably straightforward using a filter. You can't use that example as is in Raphaël because it has no support for groups, but you might be able to create the filter definition in an external file and then apply it with:
.attr({filter: "url(filters.svg#dropShadow)"});
--edit
I've had a chance to give it a try and it doesn't work because filter isn't recognised by attr, however it does work (in Firefox) if you grab the node and use a regular DOM setAttribute method.
var t = paper.text(100, 100, "Raphaël\nkicks\nbutt!");
t.node.setAttribute("filter", "url('filters.svg#dropShadow')");
Chrome doesn't apply the drop shadow, and Opera blurs the entire element. It almost certainly won't work in IE because that'll be VML. Example here.
I know this is an old question, but to help anyone else searching for this you can try Element.glow([glow]) to get a shadow effect. http://raphaeljs.com/reference.html#Element.glow
Basically i have an array of Sprites to be loaded and removed one by one in an order.
I have a list of animal names in an array like
const NSString *Animal1[30] = {#"Lion .png",#"Zebra .png",...........
To load a sprite i use the following code
image[i]= [Sprite spriteWithFile: [NSString stringWithFormat:#"%#",Animal1[i]]];
image[i].position = ccp( 240,180 );
[self addChild: image[i]];
Then to remove the sprite after use I use the following code
[self removeChild:image[i] cleanup:YES];
What happens when i run the code in simulator is the sprite loads one after other till 20th animal. After the 20th animals the application crashes.
I dont know what is the problem.If i have the array less than 20 it works fine but when it exceed the application crashes.
Can anyone plz help to resolve the issue.
If it works for the first 20, it sounds like you may have a bad image or an erroneous filename for that 21st image. If you try to create a sprite from an unsupported or nonexistent image, then you'll get a crash.
Check and make sure all the filenames listed are actually inside your package (check case, too, since they're case sensitive!). Make sure the filenames match exactly - in the code sample you pasted above, it looks like there are spaces in the titles.
If the files are all there, make sure you didn't save one of them as a Photoshop document instead of as a .png or something. Even if the filename ends in .png, it doesn't mean that it was saved in that format.
From your description of the problem it could even be a bad index and you're just incrementing out of bounds or something. The best way to clear it up is to do some basic debugging.
place the last item in the middle of
the array. Does it still blow up on
the last one or on the same entry no
mater what position it's in?
remove the offending item to see if
the code works without it
trace thru the code and see the
entry point where it's blowing up,
check your stack trace, etc.
To verify all your files are ok try to load each one manually not using an array like(put a break point on each line and use Build & Debug):
(pseudo code)
add the lion sprite
add the tiger sprite
add the bear sprite
...etc...
If that works then test your array by not using a loop to load the sprites, load each one by calling it's index like(put a break point on each line and use Build & Debug):
(pseudo code)
add image[1]
add image[2]
add image[3]
...etc...
Then if that works fine I would setup your sprites into and array of sprites like:
(pseudo code)
create the sprite with image[i]
add the sprite to spriteArray
---repeat for each sprite---
Then do another loop to add the sprites to the layer like:
CGSize size = [[CCDirector sharedDirector] winSize];
for CCSprite *aSprite in SpriteArray {
aSprite.position = ccp((size.width - (aSprite.contentSize.width / 2)), (aSprite.contentSize.height / 2)); //positions the sprite to the lower right corner
[self addChild aSprite];
}
I like to put my sprites in an array, that way it's easier to just traverse the array when I need to work with them. Also, instead of using absolute coordinates, I like to use coordinates that are relative to the size of the window and the size of the sprite. By positioning them this way, it will convert the coordinates no matter what type of display or orientation or sprite size you are working with.
Hope this helps!