Please enable JavaScript to view this site.

Navigation: Using ASPRunnerPro > Page Designer

Insert map

Scroll Prev Next More

Inserting custom map

You can display the location data as a separate map for each table record or insert a large map to the List page. ASPRunnerPro supports several map providers, so that you can select the suitable one on the Miscellaneous screen -> Map settings.

 

To insert a large map into the List page, follow the instructions below:

 

1.Proceed to the Page Designer and select a page you wish to modify.

 

2.Click Insert - Custom Map on the main toolbar.

global_map1

 

3.Enter the address, latitude, and longitude as text fields. If you do not have a field with address or if you want only to use the Latitude/Longitude fields, comment out the following line:

 

'mapSettings("addressField") = "Address"

 

global_map1_asp

 

If you use Google Maps and store the latitude/longitude information, you can enable the clustering or heat map option.

 

To enable clustering, add this code:

 

mapSettings("heatMap") = true

 

You can use custom clustering icons as well. There is a "source" subfolder in your project folder. Proceed there and create an "images" folder. Place images named m1.png, m2.png, m3.png, m4.png, and m5.png into the folder. These icons are used when the clustering is turned on.

 

An example of a clustered map:

pd_map_clustering

 

To enable the heat map, add this code:

 

mapSettings("heatMap") = true

 

An example of a heat map:

pd_map_heat_map

 

4.Click OK.

 

5.Now the map is added to your web page. You can drag the map element to change its location.

global_map_php2

 

Click Edit map settings to edit the code. Click Remove to delete it.

global_map2_php_3

 
You can also edit the code on the Events page.

 

The result might look like this:

view_as_map_ex2

 

Note: clickable markers on the large map point to the View record page.

How to place a description on each map marker

1. Modify an SQL Query to create a calculated field with a custom name and address:

 

SELECT
       CustomerID,
       CompanyName,
       ContactName,
       ContactTitle,
       Address,
       Lat,
       Lng,
concat(ContactName, '\n', Address) as DisplayOnMap
FROM customers

 

Notice the '\n' argument: it allows you to create multiline descriptions. concat() function is MySQL specific, similar functions exist in all databases.

 

2. Insert a map into the List page. Here are the settings you may use for this specific table:

 

'Longitude and latitude or address field should be specified
'name of the field in the table that used as an address for map
mapSettings["addressField"] = "DisplayOnMap";
 
'name of field in table that used as a latitude for map
mapSettings["latField"] = "Lat";
 
'name of field in table that used as a longitude for map
mapSettings["lngField"] = "Lng";;

 

Latitude and Longitude fields are required, as we use the address field for marker description purposes.

map_with_tooltip

How to display GPS locations (map markers) by date

For example, you have new geo-coordinates that were inserted into the database on a specific day. If you to display the GPS locations (map markers) by date, add a WHERE clause to the SQL query for the table you insert your map into.

 

You can use this query to select today's data:

 

SELECT * FROM mytable WHERE DATE(posted) = CURDATE()

Maps API and geocoding

Maps API providers have limits on the number of geocoding requests you can send per day, and also on a request rate. For example, if you use Google Maps API and have a page with 20 records with a map for each one, only about 10 maps will be displayed. To overcome those limits, you need to open a Premier account with Google that costs $10,000 per year.

 

The solution is to use latitude/longitude pairs instead of addresses for mapping purposes. Enable the Geocoding option on the Choose pages screen to update latitude/longitude information each time when a record is added or updated. The main question is how to convert the existing addresses to latitude/longitude pairs? We have added a small utility to ASPRunnerPro that does the job for you. Here are the instructions:

 

1. Proceed to the table that stores addresses and add two new fields to that table. Fields need to be able to store floating-point numbers. Use Decimal(10,6) or Double in MySQL. In MS Access use Number with 'Field size' Double.

 

2. Proceed to the field that is set up as a Map. Make sure that the Address and Latitude/Longitude fields are selected.

 

3. Proceed to the List page, choose to display all records, select all records, click Edit, then Save all. It takes some time to update all records, but you only need to do this once. New/updated records will update longitude/latitude automatically.

 

To speed up this process, you may want temporarily remove View as Map field from the List page and add it back once the geocoding process is finished.

Page Designer articles:

About Page Designer

Working with common pages

Working with table pages

Working with cells

Working with page elements

Working with additional pages

Page layout and grid type

Tabs and sections

Insert custom button

Insert code snippet

Insert Text / Image

Insert standard button

"View as" settings

"Edit as" settings

"Filter as" settings

See also:

Choose pages screen

Choose fields screen

Miscellaneous settings

Editor screen

Event editor