How do I rotate the map marker (draw a line on the map at an angle)?

Good afternoon, I am carrying out a project using the APP INVENTOR MAPS tool, but we have the difficulty of not being able to rotate the image that the MARKER represents.

It used an extension of rotating the image "outside" of the map and then applying that rotated image to the MARKER using the ImageAssets function, so that the MARKER appears "rotated", but I was not successful.

Can you give me an idea how to rotate the MARKER of the MAPS? or some extension that allows that? Analyze the entire INVENTOR APP and there is no tool that allows you to rotate the map marker.

I want it to be like this:

Since the sense was originally the arrow looking up

Thanks for your time !!


Correct. There is a Map function that probably does something similar to what you want to happen. Use the Map.ShowUser and set it to true. It provides a 'Marker' on the map that looks like:
TravelDirection . It rotates in the supposed direction of travel. You cannot tell it to rotate, it simply does based on the prior and present location coordinates.

You might be able to use it in your Project. If you use it, do NOT provide a Marker to show current location; the icon provided by ShowUser does that for you. Using another marker will obscure the nice pointy arrow.

Alternatively, proceed in the direction you are already going but provide multiple CustomMarker images. Change the images as you determine they need to be changed.

The CustomMarker should be square in dimensions with a transparent background. You may need to have either 360 images or more reasonably perhaps eight to point in 8 points of a compass. Switch among them to display what you want to happen. Make sure you set the Marker to AnchorHorizontal to Center (3) and AnchorVertical to Center (2) . I can not explain why center is not #2 for both horizontal and vertical, but that is the way it is coded.

Using an extension to rotate could potentially work. Whether it would rotate successfully probably depends on the criteria you use to 'rotate', how you code the CustomMarker to change, how frequently you do the rotation and why you are doing this in the first place.

The Map component is used to populate OpenStreetMap tiles. The OSM server is sometimes fussy about rapid updates to the graphics and its server is sometimes slow precluding doing this in the first place possibly

You did not share the code Blocks you tried so it is senseless for anyone to guess.

An extension that will perform magic? Not yet available, sorry although with some experimentation you might get your present project working.


First, thank you very much for the reply! I understand your answer, but maybe it is not what I am looking for, because it is not the marker that my location implies, but one (or many) random.

I want to rotate the image of the marker (they can be more than one marker) of the map with a button, whatever the angle.

The angle can vary.

On my cell phone this apk works, but not on other devices.
I attach the images

In this case, I am using the ImageEditor extension.

Download it from this link

The idea is to draw a line on the map, inclined at certain degrees. The idea that the image is not an arrow, but rather a line, but for this case take an arrow to see that the rotation of the angle is working.


Explain please. The problem could be the Android version that is not capable of using the extension.

I don't understand, you asked about rotating a map marker. :frowning_face: Only you know what you want to do ... "maybe it is not what I am looking for"????

Draw a line using the LineString map component ( not a Marker) since you want to draw a LINE on the Map. A line on a map is drawn by using the coordinates of the two points defining the line.

It is not clear if you want to draw a line from your location to one of the map Markers or something else (an arbitrary line) ? It is easy to draw a line from your location to another location using the MIT Map tools.

Here are a few code snippets that may help others although not necessarily you:

This code snippet draws a line from your location to a Marker using a LineString.

The course from your location to the Marker.

The course from the Marker to your location.


The straight line distance between your location and the Marker .

I apologize, I fully understand that perhaps I am somewhat complicated to explain things.

I wanted to ask the solution in a different way to the problem to make it easier but I think it complicates it.

I will try to explain it more simply with this case:


Currently I have a marker that draws the route that I am doing through the lineString in the same way that it is seen in the image (as you will see, the marker, marked in blue, we are updating the last point so that it stays in front, as if it were a gps).

Now, what I want is to generate the lines marked with violet. My idea was to put two markers in parallel to the marker you draw, and when the marker you draw rotates towards an angle, the images copy the same rotation.
But what happens? The blue marker is rotated with the rotation of the map, and I want the purple lines to rotate on themselves and not with the map. Because what the blue marker always does is point up, but the map when turning, always remains well oriented. I explain?


The blue marker does not rotate, it remains fixed, but thanks to the rotation of the map it is always well oriented. Now the purple lines should be rotated regardless of the map rotation.


