OpenStreetMap without the Map Component

[SteveJG]

OpenStreetMap without the Map Component

Here is a way to directly access OpenStreetMaps using App Inventor2 without using the Map component.  The coding is similar to how a developer would use the Google Static Map API using the WebViewer.  The method is simple and uses very little code.

What you need

The app requires the following Block code, a Button, a WebViewer, a LocationSensor and a few minutes to build. The demonstration must run on a real device, not an emulator.

What the app does

The example plots a marker at your device's current location as indicated by the device GPS receiver.  The location updates once a minute when you use the LocationSensor's default settings.

The method for displaying a map using the OpenStreetMap url has  advantages over using the Map component. Extra features are available.  The down side: the map display runs in a WebViewer which is not a fully fleshed out browser. Some OSM  features work very well on an Android 7.0 but do not work on an Android 4.2.2 device.

The good stuff first.   Make a long press on the map at a point interesting to you.  A menu will appear. 

 Select what you want to do from the menu and have fun. You can plot a point and get coordinates.  You may or may not be able to plot a route from your current location to that marker etc.  The WebViewer is not a 'full' browser and it appears these features only work with higher Android operating systems.  The web based OSM shows a distance scale in the lower left corner (eventually this feature will be available in the Map component)

The problems: all the OpenStreetMap features available using a PC and a full feature browser are not available. I can plot a route using my Android 7.0 tablet but the identical code fails in a 4.2.2 tablet (the 4.2.2 tablet 'tries' but never resolves a route).  If you are lucky,long pressing a point on the map  allows a menu to appear.  Select Directions from here.  A green marker appears.  Make a second long press at a second location on the map.  Select Directions to here from the menu.  A red marker appears and, if you are lucky, a blue route line (route) appears too showing step by step directions to get from Green to Red..

Here is how your screen might look using  Responsive Screen Sizing on a tablet:

Here is how the screen looks using Fixed Screen Sizing:

Your experience may vary, however the GPS blue marker always shows where your device thinks you are located on the map. The technique works fairly well using tablets, the smaller screens on phones might not display correctly or allow selecting options.  I did not test on a small screen sized phone.

Experiment with Responsive/Fixed  sizing    and   Classic / Device Default themes.

Merry Christmas

Regards,

Steve

[Abraham Getzler]

(added to Maps section of FAQ)

https://groups.google.com/forum/#!msg/mitappinventortest/wqJin0qO8M0/8xUafdROAgAJ

ABG

[SteveJG]

Several developers have requested the aia. Sorry, I do not answer direct eMail developers. Ask specific questions in the Forum.  Thanks.

Everything necessary to code this app is shown in the above post except how to create the  populateOSM procedure and how to change the zoom factor.  The tile zoom is set by code within the Procedure using the blue Math block.  The zoom factor is currently set to 15.  You as a developer can change that value to any value between 1 and about 21.  Higher values display greater detail.  The value 1 displays the entire World map.Unlike Google Map tiles, the higher tile values are not available in some geographic regions if you use OpenStreetMaps.  Is your area one?   Experiment and discover what might be the highest zoom value where you are creating a map.

For those who need a bit more encouragement, here is the Designer screen showing location of components and Properties that were set from their defaults for Screen1.

All the tools needed to build this Project are provided.  You do not need an aia because this app is simple to code.  Just place a Button, a LocationSensor and a WebViewer on the Designer screen as shown above.   Once all the components are placed,  find and place the appropriate component Blocks as shown in the original post. You might need to learn how to use a Procedure on the Blocks screen - it is very easy.  How to create a Procedure with Blocks is shown in this tutorial Defining Procedures   If you get stuck, please ask for advice and post the blocks you tried in the Forum.  You will get help.  In this way, you will learn to code using the blocks and get the satisfaction that you made the app.

Here is how to do something similar using the MIT Map component    Map Route   There is an aia file at the link.  The OpenStreetMap using the Map component will look something like this 

You get the blue path but no driving instructions .

Best wishes,

Steve

[Ziitro]

Hello Mr. Steve can i request a copy of an .aia file of this project.?i want to try and see for my self the functionality of the project..

[SteveJG]

@ Ziitro      An aia is easily created.  Why don't you try to create your own Project and aia?  "All the tools needed to build this Project are provided.  You do not need an aia ,this app is simple to code.  Just place a Button, a LocationSensor and a WebViewer on the Designer screen as shown." and provide the needed Blocks on the Block screen.

Create a new Project and follow the directions provided to see for yourself " the functionality of the Project." It should take you a half hour of your time or less if you have coded with App Inventor 2 previously; probably longer if you are just learning.

Were you able to code the Project?

[Ziitro]

Yes i was able to... Thanks Mr. Steve.. have a good day