How do I put an image in a map rectangle?

[Mayky]

Hi everyone,

I'd like to put an image in the rectangle tool of a map (in order to put a more precise map drawn on this image and georeferenced). But It seems to be only possible to fill a color in rectangle.
If somebody can help me or know an extension that permit it...

Thanks,

[SteveJG]

Welcome.

This blue link documents what is possible with the Map Rectangle

Sorry, you cannot place an image inside the rectangle.

You probably can do something similar with a FeatureCollection .

@Mayky

in order to put a more precise map drawn on this image and georeferenced).

It appears you want to annotate the map. You can annotate your map within limits using a FeatureCollection.

You can create a FeatureCollection (a geojson file) on this Web page using the simple drawing tools; save your geojson and load the geojson file into an App Inventor FeatureCollection component. Yes, this will be georeferenced.

Can you provide an example of what the 'image' you would like to add would look like?

[Mayky]

Thanks for your answer Steeve,
The "images" that i want to put are orienteering maps that I built with a map legend more detailled that open street map. So I don't think that's possible to put it with poligon. I just wanted to put my .jpg on the rectangle as we can easily do on a button but it seems to be impossible without creating an extension (but it's to complicate for me I think).

[SteveJG]

OK. If you do that you will run into scaling problems even if it were possible to place a jpg.

If you don't mind redrawing your orienteering maps and simplifying them you can use the tool I mentioned to draw a new map as a FeatureCollection. When you import the FeatureCollection to the map in your app, it will autoscale.

A very crude 'orienteering' map of nonsense I just made,'

(yes, I know what orienteering is (I have a magnetic compass and arthritic knees to prove it and some old musty paper maps).

Maybe you can do something like that?

[Mayky]

Thank you for your help,
I know the different lattitude and longitude of the edge of my maps so I think it must be ok using the properties of the rectangle for the scale.
The app is for sport teacher (like me) and the goal is that each of them (and their pupils) could import his map (not necessary mine), scale it, and play with GPS checkpoint. So it's not possible if I draw directly with features (it can be possible but I don't think that my colleagues know app inventor ). I already have the itinerary of my pupils with a linestring to see where they are but I want to see it on the detailled map to see it precisely and to analyse it whith them...
See an exemple of what I want to be able to do...

[SteveJG]

Ok... here are two possibilities (neither exactly what you want to do)

Post an image as a Custom Map Marker, using an ImageAsset. This example does that with fairly large images

This map shows four Markers with custom images.

If the image is not too large, you might be able to do that on your app map. Map Marker

Alternatively place an Image and the Map component in a Horizontal layout (side by side) .
This allows displaying both jpg and map simultaneously. It is possible to set the Map to a contour map (Terrain) in some places so you might be able to see contours on the OpenStreetMap tiles.

Do you have the coordinates for the jpg you posted *just the coordinates of your topographic map that shows on the image you shared. Share the coordinates and I will see what might be possible. This will be a simple app.

[Mayky]

Thanks for all,
I will test it. The "terrain map" is infortunably not yet availlable in france...I've already think to place it side by side but if i could see the linestring of my pupil on my image (adjusting the opacity of it), I prefer.

I give you an other image map with the coordinate
min lat : 46,87973795
min lon : 0,540870934
max lat : 46,89601022
max lon : 0,559238542

EDIT : sorry I've made some mistakes here are the good coordinates :
min lat 46,87740384
min lon 0,539752491
max lat 46,89712456
max lon 0,560053625

[SteveJG]

Something like this is easy

• Terrain is available but only for zoom levels of 8 or less.

unfortunately the Roads are not very detailed in Echelle either at zoom 15 (the zoom of the contour map)

[SteveJG]

This gets close. There is either a problem with the coordinates you provided or a small bug in Map, however here is what I get by slightly modifying the image you provided and placing the image in a Marker.

This technique could work but it has some gremlins.

[Mayky]

Hi,
For my part I tried the marker solution in my app, it's hopeful. The layering with the linestring works

.
But it seems that markers have a limited size on the screen (or on the map, i don't know) and I can't make it bigger than that on my device (Do you reach it with the map on the full larger of your screen? When I increase the pixel height and large it doesn't work) . So If I take a picture I can zoom it and see more details but when I'm watching the map when they're playing it's very small...

[fjerome]

Bonjour,
Comme les intervenants sur ce post semblent français je vais écrire dans cette langue que je maitrise mieux.
J'ai fait une appli avec ai2 pour les championnats de France UNSS de raid. qui permet de localiser les participants d'une course d'orientation. Elle permet aussi aux concurrents de voir, à l'issue de l'épreuve, par où ils sont passés. Cela ne résout votre problème de carte mais donnera quelques pistes (en CO c'est important) Vous trouverez l'apk sur play store avec la recherche "raid unss" et voici le fichier aiamaptest.aia (2.5 MB)
Sportivement

[Mayky]

Merci pour ce retour, je vais regarder ça pour enrichir ma réflexion. Dans l'état actuel, mon appli permet de savoir où en sont les concurrents, de voir leur trace simultanément et quelles balises ils ont validées (soit en mode GPS, soit en mode QR voir les 2 : une fois que je suis sur la bonne zone je cherche plus précisément), de prépositionner les balises virtuellement en utilisant leur position GPS(et de les répartir sur différents circuits) et de les voir sur la carte. Elle permet également à un élève JO d'aller poser des balises et envoie aux autres les positions de celles-ci et leur définition. Et enfin de communiquer avec l'élève (via texte à parole) pour l'aider à distance en cas de pb. Le résumé de course de tous les élèves est également directement enregistré dans un tableau .csv sur l'appareil du prof.
La superposition des cartes (open street map et IOF) dans l'appli permettrait une analyse plus fine de la trace et en direct (sans avoir besoin de repasser par un autre logiciel). Je bute sur ça depuis pas loin d'un an et c'est vrai que s'il avait été possible d'insérer une image dans l'outil rectangle de maps ça aurait été plus facile pour moi... d'où ma bouteille à la mer.
Merci encore et bonne continuation

[SteveJG]

Try this unfinished example.

The image you provided (as sent) is image2 and is not used.
The image I modified by stretching the image to fill the Rectangle based on your coordinates is image3. It almost fits at zoom 12
I tried to make a 'transparent' from image3. It is transparent but unfortunately will not display the underlying map. SVG works .. see below.

For reference:
OSM Tiles at zoom 15 are at a scale of 1:15000 when displayed.
Tiles at zoom 16 are at a scale of 1:8000
The Echelle image is 1:7500

When I zoom 16 using the jpg image, the map zooms but the jpg does not of course. This possibly could be fixed by using a svg image rather than a jpg. svg images are supposed to auto scale (but not happening )

Here is an image of my experiments using https://convertio.co/jpg-svg/ with image3.jpg. The converted svg image works at a zoom of 17 as shown

Experiment with the attached aia (which is very basic and unfinished). jpegAndMapOrienteering.aia (2.9 MB)
Let us know how your Project goes.

I placed a segment of a trak (linestring) on the map. The blue trak displays through the jpg which you also discovered. The same is true when using a svg image (which when converted became transparent).

Edit:
The CenterSVG only works when using an svg image. The Center Marker works with the jpg. The TMarkerONOFF toggles the jpg Marker to visible or not visible (so the developer can view the Rectangle the represents the footprint of the jpg.)

[Mayky]

Hi Steve,
Thanks to you I think I've found a solution at my problem. It seems that my image jpg was too big (in pixel) compared to my screen so it produce a little standardized image on my map. Finally reading you and scale problem with jpg, I decided to reduce it with paint and you can see the pretty good result :

Of course if I change the zoom I've problems (the image size doesn't change) but maybe I can resolve it by loading differents size of this images and making them visible or not according to the zoom level.
In order to position easily my map I put the marker anchor left and down and put min lat and min long value, then i just adjust the zoom with my fingers (not level by level).
This screenshot is made with zoom 14. If I want to see it with zoom 16, it w'll be to big for my device (it can work on a tablet) I think i have to cut my image into two part, each one on a different marker to respect the pixel limit of my screen.

Thanks for all!

[SteveJG]

@Mayky

I want to see it with zoom 16

Didn't you try the aia I posted Mayky? The example can go to zoom 17 at least!

Providing separate jpg images is a reasonable approach to provide concurrence at various zoom magnifications and could work. Look at the example and consider using a svg image. I tested on a tablet; I expect it will work on a smaller screen but do not know.

make this change please
and it will work with Fixed instead of Responsive... I will see if I can find a small cell and check that too.... the Android 5.1 works reliably at zoom 17 using the svg image but for some reason, probably the pixel count is not responding to the png. I will revisit the app. I expect the Map is having issues with Android 5.1.

[Mayky]

Sorry Steve, I didn't replied directly but I've tested your .aia and it works at zoom 17 on my phone with the .svg. But I have a problem with SVG because the colours disappear and we need to see them (for example we can't go through dark green (too much vegetation, bramble..) but we can run into light green even if it's not always easy with the trees... And it will be easier to locate one self with the colour (blue for the water...). So that's why I try to provide different .jpg (I'll test sooner with two or more markers to have zoom 16 or 17). Thank you for all the time you spent helping me

[Mayky]

Effectively, the limit size of the (png or jpg) image is the screen height (in pixel). I've succeed at zoom 16 providing two chuncks of the image in two markers and adjusting the zoom by pitching the map as you can see in these two images (before and after the pitching).