Map with markers

Search on map is a separate mode for the table component.
View an example of a map with points


How to configure the map

To display the map, you must do the following: 

  1. Create a table with columns (all rows)
    1. id-ID of the point (for possible operations with the point),
    2. lat-longitude of the point,
    3. lng - latitude of the point,  
    4. description - the description that appears in the window when the point marker is clicked,
    5.  tooltip-tooltip when hovering over a point,  
    6. radius - radius of the region. 
    7. canDrag - if 1, points can be moved around the map and new values can be saved in the database (when moving, updateItemField is called with code=marker, id=point id and value = " lat|/lng")
    8. Additionally, you can add the following columns (stylizing points and regions) 
      1. fillColor: '#a0bfeb',
      2. fillOpacity: 0.2,
      3. strokeColor: '#000000',
      4. strokeOpacity: 1,
      5. strokeWeight: 1
  2. Write the GetItems request
    1. MapShowUserLocation bit-show the user on the map? 
    2. MapUserImageUrl nvarchar(256) - path to the user's image.
    3. MapShowAllRegions bit-show all locations serving all points
    4. MapShowLocationInRange bit-show the location where the user gets to
    1. SELECT 1 (with columns id int, lat nvarchar(32), lng nvarchar(32), description nvarchar(max), tooltip nvarchar(128), radius int)
    2. in SELECT 3, set ViewType= 'map', add parameters in SELECT 3
Note: 
  1. The map will only work if you specified the Google API key in GetLayout (GeoLocationKey).
  2. You can insert snippets of components (for example, a Form) in the marker description. Components are initialized by clicking on the marker.
  3. In General, moments with coordinates are passed in the lat||lng||text_address format (in UpdateField, lat||lng is passed)
  If points can be moved, we also implement the UpdateField procedure

CREATE PROCEDURE [dbo].[crud_testMap_updateField]
	@itemID int,
	@field nvarchar(64),
	@value nvarchar(max),
	@username nvarchar(64)
AS
BEGIN

if(@field = 'marker') begin
	declare @lat nvarchar(32), @lng nvarchar(32)
	set @lat = [dbo].[str_splitPart](@value,  '||',	1	)
	set @lng = [dbo].[str_splitPart](@value,  '||',	2	)

	update tst_addresses
    set lat = @lat, lng = @lng
    where id = @itemID
end else begin
	select 'Невалидный код свойства' Msg, 0 Result
	return
end
select '' Msg, 1 Result

END

In SELECT 3, you can also pass the mapOptions parameter, which sets the map settings as JSON. Documentation on Google map tinctures - https://developers.google.com/maps/documentation/javascript/interaction

Configuration example: 

-- 3 SELECT Advanced table settings
select 'map' ViewType,
	0 MapShowUserLocation,
        '' MapUserImageUrl,
        0 MapShowAllRegions,
        0 MapShowLocationInRange,
        1 HideTitleCount, ' ' Title,
            '{
                "center":{"lat": 39.913818, "lng": 116.363625},
                "zoom": 4,
                "fitBound": false,
                "afterMoveMarkerRefreshContainer": "body"

            }' MapOptions

Custom settings (which are not related to the Google maps plugin). 

  • fitBound - if 1, the map will adapt the zoom and area to display all the selected points. 
  • afterMoveMarkerRefreshContainer-specify the content selector to update after moving the point (for example, to update a form or table on a page).
  • mapCenter-sets the map center as {"lat": 12.34234, "lng": 43.2321}

Possible problems with the map

If a gray rectangle appears instead of the map and there are no errors in the console, it means that you need to set the zoom and mapCenter parameters. Example: 

-- SELECT 3
SELECT  '{
        	"zoom":9,
            "mapCenter": {"lat":55.760533, "lng": 37.487028}
        }' MapOptions

The alternative is to use fitBound=1 (in this case, the map (its center and zoom) will adapt to the points on it). 

Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
{sp-shortDemostandLinks}

SQL-tool for creating personal accounts on the site

The essence of the approach and the history of the creation of Falcon Space
Web platform for creating personal accounts

Falcon Space Platform

This is a reduction in the cost of ownership

at the expense of fewer people to support

This is a quick change

while using the program

This is a modern interface

full adaptation for mobile devices

MS SQL web applications. Affiliate program for developers and web studios

You can develop on your own or collaborate with us on Falcon Space web development using only SQL and HTML.
See examples with SQL code
Platform documentation
Working on MS SQL Server
Note