MAP

<MAP/> : <BOX/>

The <MAP/> widget is used to display a map. It is based off of 'leaflet.js'.

Attributes

Name	Type	Default	Description	Req
zoom	int	16	The initial zoom level of the map view: 1 - 20.
fit	bool	true	Automtaically adjusts the zoom level to fit <MARKER/>'s within the diplay. Fit is automatically set to true after manual zoom or pan.
height	int	max	The height of the map window. Default sized to fit available space.
width	int	max	The width of the map window. Default sized to fit available space.
latitude	int	null	The starting center point latitude of the map
longitude	int	null	The starting center point longitude of the map

Examples

<MAP id="MAP-1" zoom="5" latitude="34.478900" longitude="-70.232740">	
    
        <LAYER url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"/>
	<LAYER url="https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.jpg90?access_token=<your mapbox api token here>"/>

	<GPS id="gps" autoquery="15"/>	
	<GET id="boats" autoquery="15"> 
		<url><![CDATA[https://fml.dev/assets/templates/examples/data/boats.xml]]></url>
	</GET>	
	<GET id="planes" autoquery="30">
		<url><![CDATA[https://fml.dev/assets/templates/examples/data/planes.xml]]></url>
	</GET>

	<MARKER data="planes" latitude="{data.latitude}" longitude="{data.longitude}">
		<TOOLTIP label="({data.latitude},{data.longitude})">
			<ICON icon="airplanemode_active" color="{data.color}" rotation="{data.heading}"/>
		</TOOLTIP>
	</MARKER>
		
	<MARKER data="boats" width="35" height="35" latitude="{data.latitude}" longitude="{data.longitude}">
		<TOOLTIP label="({data.latitude},{data.longitude})">
			<ICON icon="directions_boat_rounded" color="blue" rotation="{data.heading}"/>
		</TOOLTIP>
		<TEXT value="hello"/>
	</MARKER>
	
	<MARKER data="gps" latitude="{data.latitude}" longitude="{data.longitude}">
		<ICON icon="gps_fixed" color="yellow"/>
	</MARKER>	
</MAP>

(fig. a)

An XML example with the initial camera position set to the users GPS location, and two data driven MARKER points.

(img. a)

See it in Action

Other Widgets You May Find Useful:

• <MARKER/>
• <LAYER/>
• Datasources