I am trying to rotate the pushpin image base on the degree for example "120" to show which direction it is going.
var pushpin = new Microsoft.Maps.Pushpin(curlocation, {
icon: '/images/Airplane_icon.png',
anchor: new Microsoft.Maps.Point(20, 20),
color: 'red'
});
It is possible to rotate a pushpin in Bing Maps but requires a bit of code to achieve. There is a code sample here: https://bingmapsv8samples.azurewebsites.net/#Pushpin_RotatedImage This approach would work fine for a few pushpins, but if you have a lot of pushpins that all have difference rotations, or the rotation of a pushpin is updated frequently, this solution likely wouldn't be the best option.
Another consideration is to take a look at Azure Maps which is another Microsoft mapping platform which does support rotating icons on the map. Here is a sample: https://azuremapscodesamples.azurewebsites.net/index.html?sample=Symbol%20Layer%20Options (click on the icon options tab and move the rotation slider). Azure Maps can handle dynamic rotation values on large data sets easily. Here are a couple of related examples: https://azuremapscodesamples.azurewebsites.net/index.html?sample=Animate%20a%20Symbol%20along%20a%20Path
https://azuremapscodesamples.azurewebsites.net/index.html?sample=Add%20Arrow%20along%20a%20Path
Related
I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
I am wondering if there is a way to turn off the labels that appear on the Bing Map labeling things like public beaches or popular businesses? I believe in Google Maps they are called Points of Interest and are simple enough to disable. And I also know I could turn the Labels off completely by disabling that layer using something like this:
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key', labelOverlay: Microsoft.Maps.LabelOverlay.hidden});
But I want things like street labels so just wondering if I can just select these "Points of Interest" to disable.
Thanks in advance.
The LabelOverlay option is for the map labels in the Aerial imagery. When this is set to hidden and the map is in aerial or birdseye mode you will see the imagery without the labels displayed on the map. There is no option to turn of the point of interest labels as they are drawn right on the map tiles themselves and are not a separate layer of data.
I have a bing map and a pin that is to be pinned on the map. This pin is an image different from the default one. I want this image to be pinned on the map, and It does work until here. But it pins at the left-top of the image. I want it to be pinned thru the center of image. (As if you pin a paper on a pinboard not at the left-top of the paper, just thru the center of paper.)
So how can I set this? VerticalAlignment works for this or not?
Here is my pin image definitions;
Image pinimage = new Image();
pinimage.Source = new BitmapImage(new Uri("/Images/killtarget.png", UriKind.Relative));
pinimage.Width = 64;
pinimage.Height = 64;
I use Nokia Map API for Windows Phone 8 and was facing the same issue. I don't know if the same solution will apply to Bing Maps as well but try setting PositionOrigin property of the Pin...it has to be set the following way:-
PositionOrigin="0.5,1"
the two numbers represent alignment horizontally and vertically so 0.5,1 means Horizontally center and Vertically bottom.
Just a bit of clarity. Windows Phone 8 uses a Microsoft created map control that pulls in Nokia map data. This is exactly what Bing Maps does. There was a bit of a miss communication when they announced the new API.
As for centering the image you can try the position origin, or you can use margins with negative x and y values.
what I mean is something like this:
http://help.arcgis.com/en/arcgismobile/10.0/apis/WindowsPhone/samples/start.htm
go to that ESRI sample and choose "Graphics" and then choose "Add interactively".
In that sample, you can use mouse(if it's a phone, I suppose we can use fingers) to draw polygons, lines to the top of the map.
does the bing map control for WP7 provide something similar?
Thanks
If the WP7 control is the same as the normal Silverlight control, you can add shapes to your Bing Map by adding MapPolygons(). If not, you can still add polygons and polylines (as well as other shapes) via Silverlight and display it on top.
I am using the RTM WP7 Bing Maps control. I have a number of pushpins at lat/long locations. I want to move and zoom the map to show all the pushpins.
With the Silverlight Bing Maps control I could create a bounding box from a number ot lat/longs and tell the map to zoom using this.
All I can see on the WP7 Bing Maps control is a Center property.
Any ideas how to do this?