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
Note