question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ellipses do not scale with zoom in WPF sample

See original GitHub issue

Hi and thank you for this repo,

When zooming, ellipses defined in a MapItemsControl do not appear to scale with the zoom level. As you zoom out they get bigger instead of smaller. This is the opposite behavior of a statically defined ellipse, which correctly scales (gets smaller) as you zoom out:

For instance, this works as described above (from your WPF sample app):

<map:MapPath Location="53.5,8.2" Stroke="Blue" StrokeThickness="3" Fill="#1F007F00">
                <map:MapPath.Data>
                    <EllipseGeometry RadiusX="1852" RadiusY="1852"/>
                </map:MapPath.Data>
            </map:MapPath>

But this doesn’t work; Extending your WPF Sample, I display an ellipse for each point location you’ve defined. They display perfectly fine, but as you zoom out they get bigger (whereas static ellipse stays a fixed size)

<Style x:Key="EllipseItemStyle" TargetType="map:MapItem">
            <Setter Property="map:MapPanel.Location" Value="{Binding Location}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:MapItem">
                        <Canvas>
                            <map:MapPath Fill="Red" Opacity="0.7">
                                <map:MapPath.Data>
                                    <EllipseGeometry RadiusX="100" RadiusY="100"/>
                                </map:MapPath.Data>
                            </map:MapPath>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

And then beside the other mapcontrols:

 <map:MapItemsControl ItemsSource="{Binding Points}"
                                 ItemContainerStyle="{StaticResource EllipseItemStyle}"
                                 SelectionMode="Extended"/>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:17 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
ClemensFischercommented, Nov 6, 2022

There is now a read-only MapTransform property in the MapItem class, which scales and rotates from map to view coordinates.

It may be used like this:

<ControlTemplate TargetType="map:MapItem">
    <Path Fill="Green" Opacity="0.2"
          RenderTransform="{Binding MapTransform, RelativeSource={RelativeSource TemplatedParent}}">
        <Path.Data>
            <EllipseGeometry RadiusX="100" RadiusY="100"/>
        </Path.Data>
    </Path>
</ControlTemplate>
1reaction
ClemensFischercommented, Nov 3, 2022

@YiehraiS Forgot a commit or push last night. Will do later. For the scale bar, see the MapScale class.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Clipping and scaling an image within an ellipse (not the ...
Here's an example of an image that can zoom in and out and stay within the clipped region. Play with this until it...
Read more >
Text scaling - Windows apps
Clipping is preferred to ellipses as ellipses take up space themselves. Note. If you need to clip your text, clip the end of...
Read more >
WPF Map - Visualization Layer Introduction
MaxScale —represents maximum scale factor, which will be applied to the framework element when it has BaseZoomLevel property set and we zoom in...
Read more >
Draw shapes - Windows apps
Learn how to draw shapes, such as ellipses, rectangles, polygons, and paths. The Path class is the way to visualize a fairly complex ......
Read more >
Information Layer - Telerik UI for WPF - Documentation
Here is an example for an Ellipse, positioned above Sofia, Bulgaria and visible only when the zoom level is grater or equal to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found