I have a google map that takes the users post code and loads in directions. The map then shrinks by around 300px in width. Although the map and options adjust to this new width, the route however remains as if the map did not shrink with not all of it in view.
I believe the way to checkResize() but I do not know how to use this. Essentially I would need to trigger it on an onClick event. How is this done. Maps API v3
Any ideas?
Marvellous
google.maps.event.trigger(map, 'resize');
Related
I want to implement a feature in my react native application to let the user measure area or fields with two different methods the first is manual like manually drawing the fields area in the map and secondly automatically by using the gps and entering points while he walk around the field .
Could please anyone share some resosurces or any help material that may assist me in achieving this feature.
Thanks in advance
It is totally doable. Since you didn't mention any particular library, let me explain using react-native-maps (it is an awesome package :). Let's first discuss using the drawing (not sure if you literally mean drawing - at least I don't think you need to add complexity in this).
You can provide the <MapView> component provided by the package with a onTap method, when the user taps, you can add the coordinate a list of coordinates like this:
const [coordinates, setCoordinates] = useState([]);
then in the map, you can do
<MapView onPress={(coords) => setCoordinates([...coordinates, coords])} ...rest of the code
when the user is done, you can use a bit of mathematics (https://www.mathopenref.com/coordpolygonarea.html) or even a polygon package to calculate the area (https://www.npmjs.com/package/polygon).
Well, the second use case is easier I think as no extra interaction is needed since user can input the coordinates which you can again put in the coordinates array and use to calculate area.
I hope it helps :)
In NativeScript with vue.js, I'm trying to figure out if it is possible to have a button which has a linear gradient background and shows an image above the button text. When I set up the CSS to do that, it doesn't seem to work.
I set up a playground to demonstrate: https://play.nativescript.org/?template=play-vue&id=kICEBa&v=1.
Am I doing something wrong, or is this simply not supported by NativeScript-Vue?
If it's not supported by CSS, is there some other way to achieve this result?
I don't think having both on same element is yet supported. You may raise a feature request to support both.
Meanwhile wrap your button with a layout / content view and apply the gradient on it.
I want to use famo.us standard Scrollview but have a background image which is scrolling at a different speed to give a parallax effect.
Rather than setting up timers and getPosition stuff, i was wondering if there's a way to hook into an event stream, or somehow pipe the Scrollviews position into a transformation that's applied to another object? For example use the modifier within the scrollview and a modifier chain and then apply that to another imageSurface?
The examples are a bit thin here so would appreciate any pointers.
To answer your question, the way to pipe scroll events is to use the sync property of scrollview to get updates on scroll.
That is..
scrollview.sync.on('start',function(e){ // Do Something });
scrollview.sync.on('update',function(e){ // Do Something });
scrollview.sync.on('end',function(e){ // Do Something });
However for rendering objects in sync and ensuring precision on such, I have found the Engine prerender function to be wonderful.
So I would do something like this.
Engine.on('prerender',function(){
// Divide by scalar to get effect
var parallaxEffect = 2.0
var bgPos = -contentScrollview.getPosition() / parallaxEffect;
imageView.state.setTransform(Transform.translate(0,bgPos,0)));
})
Hope these pointers help!
This is a bit of a lazy answer, but let me link you to one of the famous demos created by their HackerLab alumni. It demonstrates using famous to create some complex scrolling/swiping animations.
I've learned a lot about Famo.us from the code in the demos, however this hasn't been made available to those outside the beta list yet. So I cloned the project files.
UltraVisual: A Parallax Scrolling Demo
https://github.com/KraigWalker/famous-UltraVisual
A more advanced scrolling animation demo
https://github.com/KraigWalker/famous-IFTTT
Hope this helps you out!
I have a Bing Map control and I want to animate the location of a pin drawn on the map.
Ideally I'd want to write code like this:
// Image myPin = some Image on the map layer;
var sb = new Storyboard();
var duration = DurationHelper.FromTimeSpan(System.TimeSpan.FromMilliseconds(1000));
sb.Duration = duration;
LocationAnimation ani = new LocationAnimation();
ani.To = new Location(33.3, 11.1); // destination lat, lng
ani.Duration = duration;
sb.Children.Add(ani);
Storyboard.SetTarget(ani, myPin);
Storyboard.SetTargetProperty(ani, "MapLayer.Position");
Resources.Add("moveMyPin", sb);
sb.Begin();
Of course there is no LocationAnimation class in the framework. There are a couple similar: PointAnimation works with the Point type, while DoubleAnimation works with individual double values.
I assumed I have to implement my Timeline-derived class but the documentation I found so far is not helpful in this regard and I don't know where to start.
How to animate a property for which there is no *Animation class ready? Am I missing something?
Update: I think I can do something like
// let aniX and aniY be two DoubleAnimation objects
StoryBoard.SetTargetProperty(aniX, "(MapLayer.Position).Latitude")
StoryBoard.SetTargetProperty(aniY, "(MapLayer.Position).Longitude")
but now I have another problem as I don't see how to animate the attached property and always get an exception like "Cannot resolve TargetProperty (MapLayer.Position).Latitude on specified object."
So I guess the question now becomes: how to specify a property path for an attached property?
Further update: I may be on a wrong lead with the "SetTargetProperty" thing as that would make a dependent animation (see link in comments). Could there be a better way to animate a marker pin to a coordinate destination?
Update 3: as Jared pointed out I could try to animate RenderTransform, or use a transition to achieve my result. I had already gone this way and it doesn't seem to be my solution. This is what I found out:
Using RepositionThemeAnimation, it seems I have to give the new pixel position of the pin. This is problematic for a couple reasons: first, I know the lat/lng destination of the pin, but would have to work out the projection (as far as I can tell there is no public interface to work with projection). Secondly the projection itself can change as the map zooms/pans. The pixel destination at the time of the end of the animation could not be the same as the initial pixel destination. In my scenario it's a major problem as it's very likely the map is moving while the animation is occurring.
Using RepositionThemeTransition all the weird pixel/projection problems went away. It's the only way so far I was able to see the animation I expected. I just set the transition and set the new lat/lng position of the tag (via MapLayer.SetPosition). It has two major problems though. I can't set the duration (nor the easing functions) for the animation. And most importantly I can see no way to execute code when the pin gets to its final position.
Attached properties can be animated, but you must enclose their names in parenthesis. See an example here:
http://www.charlespetzold.com/blog/2007/09/080231.html
However, I believe this only works for setting the whole value (Location) and potentially not sub properties (Latitude and Longitude).
I'm wondering if you can provide more information about what you're trying to do. Is this a temporary animation? i.e. are you wanting the pin to animate in on entrance or departure? If so you can just do an animation on the RenderTransform X and Y instead. You won't actually be changing the location of the pin but you can use the RenderTransform to temporarily change where it's being drawn.
Even better, you might be able to get away with the free animations now built into the framework. You don't even need a storyboard to use them, you just set them right on the element like this:
<Button Content="Transitioning Button">
<Button.Transitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Button.Transitions>
</Button>
For more examples of the animation library and even video previews for many of the animations, see:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452703.aspx
Okay, man, your problem isn't related to Bing Maps. It's related to dependency properties that can't be animated UNLESS you specify that they can. Here's how: http://blog.jerrynixon.com/2012/06/windows-8-animated-pie-slice.html
That link in the other answer with Charles' site is not up to date.
I was looking at http://www.msnbc.msn.com/id/26295161/ns/weather/ and noticed that the flash map is provided by bing and have a custom color scheme. I have a similar need to show maps with a black & white colortheme, is it possible using their api or have they made custom tiles ? (doesnt seem feasible to provide tiles for alls maps on all levels :)
If you are not wedded to Bing maps, you could look into Mapbox, which provide maps based on OpenStreetMap in any style that you desire.
This question is still not answered and even if it's kind of old, I think it matters.
In fact, they're not using different tiles or a custom tile scheme. You can see those in the network inspection tool.
Since they're inside a Flash application, they can easily change the color of the image using filter on image (ColorMatrixFilter) and changing dynamically on the client side the rendered colors.
Well now some years later you can: https://msdn.microsoft.com/en-us/library/mt823636.aspx :-)
(I got here by looking for some sample styles and thought I add the link for anybody else finding this question)
Perhaps a custom tile skinner is that you need: http://rbrundritt.wordpress.com/2009/11/27/bing-maps-custom-tile-skinner/
In this example, the author changes the color of roads using ColorMatrix and ColorMap:
The two key methods used to transform the colors
consist of using ColorMatrix or a ColorMap. By
using a color matrix all the colors on the tile
can be changed within a couple lines of code. Using
a ColorMap allows you to change one color at a
time. This is useful if you only want to change a
few colors on the map.