@forter/map NPM

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`