How to Add Markers and Calculate Distance from the device to Marker using Maps

[SteveJG]

 

Add the following two buttons and code to the Map object example shown at https://groups.google.com/forum/#!category-topic/mitappinventortest/AFi0HOiVSJE  

The example at the link above uses the simple locationsensor that is part of the Map component to provide its location information.  The AI LocationSensor component is not necessary or used.  The code required to use the AI LocationSensor component with Maps is slightly involved.  I believe using the included locationsensor in Maps is the prefered method for those developers just learning how to use the Map component.  The Maps link to the GPS works just fine.  Once you get this working, you might experiment using the LocationSensor in conjunction with Maps.

The code in Button3.Click adds a Marker to the example App.  The code places the Marker about 0.1 kilometers North of the device location (see below). When you code 

your app don't use the blocks at the top (they are what works in the example and they work for anyone recreating this example)..  Yes, the app knows where you are if you code your project 

this way.  Use the upper blocks to test placing a Marker and when they work, use the lower blocks to position the marker in your app.

The code in Button4.Click calculates the "straight line" distance between the Marker1 and the device location using spherical geometry (essentially a Great circle algorithm) in the Map object.  The Map component calculates distances in meters.  To calculate distance in kilometers the forumula should be: kilometers=  meters/1000 ; to calculate feet:  feet =   meters x 3.28084 ; to calculate miles:  miles = meters x 0.000621371 .  Adjust the code apropriately. 

When you first run the modified example, do not attempt to use Button3 or Button 4 in the app example until after the map renders.  There is no error control in this simple example.  The blocks demonstrate one way to use markers and to calculate a distance.  Early use before calling for the map will result in an error.  

There are other ways to  add markers and calculate distance to the marker.  Experiment.  The Map component description provides the required information.

Above is a way to place several markers at one time  The MyMapMarker variable is there to show what the Marker ID is.  That is needed to identify the Marker so the developer can calculate from it to another location.

Regards,

Steve

[Riccardo Risi]

Hi Steve,

I don't try to add the block attached in my code. How can I insert in my code?

I've added a marker on a map in designer view but I don't see the block in blocks view.

Thanks

Riccardo

[SteveJG]

I don't know Riccardo.   What you see depends on your Map bounds .   If you start a new Project and place a Map component on your Designer then drag a Marker to the screen, you will see the Marker where you dragged it.

To use the block you showed, you have to place the block in an event handler object; perhaps a Button1.Click and provide the latitude and longitude as Math blocks.  However, you also need to tell the map where to 'center'  or change the zoom value .. 1 shows a large area,  a 20 or so shows a detail map).   What happens depends entirely on what you coded.  Sorry, I can't see what blocks you used and what your device screen shows.  A picture is a thousand words.   Just experiment.

regards,

Steve

[Riccardo Risi]

Ok Steve,

I tried to add 2 markers like you can see from the attached image.

With a list I could add a lot of markers, ten or tvelwe for example.

A lot of thanks.

Bye

Riccardo

[Riccardo Risi]

And if I would add a big number of markers - for example a marker for each city in the united states - then more one hundred?

Is there a method rather than add one hundred markers on the map in the Designer?

[SteveJG]

There are several different ways to add markers using the Map component.

You can either place Marker1, Marker2, Marker3 etc. manually and provide the Marker coordinates.  You are not providing the coordinates, you are providing a general solution I provided so my example would work everywhere in the world.  You need to provide the specific latitude and longitude values ; perhaps something like:

latitude = 41.9028

longitude = 12.4964

The markers have to be provided in the Designer using that methodology.

Another way to do it is to use the blocks show in Button5  in the example above.  This method is more complicated but does allow using a List to create the Markers 'on the fly' but with known coordinates.  A Procedure probably could be written to populate the required latitude and longitude values.   Great project for someone. The developer would have to use the Maps Any Component blocks.  I did something similar...sorry the code is not appropriate for what I think you want to do.  A hint, use the call Marker.SetLocation ..for component ..latitude...longitude block and possibly an add items to list block

Hmm. Oh, there are certainly more cities in the United States than one hundred.  The method would be the code in Button5 modified as required.   Would it handle a hundred markers?   I honestly don't know.   Try 10, then 100 and see when it can no longer set Markers.  I would not even attempt this; I would not use the Map component at all but use the Google Static Map API.  It would be significantly simpler and probably easier.  

The Maps component is very new.  You are going to have a lot of questions.  There is no tutorial and the Maps is complex so be prepared to experiment..  MIT rates the basic LocationSensor tutorials as Advanced; I would rate the Maps tools as Very Very Advanced.