Sorry, I still do not understand what you want to do. Language differences sometime cause large misunderstanding. :cry:

For your purple markers use Rectangles , the code in Map1.TapAtPoint. You can also use actual coordinates. After you place a Rectangle on your Designer use the code and press the map Screen to display the rectangle. Edit: you need also to set the RectangleFillColor to none.

For your red marker you might use code similar to Map1.LongPressAtPoint.

The LineString and Rectangle displays are not synchronized with each other but they are synchronized with the rotating map view . These controls track the map orientation if you select Map.EnableRotation to true.


The Rectangle and the LineString will always be congruent with the map orientation. You cannot have the rectangles stationary and the map rotating if you do this on the map. Perhaps place a Label above the map display to show the blue marker pointing up? Sorry, I do not understand again.

Hope this information about a Rectangle helps. If not, keep experimenting.

Hahaha yeah, it's getting difficult with different languages.

Do we try one more time? haha

What happens in the above is that the violet rectangle I focused on what is inside, which are the lines. Those lines for me, would be two markers with their imageAsset at a different angle than the red marker.

I'm going to simplify the question as much as possible. How can I rotate the image that contains the marker (ImageAsset) by pressing a button? I simply want the imageAsset corresponding to the marker, when I press a button, to rotate, for example, 45 degrees, and that image rotated by 45 degrees, is updated in the marker.
Even simpler, I generate a button, a map and a marker, to the marker I put an image. When I press the button, I want the image that represents the marker to rotate 45 and that change appears figurative in the marker.

I put the example of the button, because if I explain the whole project I think it would take a long time and it would be more complex to solve my problem. But it is simply that, that the image that represents the marker is modified (that is, edit the image of the marker by rotating it N degrees) and then that the marker captures that change.

I attach a simple case

First image, the marker.

Second image, the rotated marker press the button.

WhatsApp Image 2021-01-07 at 00.41.41

An alternative. Use a canvas (which has to be visible) and imagesprite. On button clicks you change the heading of the imageSprite image, then save the canvas image and set the marker. Thisw example done with Android 10 in companion mode (for file path location...)


Yes! You hit the point. Thanks!!

There is only one problem:
I am different depending on the version of Android.
On my cell phone it works (Android 8.1.0), but I tested it on a cell phone with Android 7.1.1, it rotates the image correctly once (it also does it on the marker) and then the marker image and the map no longer change It freezes and does not work (the imagensprite continues to rotate without problem). Finally, then I tried a cell phone with Android 10, I only rotated the imageSprite inside the canvas but the marker does nothing.

Do you know what the problem is? Or maybe it's not Android problem.


That is odd, i would have expected the Android 7 and 8 to fail with my blocks (file path) and Android 10 to work.

File path for pre Android 10 in companion mode should just be /rotarrow.png

I just changed the way. It's different from yours, could it have been that? I don `t believe.

Another thing, on my cell phone that is walking, the image of the marker turns into jpg and stands out. This is probably the size of the image you place on the imageSprite.

Attached the screenshot of the program and the .aia




RotaTEST.aia (3.4 KB)

Another way is, if you want and want, you can send me your .aia or .apk and try it on all the devices I tested previously. To remove doubts that it is not a problem with cell phones and not with the program.

There are no more blocks but try the aia and see if it is any different.

rotateMapMarker.aia (3.0 KB)

Hopefully you have figured out that heading 0 is 12 o'clock, heading -90 is 3 o'clock and so on, therefore you can set the pointer as you wish....

Be certain that your file saving path is correct for the android version you are testing, and if compiling an apk you will need permissions to save files.

Is there a special rule or protocol for routes according to Android? If it exists, is it somewhere written?

On the other hand, how do I enable the permissions to save files? Can it be from APP INVENTOR?

Thanks for all the help!!

If you can place permissions from the inventor app? Where would they be placed?

If there is written permission, I suppose it may also need reading, right?

If you give WRITE permission you also give READ at the same time


This is needed for compiled apps. The companion should have this permission in place

Great thanks!! I'll try that. Regarding Android and the different paths, do you know the path for each version? I don't know if it will affect much.

I have shown the respective "companion" file paths above. It "should" make a difference.

Perfect, I thought it was a personal path.

I will try and insist with all this information you gave me.

Thank you so much for all the help !!