@forter/map

fc-map

An element by Forter

Usage

<script>
   import '@forter/map';
</script>

<fc-map></fc-map>

Examples

<!-- complex -->
    <fc-map zoom="12" lat="22.3193" long="114.1694" .markers="${{'cities':{'opened':true,'data':[{'position':[51.5074,0.1278],'label':'London','icon':{'iconUrl':'https://img.icons8.com/material-rounded/2x/marker.png','iconSize':[28,28],'iconAnchor':[0,0],'popupAnchor':[14,-7]},'tooltipClass':'darkTooltip'},{'position':[40.7128,-74.006],'label':'New York','icon':{'iconUrl':'https://img.icons8.com/material-rounded/2x/marker.png','iconSize':[28,28],'iconAnchor':[0,0],'popupAnchor':[14,-7]},'tooltipClass':'darkTooltip'},{'position':[22.3193,114.1694],'label':'Hong Kong','icon':{'iconUrl':'https://img.icons8.com/material-rounded/2x/marker.png','iconSize':[28,28],'iconAnchor':[0,0],'popupAnchor':[14,-7]},'tooltipClass':'darkTooltip'}]},'buildings':{'opened':false,'data':[{'position':[22.3034,114.1602],'label':'ICC (Tallest Building in Hong Kong)','icon':{'iconUrl':'https://img.icons8.com/material-rounded/2x/building.png','iconSize':[28,28],'iconAnchor':[0,0],'popupAnchor':[14,-7]},'tooltipClass':'darkTooltip'},{'position':[40.7127,-74.0134],'label':'One World Trade Center (Tallest Building in NYC)','icon':{'iconUrl':'https://img.icons8.com/material-rounded/2x/building.png','iconSize':[28,28],'iconAnchor':[0,0],'popupAnchor':[14,-7]},'tooltipClass':'darkTooltip'},{'position':[51.5045,0.0865],'label':'The Shard (Tallest Building in London)','icon':{'iconUrl':'https://img.icons8.com/material-rounded/2x/building.png','iconSize':[28,28],'iconAnchor':[0,0],'popupAnchor':[14,-7]},'tooltipClass':'darkTooltip'}]}}}">

     <fc-layout slot="buttons" rows=1 columns=3 gap="30px" style="margin: 15px 0px 15px 15px;" flowColumn>
      <fc-button onclick="this.parentNode.parentNode.setView({ lat: 51.5074, long: 0.1278, zoom: 12 })" intent="primary">Go To London</fc-button>
      <fc-button onclick="this.parentNode.parentNode.setView({ lat: 40.7128, long: -74.0060, zoom: 12 })" intent="primary">Go To New York</fc-button>
      <fc-button onclick="this.parentNode.parentNode.flyTo({ lat: 22.3193, long: 114.1694, zoom: 12 })" intent="primary">Fly To Hong Kong</fc-button>
     </fc-layout>

    </fc-map>

Properties

Property	Attribute	Type	Default	Description
lat	lat	string	"51.5074"	lat coordinates. example: 48.8566
layerButtonHidden	layerButtonHidden	string	false	show layers button
long	long	string	"0.1278"	long coordinates. example: 2.3522
markers	markers	any	{}	map's markers. example {"cities":{"opened":true,"data":[{"position":[51.5074,0.1278],"label":"London","icon":{"iconUrl":"https://img.icons8.com/material-rounded/2x/marker.png","iconSize":[28,28],"iconAnchor":[0,0],"popupAnchor":[14,-7]},"tooltipClass":"darkTooltip"},{"position":[40.7128,-74.006],"label":"New York","icon":{"iconUrl":"https://img.icons8.com/material-rounded/2x/marker.png","iconSize":[28,28],"iconAnchor":[0,0],"popupAnchor":[14,-7]},"tooltipClass":"darkTooltip"},{"position":[22.3193,114.1694],"label":"Hong Kong","icon":{"iconUrl":"https://img.icons8.com/material-rounded/2x/marker.png","iconSize":[28,28],"iconAnchor":[0,0],"popupAnchor":[14,-7]},"tooltipClass":"darkTooltip"}]},"buildings":{"opened":false,"data":[{"position":[22.3034,114.1602],"label":"ICC (Tallest Building in Hong Kong)","icon":{"iconUrl":"https://img.icons8.com/material-rounded/2x/building.png","iconSize":[28,28],"iconAnchor":[0,0],"popupAnchor":[14,-7]},"tooltipClass":"darkTooltip"},{"position":[40.7127,-74.0134],"label":"One World Trade Center (Tallest Building in NYC)","icon":{"iconUrl":"https://img.icons8.com/material-rounded/2x/building.png","iconSize":[28,28],"iconAnchor":[0,0],"popupAnchor":[14,-7]},"tooltipClass":"darkTooltip"},{"position":[51.5045,0.0865],"label":"The Shard (Tallest Building in London)","icon":{"iconUrl":"https://img.icons8.com/material-rounded/2x/building.png","iconSize":[28,28],"iconAnchor":[0,0],"popupAnchor":[14,-7]},"tooltipClass":"darkTooltip"}]}}
noZoomControl	no-zoom-control	boolean	false	no zoom control
zoom	zoom	string	"10"	zoom level. example: 2

Events

Event	Description
fly-to	transition a move in map from one location to another. example: { "lat": 22.3193, "long": 114.1694, "zoom": 12, "options": { "animation": true, "duration": 3 } }, method: flyTo
set-view	set the map location. example: { "lat": 51.5074, "long": 0.1278, "zoom": 12, "options": { "animation": true } }, method: setView

CSS Custom Properties

Property	Description
--fc-map-height	height (has to be in px).
--fc-map-z-index	z-index (make sure map is not on top of modal or others) example: 2