creating offline maps with MOBAC and getting them running with app inventor ?

[damir...@gmail.com]

Hi guys,

im going to be very short :)

im searching how to "put" my offline map which i created with MOBAC into my basic GPS  application ? Thank you very much for any kind of help

[Taifun]

James Hancock made something similar, see this thread https://groups.google.com/d/msg/mitappinventortest/AylMnTitkOk/bB4GIkZdVxgJ

also probably a search in the old forums may help, see below

https://groups.google.com/forum/#!topicsearchin/programming-with-app-inventor/map$20AND$20authorname$3AJames

https://groups.google.com/forum/#!topicsearchin/appinventor/map$20AND$20authorname$3AJames

Taifun

---

Trying to push the limits of App Inventor! Snippets and Tutorials from Pura Vida Apps by Taifun.         

[SteveJG]

If MOBAC provides the latitude/longitude coordinates for the lower left and upper right or the map (or vice-versa )  you can do this.

If the map projection you get from MOBAC is a "flat" map, this is very easy to work with.   If you get a Mercator Projection map or something else, you will have 

issues when you attempt to plot GPS data on the map.  All map projections provide a distorted view of the Earth.   A flat map projection is 

distorted too, but in a way friendly to computer mapping and if the area  of the map is not large, works nicely for area city maps  but not for 

a map the size of Texas or Spain if you are going to plot points on it.

You need a Canvas; to display your map image..

You need to know the dimensions of the Canvas.

The Canvas does not understand latitude and longitude, so you have to educate it by writing two routines.

One routine converts World coordinates to screen coordinates (of the Canvas)..this converts the latitude and longitude into screen units.

One routine to convert Screen coordinates to World coordinates.

If you have a flat map, you are done with all but the plotting.   If you have another map projection, you have to write a routine to compensate for the 'stretch' or distortion in the map and 

use that to adjust plotting of Gps coordinates.

You can plot in various ways:  1. Use the Canvas.DrawCircle method to plot the point (remember, you will use the GPS converted to screen coordinates to get your x and y values).

2) Use a sprite icon  and plot the position of the converted GPS to screen location.

Is this as pretty as Google Maps?    It can be.

Try some blocks.   If you run into issues, return and ask again.    The key here is writing the up and down conversion mapping routines. Here is an example in Pascal    http://www.ibrtses.com/delphi/dmcs.html 

Regards,

Steve

[damir...@gmail.com]

Thank you guys for so much help and time fo writing so long posts :) i figured it out what should i do but im lost in setting blocks to convert my coordinates ? How do i do that ?

[SteveJG]

What you have to do is convert the Pascal routines to Blocks:   Here is an example in Pascal    http://www.ibrtses.com/delphi/dmcs.html 

   

How you actually do this depends on what your map looks like, what it's dimensions are ( pixels  x   pixels),the size of the canvas (h x w) you will plot coordinates to, etc.

It is NOT easy and requires a lot of Math blocks.    I will  look and see if I have a diagram to illustrate what you must do.  Check back in a day.

In the mean while, can you post an example image of the map you would work with and any information about the coordinates of the four corners of the map?  If you do NOT know the 

coordinates of the corners, I can not help you.  If I do not have a clear picture of what kind of may you will plot to, I can't help either.  I can help with my suggestion, not the suggestions provided by Taifun, .  When you say "i figured it out what should i do" I do not know what you decided to do, so it is difficult to provide suggestions

I will give you advice, but you need to do your own coding.  What have you tried?    Block images please in jpg or png. .

-- Steve

[damir...@gmail.com]

I do have start/end coordintes of the map. About the blocks: it's totally wrong so no need to show those. But there's a .jpg file of map details. I would be thankfull if you could give me a hint with what blocks  to start that operation ?

[Taifun]

we are here to help, but not to do your work

I gave you some hints and if you do a search, you can find the examples from James 

Taifun

[SteveJG]

@ damir      Hi, 

Here is how to get started with using a jpg map to display GPS coordinates doing it the way I do it:

You can put a Canvas on your Designer screen.   The map you grabbed with your program is 512 x 512 pixels.  That many pixels is larger than the screens of any phones but would fit 

on some tablets.  Using a map with those dimensions will cause some issues you will have to address later.

