Often we get asked what we mean when we say Alpha Anywhere is a “complete” platform for building Mobile and Web applications? We often reply that it is a “complete” because it provides you everything you need on both the front end and the back end and it includes capabilities in areas such as mapping, scheduling, reporting, charting etc. For an overview of Alpha Anywhere please go here For more on mapping, you can go to //www.alphasoftware.com/video-library/ and type in the word maps in the search section To get an idea of the videos covering maps in Alpha Anywhere check out the screens below.
Maps In List Controls Displaying maps in list controls.04:28
Geocoding Addresses and Showing Them on a Map Part 2 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:51
Geocoding Addresses and Showing Them on a Map Part 3 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:14
Geocoding Addresses and Showing Them on a Map Part 4 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:31
Geocoding Addresses and Showing Them on a Map Part 5 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.02:47
Geocoding Addresses and Showing Them on a Map Part 1 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:17
Placing a Map Control Shows how you can place a map control on a Dialog and set basic properties of the map object.02:56
Google Maps/Alternate Views - Adding Markers Using Ajax Part 3 In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code. This video shows how you can turn off the automatic placement of markers on the map, and then use Action Javascript to add markers to the map programmatically. The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the grid row, an Ajax callback is made to place the markers on the map.02:31
Google Maps/Alternate Views - Adding Markers Using Ajax Part 2 In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code. This video shows how you can turn off the automatic placement of markers on the map, and then use Action Javascript to add markers to the map programmatically. The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the grid row, an Ajax callback is made to place the markers on the map.04:49
Google Maps/Alternate Views - Adding Markers Using Ajax Part 1 In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code. This video shows how you can turn off the automatic placement of markers on the map, and then use Action Javascript to add markers to the map programmatically. The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the grid row, an Ajax callback is made to place the markers on the map.04:15
Plot My Position on a Map Part 1 Integrating a mobile device's ability to return location information and a Map are common requirements in a mobile application. In this video, we show how a button can be clicked to retrieve the current location of the device and plot that location on a map control (Postscript: The actions shown in this video are now easier because the Action Javascript action to add a marker to a map now has a new option to use the device's current location).06:06
Plot My Position on a Map Part 2 Integrating a mobile device's ability to return location information and a Map are common requirements in a mobile application. In this video, we show how a button can be clicked to retrieve the current location of the device and plot that location on a map control (Postscript: The actions shown in this video are now easier because the Action Javascript action to add a marker to a map now has a new option to use the device's current location).02:13
Add a Marker to a Map Using Action Javascript New actions have been added to Action Javascript to allow you to perform actions on a map control without having to write your own Javascript code. In these videos, we show how you can add a marker to a map. We also show how you can add bulk markers to a map. When the user selects a state from a dropdown box, we show how to put a marker on the map for each airport in the selected state.05:46
Adding Multiple Markers to a Map - Advanced Example - Bulk Markers Part 1 This example extends the example shown in the previous video, "Adding Multiple Markers to a Map". When the user clicks on a marker, we show how another Ajax callback can be made to populate fields in the Dialog with information about the selected airport. The video shows how the markers are defined with the appropriate onClick behavior. In addition, when a particular marker is clicked, the markers for all of the airports in the state are removed and a single marker for the selected airport is shown. This marker is draggable, so if you move the marker, the latitude and longitude fields for the airport are updated in the corresponding controls on the Dialog.04:41
Adding Multiple Markers to a Map - Advanced Example - Bulk Markers Part 2 This example extends the example shown in the previous video, "Adding Multiple Markers to a Map". When the user clicks on a marker, we show how another Ajax callback can be made to populate fields in the Dialog with information about the selected airport. The video shows how the markers are defined with the appropriate onClick behavior. In addition, when a particular marker is clicked, the markers for all of the airports in the state are removed and a single marker for the selected airport is shown. This marker is draggable, so if you move the marker, the latitude and longitude fields for the airport are updated in the corresponding controls on the Dialog.04:49
Adding Multiple Markers to a Map Part 1 In this video, we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback is made and a query is performed to find all of the airports in the selected state. A Javascript response is then computed on the server. This response calls the .addMarker() method once for each airport in the state. When the response is received by the browser, a marker is added to the map for each airport in the selected state. After that, we show how the .addMarker() method can be used to add multiple markers to the map (Requires addins build 4099 or above).05:00
Adding Multiple Markers to a Map Part 2 In this video, we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback is made and a query is performed to find all of the airports in the selected state. A Javascript response is then computed on the server. This response calls the .addMarker() method once for each airport in the state. When the response is received by the browser, a marker is added to the map for each airport in the selected state. After that, we show how the .addMarker() method can be used to add multiple markers to the map (Requires addins build 4099 or above).03:47
Adding Multiple Markers to a Map Part 3 In this video, we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback is made and a query is performed to find all of the airports in the selected state. A Javascript response is then computed on the server. This response calls the .addMarker() method once for each airport in the state. When the response is received by the browser, a marker is added to the map for each airport in the selected state. After that, we show how the .addMarker() method can be used to add multiple markers to the map (Requires addins build 4099 or above).04:14
Adding Multiple Markers to a Map Using Action Javascript New actions have been added to Action Javascript to allow you to perform actions on a map control without having to write your own Javascript code. In these videos, we show how you can add a marker to a map. We also show how you can add bulk markers to a map. When the user selects a state from a dropdown box, we show how to put a marker on the map for each airport in the selected state.04:59
Animating Markers - Drawing Attention To A Marker When markers are placed on a Google Map, you can specify that the markers should be animated as they are placed on the map. Two animation modes are supported: Drop and Bounce. The video shows how to use the animation effects. You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a grid row and cause the corresponding marker on the map to bounce.01:56
Animating Markers on a Google Map When markers are placed on a Google Map, you can specify that the markers should be animated as they are placed on the map. Two animation modes are supported: Drop and Bounce. The video shows how to use the animation effects. You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a grid row and cause the corresponding marker on the map to bounce.01:11
Geography Search Certain SQL databases (such as SQL Server, Oracle, DB2, MySQL, Postgres) support a special data type called "Location". If a table has a location field (which contains information about a record's position - latitude and longitude), then you can perform "geography" searches. For example, you can find all records that are within x miles of a certain location, or all records that fall within an area marked by the latitude and longitude of 3 or more points. You can put a Google Map in the Search Part of the Grid to make specifying geography searches easy.This video shows how you can put a Google Map into the Search Part, and how Alpha Anywhere automatically generates the Portable SQL to query the database. The video demonstrates both "location" and "radius" searches.04:34
Geography Searches in the List Control If the List control is based on a SQL database that supports the Geography data type (SQL Server, MySQL, Oracle, DB2 all do), then you can perform 'geography' searches on the data in the List. For example, you can find all records that are within (say) 10 miles of your current location.The 'current location' can be automatically supplied by the device. However, you might want to know which records are within a specified radius of a specific point (that you can specify by latitude/longitude value) or address. Additionally, when the results of the search are displayed in the List you might want to group the data in 'logical' groups. For example, the first group might be 'Records within 1 mile of your current location', the next group might be 'Records between 1 and 5 miles from your current location' and so on. In this video we show how this is easily done.12:08
Google Maps/Alternate Views - Customizing the Marker Title and Info Box This video shows how you can customize the "info box" for markers on a map. The "info box" is a small window that pops up when the user clicks on a marker. We show how you can put any HTML you want in the info box, and how the HTML can include placeholders to include data from the corresponding row in the Grid. The HTML can also include Javascript commands. We also demonstrate how you can insert the Javascript to open the corresponding Detail View part for the current record.04:22
Google Maps/Alternate Views - Dynamic Images and Image Sequences When you place a marker on a Google Map, you have full control over the icon that is used. You can specify an expression that evaluates the icon name to use for the marker. Or, you can specify an Xbasic function that will get called for each row in the Grid. The function can compute the marker icon based on the data in the current grid row. You can also use built in image sequences. An image sequence is a set of numbered icons.In this video, we show how you can use an image sequence in the map and also use the same sequence in the Grid itself. This makes it very easy for the user to see a record in the Grid and immediately locate the corresponding marker on the map.02:41
Google Maps/Alternate Views - Dynamic Marker Circles When you place a marker on a map, you have control over the marker icon, bubble help, and info box text. You can also draw a circle around the marker, and you can control the color of the circle and the shading of the interior of the circle. The circle and its color can be used to convey information about the corresponding record in the Grid.The ability to draw a circle around the marker could be used to indicate the service area of a branch location, or it might be used to represent the relative price of a house in a real estate application. For example, for more expensive houses you might draw a larger circle around the marker on the map.In this video, which shows a Grid based on the sample airports database, we draw a circle with a radius proportional to the airport's elevation around each marker on the map.02:46
Google Maps/Alternate Views - Dynamic Marker Icons and Alternate View Layout Options Part 2 Part 2 of a two part series.There are a variety of options for how the Alternate Views and the main Grid can be displayed on the page. Alternate Views can be displayed in accordions, tabs, or on the main page.This video shows how you can even suppress the display of the main Grid part and only show the Alternate view. The map shown has a marker for each row in the Grid. The Grid itself is hidden. However, when the user clicks on a marker, the Detail View for the current row in the hidden Grid is shown.04:17
Google Maps/Alternate Views - Dynamic Marker Icons and Alternate View Layout Options Part 1 Part 1 of a two part series.Icons for each marker placed on the map can be dynamically specified. For example, if record 1 in the Grid was for a customer with a low credit rating, the corresponding icon on the map might be red. If record 2 was for a customer with a high credit rating, the corresponding icon on the map might be green.In this video, we have a Grid based on our sample Airports table. We show how a different map icon is used depending on the elevation of each airport shown in the Grid. We also discuss the different ways in which the Alternate Views can be shown on the Grid. Alternate Views can be shown in Tabs, or they can be shown on the main page alongside the main Grid.04:59
Google Maps/Alternate Views - Introduction Grids have a property called "Alternate Views". An Alternate View is simply another way of displaying the data in the Grid. You can define custom Alternate Views using Xbasic, or you can use one of the built-in Alternate Views. The most commonly used built-in Alternate View is a Google Map. This is used to plot the data displayed in the Grid as markers on a Google Map.In this video, we will show how to define an Alternate View with a Google Map and showing a marker on the map for each record in the Grid. We will also demonstrate how to configure the bubble help for each marker to display data from the corresponding record in the Grid.04:22
Using a Map Marker for Entering New Records in a Grid When you add a new record to a Grid, instead of asking the user to manually enter a value into the latitude and longitude fields in the new record, it might be desirable to allow the user to right click on the map at a specific location, and then automatically set the value of the longitude and latitude field in the row with the position of the marker that was added to the map.In this video, we show how a marker can be used to add data to a new record. We also show how the user can drag the new marker to other locations on the map and update the latitude and longitude fields in the record when the marker is moved.04:49
Updating Location When a Map Marker is Moved In this video, we show how the latitude and longitude value in the current grid row can be updated when the user drags the marker to a new position on the map.03:18
Displaying Driving Directions on a Map Control and Adding a Marker to the Map Part 1 Part 1 of a two part series.When you place a map control on a UX Component, you can call any of the various methods that the map object exposes. There are many methods exposed by the map object. In this video, we show how the .plotRoute() method can be used to display a route and driving directions for a starting and ending address.04:44
Displaying Driving Directions on a Map Control and Adding a Marker to the Map Part 2 Part 2 of a two part series.When you place a map control on a UX Component, you can call any of the various methods that the map object exposes.There are quite a few different methods exposed by the map object. In this video, we show how the .addMarker() method can be used to add a marker to the map.IMPORTANT: In the video, we show that the map object's .viewMarkers() method is called after the .addMarker() method is called. Actually, the .viewMarkers() method should be called in the "onAddComplete" callback event. This ensures that no attempt is made to show the marker before it has actually been placed on the map. The "onAddComplete" event in the settings object should be defined as follows:onAddComplete: function(markerSettings, markerObject) { this.viewMarkers("m1"); }Note also, in the onAddComplete event function we can use "this" to reference the map object.04:57
Adding Multiple Markers to a Map using Client-side Data Action Javascript has a method (in Map Control Actions) to add multiple markers to a map. However, this action assumes that you will be making an Ajax callback to the server to do a query to get the list of latitude/longitude values for each marker you want to add to the map. But what if you already have a list of data on the client-side with latitude/longitude values? Making an Ajax callback to the server under these circumstances is unnecessary.In this video we show how a List control, which has latitude/longitude values for each row, can be used as the data source for the markers and how a marker for each row in the List can be added to the map without having to make an Ajax callback.04:12
Static Map Builder Learn how to use the Static Map Builder to generate the HTML markup for placing a static map in a List Control.01:43
Tour of Methods Exposed by Map Control in Dialog Component Part 2 Part 1 of a 2 part series. Discover the methods available for a map control in the UX component.The UX component has a variety of methods available for manipulating the map control. In this video, we demonstrate how each method works. You can find a listing of methods for the map object in the "Insert Method" dialog.Note: See also the 2 part video series, "Displaying Driving Directions on a Map Control and Adding a Marker to the Map".04:49
Tour of Methods Exposed by Map Control in Dialog Component Part 1 Part 1 of a 2 part series. Discover the methods available for a map control in the UX component.The UX component has a variety of methods available for manipulating the map control. In this video, we demonstrate how each method works. You can find a listing of methods for the map object in the "Insert Method" dialog.Note: See also the 2 part video series, "Displaying Driving Directions on a Map Control and Adding a Marker to the Map".04:50
Sorting Radius Search Result by Distance from the Map Center Point Location data can be searched using what is called a "radius search". A radius search finds all records based on the distance from a fixed location or "center point". Learn how to order radius search results on the distance from the center point.03:43
Plotting Geography Search Results on a Map Part 1 Part 1 of a 2 part series. Learn how to display search results for a Geography Search as markers on a map.Markers can be placed on the map for each record in the search results for a Grid component. You can customize the bubble help, title, and info box for each search result marker. You can also add event handlers for the click action of the markers to open the record in a Detail View in the Grid component.Note: this video series builds off of information presented in the video, "Geography Search".04:08
Plotting Geography Search Results on a Map Part 2 Part 2 of a 2 part series. Learn how to display search results for a Geography Search as markers on a map.Markers can be placed on the map for each record in the search results for a Grid component. You can customize the bubble help, title, and info box for each search result marker. You can also add event handlers for the click action of the markers to open the record in a Detail View in the Grid component.Note: this video series builds off of information presented in the video, "Geography Search".04:51
Scaling a Map in an Alternate View After the User Executes a Query After the user does a query in a Grid component with a Map in an Alternate View, the zoomed scale on the map may be need to be adjusted to display the search results. Learn how to apply map scaling in the afterSearchSubmit event handler in the Grid component.04:38
Proximity Search Control Part 1 A common type of application allows a user to find all store locations, doctors, etc, within a specified radius of a location. This functionality can be added to a Grid Component using a Proximity Search. Learn how to add a Proximity Search to the search part of a Grid Component.Note: see also the video "How to use a Grid to Implement a Typical 'Store Finder' Application", which shows how the same problem can be solved using a map control in the Search Part.04:30
Proximity Search Control Part 2 A common type of application allows a user to find all store locations, doctors, etc, within a specified radius of a location. This functionality can be added to a Grid Component using a Proximity Search. In this video, we compare the Proximity Search to a Map and how the two differ.Note: see also the video "How to use a Grid to Implement a Typical 'Store Finder' Application", which shows how the same problem can be solved using a map control in the Search Part.03:45
How to use a Grid to Implement a Typical 'Store Finder' Application Part 4 Part 4 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:04
How to use a Grid to Implement a Typical 'Store Finder' Application Part 3 Part 3 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:53
How to use a Grid to Implement a Typical 'Store Finder' Application Part 2 Part 2 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:35
How to use a Grid to Implement a Typical 'Store Finder' Application Part 1 Part 1 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:18
Calling Methods of the Google Map Object Directly Part 2 Part 2 of a 2 part series. Learn how to make calls directly into the Google Maps API.The methods of the map control that the previous videos have shown are wrappers around the underlying Google Maps API. Advanced programmers might want to work directly with the Google Maps API. This video shows how you can do this. We show an example of how a marker can be placed on a map using a method of the map control, and then using direct calls to the Google Maps API.01:10
Calling Methods of the Google Map Object Directly Part 1 Part 1 of a 2 part series. Learn how to make calls directly into the Google
Map (49)
Maps In List Controls Displaying maps in list controls.04:28Geocoding Addresses and Showing Them on a Map Part 2 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:51Geocoding Addresses and Showing Them on a Map Part 3 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:14Geocoding Addresses and Showing Them on a Map Part 4 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:31Geocoding Addresses and Showing Them on a Map Part 5 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.02:47Geocoding Addresses and Showing Them on a Map Part 1 This video shows an example of automatically geocoding an address when a record is edited, and then plotting the address on a map. The example also shows how a route that consists of multiple addresses ("waypoints") can be plotted. The example is based on a Dialog with a Repeating Section. The Dialog is bound to two tables: Driver and DeliveryAddresses. Each driver record is linked to multiple delivery addresses, which are shown in the Repeating Section.04:17Placing a Map Control Shows how you can place a map control on a Dialog and set basic properties of the map object.02:56Google Maps/Alternate Views - Adding Markers Using Ajax Part 3 In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code. This video shows how you can turn off the automatic placement of markers on the map, and then use Action Javascript to add markers to the map programmatically. The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the grid row, an Ajax callback is made to place the markers on the map.02:31Google Maps/Alternate Views - Adding Markers Using Ajax Part 2 In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code. This video shows how you can turn off the automatic placement of markers on the map, and then use Action Javascript to add markers to the map programmatically. The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the grid row, an Ajax callback is made to place the markers on the map.04:49Google Maps/Alternate Views - Adding Markers Using Ajax Part 1 In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code. This video shows how you can turn off the automatic placement of markers on the map, and then use Action Javascript to add markers to the map programmatically. The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the grid row, an Ajax callback is made to place the markers on the map.04:15Plot My Position on a Map Part 1 Integrating a mobile device's ability to return location information and a Map are common requirements in a mobile application. In this video, we show how a button can be clicked to retrieve the current location of the device and plot that location on a map control (Postscript: The actions shown in this video are now easier because the Action Javascript action to add a marker to a map now has a new option to use the device's current location).06:06Plot My Position on a Map Part 2 Integrating a mobile device's ability to return location information and a Map are common requirements in a mobile application. In this video, we show how a button can be clicked to retrieve the current location of the device and plot that location on a map control (Postscript: The actions shown in this video are now easier because the Action Javascript action to add a marker to a map now has a new option to use the device's current location).02:13Add a Marker to a Map Using Action Javascript New actions have been added to Action Javascript to allow you to perform actions on a map control without having to write your own Javascript code. In these videos, we show how you can add a marker to a map. We also show how you can add bulk markers to a map. When the user selects a state from a dropdown box, we show how to put a marker on the map for each airport in the selected state.05:46Adding Multiple Markers to a Map - Advanced Example - Bulk Markers Part 1 This example extends the example shown in the previous video, "Adding Multiple Markers to a Map". When the user clicks on a marker, we show how another Ajax callback can be made to populate fields in the Dialog with information about the selected airport. The video shows how the markers are defined with the appropriate onClick behavior. In addition, when a particular marker is clicked, the markers for all of the airports in the state are removed and a single marker for the selected airport is shown. This marker is draggable, so if you move the marker, the latitude and longitude fields for the airport are updated in the corresponding controls on the Dialog.04:41Adding Multiple Markers to a Map - Advanced Example - Bulk Markers Part 2 This example extends the example shown in the previous video, "Adding Multiple Markers to a Map". When the user clicks on a marker, we show how another Ajax callback can be made to populate fields in the Dialog with information about the selected airport. The video shows how the markers are defined with the appropriate onClick behavior. In addition, when a particular marker is clicked, the markers for all of the airports in the state are removed and a single marker for the selected airport is shown. This marker is draggable, so if you move the marker, the latitude and longitude fields for the airport are updated in the corresponding controls on the Dialog.04:49Adding Multiple Markers to a Map Part 1 In this video, we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback is made and a query is performed to find all of the airports in the selected state. A Javascript response is then computed on the server. This response calls the .addMarker() method once for each airport in the state. When the response is received by the browser, a marker is added to the map for each airport in the selected state. After that, we show how the .addMarker() method can be used to add multiple markers to the map (Requires addins build 4099 or above).05:00Adding Multiple Markers to a Map Part 2 In this video, we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback is made and a query is performed to find all of the airports in the selected state. A Javascript response is then computed on the server. This response calls the .addMarker() method once for each airport in the state. When the response is received by the browser, a marker is added to the map for each airport in the selected state. After that, we show how the .addMarker() method can be used to add multiple markers to the map (Requires addins build 4099 or above).03:47Adding Multiple Markers to a Map Part 3 In this video, we show how the map control's .addMarker() method can be called to add markers to the map. The example is based on the sample airports database that contains a record for every airport in the United States. When the user selects a state from a dropdown box, an Ajax callback is made and a query is performed to find all of the airports in the selected state. A Javascript response is then computed on the server. This response calls the .addMarker() method once for each airport in the state. When the response is received by the browser, a marker is added to the map for each airport in the selected state. After that, we show how the .addMarker() method can be used to add multiple markers to the map (Requires addins build 4099 or above).04:14Adding Multiple Markers to a Map Using Action Javascript New actions have been added to Action Javascript to allow you to perform actions on a map control without having to write your own Javascript code. In these videos, we show how you can add a marker to a map. We also show how you can add bulk markers to a map. When the user selects a state from a dropdown box, we show how to put a marker on the map for each airport in the selected state.04:59Animating Markers - Drawing Attention To A Marker When markers are placed on a Google Map, you can specify that the markers should be animated as they are placed on the map. Two animation modes are supported: Drop and Bounce. The video shows how to use the animation effects. You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a grid row and cause the corresponding marker on the map to bounce.01:56Animating Markers on a Google Map When markers are placed on a Google Map, you can specify that the markers should be animated as they are placed on the map. Two animation modes are supported: Drop and Bounce. The video shows how to use the animation effects. You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a grid row and cause the corresponding marker on the map to bounce.01:11Geography Search Certain SQL databases (such as SQL Server, Oracle, DB2, MySQL, Postgres) support a special data type called "Location". If a table has a location field (which contains information about a record's position - latitude and longitude), then you can perform "geography" searches. For example, you can find all records that are within x miles of a certain location, or all records that fall within an area marked by the latitude and longitude of 3 or more points. You can put a Google Map in the Search Part of the Grid to make specifying geography searches easy.This video shows how you can put a Google Map into the Search Part, and how Alpha Anywhere automatically generates the Portable SQL to query the database. The video demonstrates both "location" and "radius" searches.04:34Geography Searches in the List Control If the List control is based on a SQL database that supports the Geography data type (SQL Server, MySQL, Oracle, DB2 all do), then you can perform 'geography' searches on the data in the List. For example, you can find all records that are within (say) 10 miles of your current location.The 'current location' can be automatically supplied by the device. However, you might want to know which records are within a specified radius of a specific point (that you can specify by latitude/longitude value) or address. Additionally, when the results of the search are displayed in the List you might want to group the data in 'logical' groups. For example, the first group might be 'Records within 1 mile of your current location', the next group might be 'Records between 1 and 5 miles from your current location' and so on. In this video we show how this is easily done.12:08Google Maps/Alternate Views - Customizing the Marker Title and Info Box This video shows how you can customize the "info box" for markers on a map. The "info box" is a small window that pops up when the user clicks on a marker. We show how you can put any HTML you want in the info box, and how the HTML can include placeholders to include data from the corresponding row in the Grid. The HTML can also include Javascript commands. We also demonstrate how you can insert the Javascript to open the corresponding Detail View part for the current record.04:22Google Maps/Alternate Views - Dynamic Images and Image Sequences When you place a marker on a Google Map, you have full control over the icon that is used. You can specify an expression that evaluates the icon name to use for the marker. Or, you can specify an Xbasic function that will get called for each row in the Grid. The function can compute the marker icon based on the data in the current grid row. You can also use built in image sequences. An image sequence is a set of numbered icons.In this video, we show how you can use an image sequence in the map and also use the same sequence in the Grid itself. This makes it very easy for the user to see a record in the Grid and immediately locate the corresponding marker on the map.02:41Google Maps/Alternate Views - Dynamic Marker Circles When you place a marker on a map, you have control over the marker icon, bubble help, and info box text. You can also draw a circle around the marker, and you can control the color of the circle and the shading of the interior of the circle. The circle and its color can be used to convey information about the corresponding record in the Grid.The ability to draw a circle around the marker could be used to indicate the service area of a branch location, or it might be used to represent the relative price of a house in a real estate application. For example, for more expensive houses you might draw a larger circle around the marker on the map.In this video, which shows a Grid based on the sample airports database, we draw a circle with a radius proportional to the airport's elevation around each marker on the map.02:46Google Maps/Alternate Views - Dynamic Marker Icons and Alternate View Layout Options Part 2 Part 2 of a two part series.There are a variety of options for how the Alternate Views and the main Grid can be displayed on the page. Alternate Views can be displayed in accordions, tabs, or on the main page.This video shows how you can even suppress the display of the main Grid part and only show the Alternate view. The map shown has a marker for each row in the Grid. The Grid itself is hidden. However, when the user clicks on a marker, the Detail View for the current row in the hidden Grid is shown.04:17Google Maps/Alternate Views - Dynamic Marker Icons and Alternate View Layout Options Part 1 Part 1 of a two part series.Icons for each marker placed on the map can be dynamically specified. For example, if record 1 in the Grid was for a customer with a low credit rating, the corresponding icon on the map might be red. If record 2 was for a customer with a high credit rating, the corresponding icon on the map might be green.In this video, we have a Grid based on our sample Airports table. We show how a different map icon is used depending on the elevation of each airport shown in the Grid. We also discuss the different ways in which the Alternate Views can be shown on the Grid. Alternate Views can be shown in Tabs, or they can be shown on the main page alongside the main Grid.04:59Google Maps/Alternate Views - Introduction Grids have a property called "Alternate Views". An Alternate View is simply another way of displaying the data in the Grid. You can define custom Alternate Views using Xbasic, or you can use one of the built-in Alternate Views. The most commonly used built-in Alternate View is a Google Map. This is used to plot the data displayed in the Grid as markers on a Google Map.In this video, we will show how to define an Alternate View with a Google Map and showing a marker on the map for each record in the Grid. We will also demonstrate how to configure the bubble help for each marker to display data from the corresponding record in the Grid.04:22Using a Map Marker for Entering New Records in a Grid When you add a new record to a Grid, instead of asking the user to manually enter a value into the latitude and longitude fields in the new record, it might be desirable to allow the user to right click on the map at a specific location, and then automatically set the value of the longitude and latitude field in the row with the position of the marker that was added to the map.In this video, we show how a marker can be used to add data to a new record. We also show how the user can drag the new marker to other locations on the map and update the latitude and longitude fields in the record when the marker is moved.04:49Updating Location When a Map Marker is Moved In this video, we show how the latitude and longitude value in the current grid row can be updated when the user drags the marker to a new position on the map.03:18Displaying Driving Directions on a Map Control and Adding a Marker to the Map Part 1 Part 1 of a two part series.When you place a map control on a UX Component, you can call any of the various methods that the map object exposes. There are many methods exposed by the map object. In this video, we show how the .plotRoute() method can be used to display a route and driving directions for a starting and ending address.04:44Displaying Driving Directions on a Map Control and Adding a Marker to the Map Part 2 Part 2 of a two part series.When you place a map control on a UX Component, you can call any of the various methods that the map object exposes.There are quite a few different methods exposed by the map object. In this video, we show how the .addMarker() method can be used to add a marker to the map.IMPORTANT: In the video, we show that the map object's .viewMarkers() method is called after the .addMarker() method is called. Actually, the .viewMarkers() method should be called in the "onAddComplete" callback event. This ensures that no attempt is made to show the marker before it has actually been placed on the map. The "onAddComplete" event in the settings object should be defined as follows:onAddComplete: function(markerSettings, markerObject) { this.viewMarkers("m1"); }Note also, in the onAddComplete event function we can use "this" to reference the map object.04:57Adding Multiple Markers to a Map using Client-side Data Action Javascript has a method (in Map Control Actions) to add multiple markers to a map. However, this action assumes that you will be making an Ajax callback to the server to do a query to get the list of latitude/longitude values for each marker you want to add to the map. But what if you already have a list of data on the client-side with latitude/longitude values? Making an Ajax callback to the server under these circumstances is unnecessary.In this video we show how a List control, which has latitude/longitude values for each row, can be used as the data source for the markers and how a marker for each row in the List can be added to the map without having to make an Ajax callback.04:12Static Map Builder Learn how to use the Static Map Builder to generate the HTML markup for placing a static map in a List Control.01:43Tour of Methods Exposed by Map Control in Dialog Component Part 2 Part 1 of a 2 part series. Discover the methods available for a map control in the UX component.The UX component has a variety of methods available for manipulating the map control. In this video, we demonstrate how each method works. You can find a listing of methods for the map object in the "Insert Method" dialog.Note: See also the 2 part video series, "Displaying Driving Directions on a Map Control and Adding a Marker to the Map".04:49Tour of Methods Exposed by Map Control in Dialog Component Part 1 Part 1 of a 2 part series. Discover the methods available for a map control in the UX component.The UX component has a variety of methods available for manipulating the map control. In this video, we demonstrate how each method works. You can find a listing of methods for the map object in the "Insert Method" dialog.Note: See also the 2 part video series, "Displaying Driving Directions on a Map Control and Adding a Marker to the Map".04:50Sorting Radius Search Result by Distance from the Map Center Point Location data can be searched using what is called a "radius search". A radius search finds all records based on the distance from a fixed location or "center point". Learn how to order radius search results on the distance from the center point.03:43Plotting Geography Search Results on a Map Part 1 Part 1 of a 2 part series. Learn how to display search results for a Geography Search as markers on a map.Markers can be placed on the map for each record in the search results for a Grid component. You can customize the bubble help, title, and info box for each search result marker. You can also add event handlers for the click action of the markers to open the record in a Detail View in the Grid component.Note: this video series builds off of information presented in the video, "Geography Search".04:08Plotting Geography Search Results on a Map Part 2 Part 2 of a 2 part series. Learn how to display search results for a Geography Search as markers on a map.Markers can be placed on the map for each record in the search results for a Grid component. You can customize the bubble help, title, and info box for each search result marker. You can also add event handlers for the click action of the markers to open the record in a Detail View in the Grid component.Note: this video series builds off of information presented in the video, "Geography Search".04:51Scaling a Map in an Alternate View After the User Executes a Query After the user does a query in a Grid component with a Map in an Alternate View, the zoomed scale on the map may be need to be adjusted to display the search results. Learn how to apply map scaling in the afterSearchSubmit event handler in the Grid component.04:38Proximity Search Control Part 1 A common type of application allows a user to find all store locations, doctors, etc, within a specified radius of a location. This functionality can be added to a Grid Component using a Proximity Search. Learn how to add a Proximity Search to the search part of a Grid Component.Note: see also the video "How to use a Grid to Implement a Typical 'Store Finder' Application", which shows how the same problem can be solved using a map control in the Search Part.04:30Proximity Search Control Part 2 A common type of application allows a user to find all store locations, doctors, etc, within a specified radius of a location. This functionality can be added to a Grid Component using a Proximity Search. In this video, we compare the Proximity Search to a Map and how the two differ.Note: see also the video "How to use a Grid to Implement a Typical 'Store Finder' Application", which shows how the same problem can be solved using a map control in the Search Part.03:45How to use a Grid to Implement a Typical 'Store Finder' Application Part 4 Part 4 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:04How to use a Grid to Implement a Typical 'Store Finder' Application Part 3 Part 3 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:53How to use a Grid to Implement a Typical 'Store Finder' Application Part 2 Part 2 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:35How to use a Grid to Implement a Typical 'Store Finder' Application Part 1 Part 1 of a 4 part series. Learn how to create a "Store Finder" application.A feature you may find on many websites is a "store finder". A "store finder" shows you a listing of all the stores nearest a specific location. In this video, we show how you can create a similar feature using a Map Search for a Grid Component.Note: see also the video series "Proximity Search Control", which shows how the same problem can be solved in a different way using a Proximity Search control in the Search Part.04:18Calling Methods of the Google Map Object Directly Part 2 Part 2 of a 2 part series. Learn how to make calls directly into the Google Maps API.The methods of the map control that the previous videos have shown are wrappers around the underlying Google Maps API. Advanced programmers might want to work directly with the Google Maps API. This video shows how you can do this. We show an example of how a marker can be placed on a map using a method of the map control, and then using direct calls to the Google Maps API.01:10Calling Methods of the Google Map Object Directly Part 1 Part 1 of a 2 part series. Learn how to make calls directly into the Google
Comment