[Riccardo Risi]

Hi Steve,

I'll study the Map component.

Thanks

Bye

Riccardo

[Riccardo Risi]

Hi Steve,

in attached a simple routine to insert in a map a very big number of markers with few blocks. 

In this example only one hundred but it works with any number.

In the "For each number from" cycle I load the coordinates of the 100 markers. For semplicity I've added 0.01 to the first latitude and 0.01 to the first longitude. They fall in the mediterranean sea near Naples, where I live.

In the "For each item in list" cycle I map the markers on the map.

In 1 click it maps the 100 markers.

I hope it can be useful to the guests of the forum.

Bye

Riccardo

[SteveJG]

Nicely done Riccardo!

For those who want to create a List of Markers from coordinates, something like this will work by creating a list of geocoordinates for each location from a csv file.  Of course there are 

many other ways this could be done.

Your example demonstrates Maps can easily handle at least 100 markers or more.  The developer needs to create  theMarkers List so that 

he / she can later reference any of the individual Markers. Perhaps to add annotation using the Marker Any component blocks.

Keep experimenting and posting your results.  :)

[Riccardo Risi]

Hi Steve,

thanks for the suggests.

To the next issue :-)

Bye

Riccardo

[Riccardo Risi]

Hi,

which block permits to add a label to anyone marker created with the "Call Map1 create marker" block?

I saw in the "Any Map" of the "Any Component" but I didn't see anything can help me...

Thanks

Riccardo

[SteveJG]

The documentation explains how

 consult the Maps reference at 

• Map components

In the description of the Marker, perhaps this is what you are looking for 

Title

Sets or gets the title displayed in the info window that appears when the user clicks on the marker.

?

Is that what you are looking for?

[Evan Patton]

Hi Riccardo,

Any Marker you create with the Map.CreateMarker can be customized with the "Any Marker" blocks. You will need to add at least one Marker to the Map in order to get the "Any Marker" entry in the drawer. You can make the Marker invisible so that it doesn't show up as part of your app. 

Regards,

Evan

[Riccardo Risi]

Hi Steve, Hi Evan

thanks for your supports. I try to implement your suggests.

I'll inform you of my progress.

Bye

Riccardo

[Riccardo Risi]

It doesn't work. I added the "marker.title" block to visualize the coordinates in the format (latitude, longitude) but it not works.

With a double click on the marker I don't see the info box.

[SteveJG]

When you create Markers using Map1.CreateMarkers  a developer cannot use the Marker1.Title block to provide a 'label'.   The problem is the 'names' of the Markers you create 

are created in real time.   The Marker1.Title = something   only changes the Title on a block Marker1 that already is placed by the Designer at design time.   Marker2.Title = something changes Marker 2 etc.    The Markers in your example need to be changed using the Any component called  set Marker.Title of component...to ... block.where  the 

'component' will be one of the items in the List called listamarkers .

Regards,

Steve

[Riccardo Risi]

Hi Steve, Hi Evan,

in attach the my results. Good for a beginner like me :-)

The title and description are different for each of the one hundred markers.

How do you say?

Thanks for your suggest

Bye

Riccardo

[SteveJG]

Nice.   You got the concept.   A developer can use two different  Any component blocks to modify what is in the 'bubble' ; the set Marker.Description  or  set Marker.Title.   The 'title' displays above the 'description' when he/she instantiates the Markers using the Map1.CreateMarkers technique.

-- Steve

[Riccardo Risi]

Ok, all is gone well.

I've imported 542 markers on a map with success, with Title and Description in the infobox when the user click on the marker.

Map tool is very powerful!

Thanks to Steve and Evan.

Bye

Riccardo

[Evan Patton]

Hi Riccardo,

Glad that it is working well for you. You might want to be caution with respect to the number of markers. Right now, each marker creates a separate drawable in memory. A large number of markers might result in an OutOfMemoryError that will crash the app. One of the future optimizations I plan to make is to reduce the memory usage when many markers are used.

Regards,

Evan

[Riccardo Risi]

Ok Evan,
I'll be caution with the markers.
Thanks
Bye

[Riccardo Risi]

Moving in my car, I've noticed that the map doesn't move with me keeping my position at the center of the map.

Is there anything that I can enable to have this functionality?

[Riccardo Risi]

Probably in this way?

[SteveJG]

Yes, the CenterFromString like that in a Clock object should work to 'keep the map centered on the device's current location" used with the UsersLatitude/UsersLongitude blocks..  I do something similar in my Breadcrumbs app.