Name the map image, for this discussion, I call it  MyMap.jpg.

Load MyMap.jpg into the AI2 resources in your Project. The tutorial “Hello Purr for App Inventor 2” explains how to load a resource: http://appinventor.mit.edu/explore/ai2/hellopurr.html .

Use a    set Canvas1.BackgroundImage to    MyMap.jpg 

Put that block either in the Screen1.Initialize or in a Button.click event handler.

If you place the block in the Screen1.Initialize, you see your map displayed on your Android device immediately on running the app .

If you place the block in the button, at the press of a button the map is displayed .

What you say you want to do is very complicated.  You not only need to understand Blocks coding, you need to understand the basis for latitude/longitude coordinates,

a little bit about map making and map projections , how AI2 defines the Canvas screen and more.

A quick course in Canvas is here:  http://www.appinventor.org/paintPotIntro

The Canvas coordinates is what I refer to as the Screen Coordinates.

The diagram attached is intended to help understand concepts.  If you do not know and understand this stuff,you can not plot GPS 'pin's on a user provided map using conventional methods.

World Map Coordinates:   How the GPS reports location information.  Navigators use Degrees, Minutes, Seconds  (or DMS) to report latitude and longitude; GPS receivers (and computer programmers) use decimal degrees.   If it were only that simple. Decimal degrees West of the Prime Meridian are reported as 0 to -180 degrees, East of the Prime Meridian are reported as 0 to + 180 degrees decimal.

If you use a custom map, you have to find a way to relate World Coordinates to Screen Coordinates. If your map is entirely in East of the Prime Meridian or entirely West of the Prime Meridian, converting from Map Coordinates to Screen Coordinates is rather straight-forward (I did not say simple, it is complex).  If you have a map that crosses the Prime Meridian, the math gets complex.

The Canvas screen is defined by the size of the Canvas in pixels. See the Screen Coordinates diagram above.  Regarding your map example you posted earlier, if you define the Canvas dimensions as 512 x 512 you get something like shown (actually, your map is a square, not a rectangle, but this the diagram is just to illustrate the concept)  The black coordinates is what your program provided, converted to decimal degrees, the green is what I interpolate as the coordinates for the remaining map corners..

To plot a  location, on the map image (lets post it in the very center of the image (   44.59056 , 18.10509)    You have to plot a point on the Canvas 'screen' at 256, 256.    

To do that using the information from LocationSensor, you have to write a procedure to translate the location coordinates to Screen coordinates. See below to see an example of one way to do it.

If you always use the same User Map with the same dimensions, your problem is solved.

if you want to do zooming in and out, you got a lot of work to do.

I converted the DMS you provided with your map to decimal degrees.  Note that I did not keep all the decimal places.  There are several reasons: 1) a GPS only reports five decimal places and 2) when you convert the World map coordinates to Screen coordinates, almost all of this is lost in rounding.

When you plot a pin or icon at any GPS coordinate it will be posted to an approximate location. Can this get any more difficult?   Yes, certainly.  For instance, the map you use is composed of pixels,  a pixel's height is larger than its width, so this introduces distortion in the posted map image.  Do you NEED to correct for this?   Possibly not, but you can compensate mathematically by adjusting the World to Screen and Screen to World conversion algorithm. YOU have to write these procedures.

Posted is an image of the algorithm I use to convert the map Longitude to a screen coordinate (mapW2SxLin). You need to do that for the Latitude and if you want to extract information from the map later, need to do the reverse to get from Screen Coordinates to World Coordinates.

Do you really want to continue?   Try some blocks to do the simple things.    Place the image on your Android, post a circle to the center of the Canvas 'map'...  what you need to do is not Advanced, it is Expert Level AI2 coding     No, I have not written a tutorial.  There might be something in the links Taifun posted but a quick perusal did not show me any example of how to do what you want to do.   Perhaps I missed the link. What I see in the links  are alternative ways of dealing with maps, mostly Google Maps, and you are not trying to do that.  Perhaps Taifun will point out the specific link.

If you do continue, and want to ask a specific question, I  and many others on the forum are glad to provide advice. I will not write your app for you, you need to do that,  nor do I expect to post a comprehensive tutorial in the near future.

So, Try some Blocks!

Regards,

Steve