-Steve

[Riccardo Risi]

Hi Steve,

it works fine.

I've increased a bit the timer interval of the Clock from 1000 to 2000 msec to reduce the frequency of updating the position.

Regards

Riccardo

[SteveJG]

Once every  1000 ms is once every second, 2000 is once is every two seconds.    I would not update this frequently since the locationsensor part of Maps seems to update only once ever 60 seconds.   Knowing this, you might want to consider updating the Clock ever 65000 ms  ... To avoid 'collisions' of timers, I usually set the timeinterval to something like 1027 ...not something ending in zeros.   It appears a developer can FORCE a Map update by using the set Map1.ShowUser = true in an event handler.

You certainly are aware that the initial satellite fix of your hardware GPS receiver takes 20 or more seconds.  How long depends on where your device is located (in the open, in a city canyon, whether it is raining etc).  My experience is that updating more frequently than every 20 seconds or less  is potentially counter-productive.

Experiment.  Use what works.  Consider, the Map component requires a network connection and your app is dependent on flawless communication. The Map component has no LocationChanged event handler.    However, the stock LocationSensor does.  A developer can use the stock LS (Map has the required blocks) to establish different timings however a developer can use a Clock (as you are at the moment) just as well.   The Maps is quite flexible although it still has some bugs.

--Steve

[Evan Patton]

Note that one feature I added prior to the release was the ability to provide your own LocationSensor to the Map. This allows you to change the distance/time constraints to get more frequent updates.

You could also use the PanTo method on the map, supplying the user lat, long, and map zoom level. This call animates the change and so might be better if the user location changes by a significant amount.

Regards,

Evan

[Riccardo Risi]

Hi Steve, hi Evan,

thanks for your suggests. I want organize some drive test to verify that the map moves with my position choosing the correct timer interval.

After I will inform you.

Regards

Riccardo

[Evan Patton]

Rather than using a clock, if you use a LocationSensor in combination with the map, you could just update the map position when the LocationSensor.LocationChanged event runs.

Evan

[Riccardo Risi]

Yes, it was one of the tests that I had planned.

I'll inform you.

Riccardo

[Vladimir]

Hello! I read the topic and repeated the examples, everything works, I like, thank you. But I have a problem changing the marker icons added through the marker generator. There is a suspicion that the ImageAsset should be not a text but a selection. In the designer it works, and in blocks there is no. Do you know how to do it right?

[Vladimir]

Sorry, my error was that I did not specify the .png file extension. Everything works, but it generates longer now.

[SteveJG]

@Vladimir ...  If you are using Custom markers, yes the developer has to specify the total file information.  In your case icon_orange_48.png I imagine; so the image you 

posted above works if you change icon_orange_48  to  icon_orange_48.png.  

The posting the custom icon naturally will take longer to post.  The smaller the image file size and the smaller the pixel x pixel dimensions of the png image, the better it will post.  If your original image is larger for instance and you allow Maps to 'shrink' it, your device's cpu has to work harder than if the image is more or less 'same size'.

Regards,

Steve

[Vladimir]

I replaced the markers with .svg format files - it works much faster, almost without delay at 100 markers. This format is supported!

[Vladimir]

Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.
https://material.io/icons/

[Vladimir]

An alternative similar project
https://docs.thunkable.com/android/components/location/google-maps.html

[SteveJG]

The alternative suggested by Vladimir only works with Thunkable.  The methodology, though similar, will not work with App Inventor.   App Inventor took a different approach.  The Thunkble mapping tool works with Google Maps; the App Inventor Maps control uses OpenStreetMaps to render maps. If you use Thunkable instead of App Inventor, use the example posted by Vladimir.

MIT has a tutorial in works for App Inventor's  Maps control.  Look for it; it should appear soon.

Another alternative to Maps is to use the Google Static Maps API within App Inventor.   Virtually everything that these mapping controls can do can be done using the Google Static Maps Api.

The Google Maps API is here https://developers.google.com/maps/documentation/static-maps/intro#quick_example .   Many things can be done easier than using either of these mapping components.   A developer can pick and choose whatever fits his/her programming style.

There are plenty of example on how to use the Static Maps API are discussed in the Forum.  Search in the Forum for 'static maps'.  Here is an example  https://groups.google.com/forum/#!searchin/mitappinventortest/static$20map%7Csort:date/mitappinventortest/nu66edTA4IY/gXmRQYrlCQAJ  Look at the post 12/4/17 .

Regards,

Steve