Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
ConfigurableToolType:
Exclude<ToolType,"link">
PlaceFrame:
"frame-circle"|"frame-square"|null
color:
string
The color of the element in some CSS-like format.
renderHoles:
boolean
Whether to render the holes of the highlighted area.
opacity:
number
The opacity of the highlighter, between 0 and 1.
showInspector:
boolean
Whether to show the tool inspector.
false
size:
number
The Tools part of the Felt SDK allows you to let users draw elements on the map by programmatically selecting a tool for them.
You can also set the settings for individual tools, to allow you to change the styling of the resulting element.
To create elements programmatically, use the ElementsController instead.
InputToolSettings: {
tool:"pin"; } &Partial<> | {tool:"line"; } &Partial<> | {tool:"route"; } &Partial<> | {tool
ToolSettingsChangeEvent: {
tool:"pin"; } & | {tool:"line"; } & | {tool:"route"; } & | {tool:"polygon"; } & | {tool:"circle"
// Change the settings for the line tool
felt.setToolSettings({
tool: "line",
strokeWidth: 8,
color: "#448C2A"
});
// Start using the line tool
felt.setTool("line");
// Put down the tool
felt.setTool(null);PlaceSymbol:
"dot"|"square"|"diamond"|"triangle"|"x"|"plus"|"circle-line"|"circle-slash"|"star"|"heart"|"hexagon"|"octagon"|"pedestrian"|"bicycle"|"wheelchair"|"airport"|"car"|"bus"|"train"|"truck"|"ferry"|"sailboat"|"electric-service"|"gas-service"|"blood-clinic"|"badge"|"traffic-light"|"traffic-cone"|"road-sign-caution"|"person"|"restroom"|"house"|"work"|"letter"|"hotel"|"factory"|"hospital"|"religious-facility"|"school"|"government"|"university"|"bank"|"landmark"|"museum"|"clothing"|"shopping"|"store"|"bar"|"pub"|"cafe"|"food"|"park"|"amusement-park"|"camping-tent"|"cabin"|"picnic"|"water-refill"|"trailhead"|"guidepost"|"viewpoint"|"camera"|"us-football"|"football"|"tennis"|"binoculars"|"swimming"|"zap"|"battery-full"|"battery-half"|"battery-low"|"boom"|"radar"|"wind-turbine"|"solar-panel"|"antenna"|"telephone-pole"|"oil-well"|"oil-barrel"|"railroad-track"|"bridge"|"lighthouse"|"lock-closed"|"lock-open"|"wifi"|"trash"|"recycle"|"tree"|"flower"|"leaf"|"fire"|"mountain"|"snowy-mountain"|"volcano"|"island"|"wave"|"hot-springs"|"water"|"lake"|"ocean"|"animal"|"bird"|"duck"|"dog"|"fish"|"beach"|"wetland"|"sun"|"moon"|"cloud"|"partial-sun"|"rain"|"lightning"|"snowflake"|"wind"|"snow"|"fog"|"sleet"|"hurricane"|"warning"|"parking"|"info"|"circle-exclamation"|"circle-triangle"|"circle-x"|"circle-plus"|`:${string}:`& {}
ToolType:
"circle"|"highlighter"|"line"|"link"|"marker"|"note"|"pin"|"polygon"|"route"|"text"
"polygon"Partialtool: "circle"; } & Partial<tool: "marker"; } & Partial<tool: "highlighter"; } & Partial<tool: "text"; } & Partial<tool: "note"; } & Partial<The parameters for changing the settings of each tool.
tool: "marker"; } & tool: "highlighter"; } & tool: "text"; } & tool: "note"; } & The result of listening for changes to the settings of each tool.
"#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535"false0.5color:
string
The color of the element in some CSS-like format.
strokeOpacity:
number
A value between 0 and 1 that describes the opacity of the element's stroke.
strokeWidth:
number
The width of the element's stroke in pixels.
strokeStyle:
"solid"|"dashed"|"dotted"
The style of the element's stroke.
distanceMarker:
boolean
Whether a distance marker is shown at the midpoint of the path.
showInspector:
boolean
Whether to show the tool inspector.
false
color:
string
The color of the element in some CSS-like format.
align:
"center"|"left"|"right"
The alignment of the text, either left, center or right.
style:
"light"|"italic"|"regular"|"caps"
The style of the text, either italic, light, regular or caps.
showInspector:
boolean
Whether to show the tool inspector.
false
color:
string
The color of the element in some CSS-like format.
opacity:
number
The opacity of the marker, between 0 and 1.
size:
number
The size of the marker, used in conjunction with the zoom to determine the actual size of the marker.
showInspector:
boolean
Whether to show the tool inspector.
false
stringThe color of the element in some CSS-like format.
strokeOpacity:
number
A value between 0 and 1 that describes the opacity of the element's stroke.
strokeWidth:
number
The width of the element's stroke in pixels.
strokeStyle:
"solid"|"dashed"|"dotted"
The style of the element's stroke.
radiusMarker:
boolean
Whether to show a marker on the circle that indicates the radius
fillOpacity:
number
The opacity of the circle's fill.
showInspector:
boolean
Whether to show the tool inspector.
false
stringThe color of the element in some CSS-like format.
frame:
null|"frame-circle"|"frame-square"
The frame that is rendered around the Place's symbol. This is only available for non-emoji symbols.
showInspector:
boolean
Whether to show the tool inspector.
false
symbol:
PlaceSymbol
The symbol that is rendered for the Place.
This can be an emoji by using colon-enclosed characters (e.g. ":smiley:") or one of the symbols available in Felt's symbol library.
You can see the available symbols in the Felt UI when editing a Place by hovering a symbol and converting the tooltip to kebab-case. For example, the "Oil barrel" symbol is oil-barrel.
afterCreation:
"select"|"enter name"|"add another"
What to do after creating the Place element.
"enter name": Enter a name for the Place, focusing the name input.
"add another": Add another Place, leaving the tool still selected.
"select": Puts the tool down and selects the new Place element.
"enter name"
stringThe color of the element in some CSS-like format.
align:
"center"|"left"|"right"
The alignment of the text, either left, center or right.
style:
"light"|"italic"|"regular"|"caps"
The style of the text, either italic, light, regular or caps.
showInspector:
boolean
Whether to show the tool inspector.
false
stringThe color of the element in some CSS-like format.
strokeOpacity:
number
A value between 0 and 1 that describes the opacity of the element's stroke.
strokeWidth:
number
The width of the element's stroke in pixels.
strokeStyle:
"solid"|"dashed"|"dotted"
The style of the element's stroke.
distanceMarker:
boolean
Whether a distance marker is shown at the midpoint of the path.
routingMode:
null|"driving"|"cycling"|"walking"|"flying"
Whether this represents a route, and if so, what mode of transport is used.
If this is null, the path is not considered to be a route, so while it can have a distanceMarker, it will does not have a start or end cap.
endCaps:
boolean
Whether or not to show Start and End caps on the path. This is only available if the routingMode is set.
showInspector:
boolean
Whether to show the tool inspector.
false
"#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535"12"solid"false"#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535""center""regular""#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535"110"#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535"12"solid"false0.25"#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535""#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535""center""regular""#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535"12"solid"falsenullfalseToolSettingsMap: {
pin:PinToolSettings;line:LineToolSettings;route:RouteToolSettings;polygon:PolygonToolSettings;circle:CircleToolSettings;marker:MarkerToolSettings;highlighter:HighlighterToolSettings;text:TextToolSettings;note: ; }
pin:
line:
route:
polygon:
circle:
marker:
highlighter:
text:
note:
stringThe color of the element in some CSS-like format.
strokeOpacity:
number
A value between 0 and 1 that describes the opacity of the element's stroke.
strokeWidth:
number
The width of the element's stroke in pixels.
strokeStyle:
"solid"|"dashed"|"dotted"
The style of the element's stroke.
fillOpacity:
number
The opacity of the polygon's fill, between 0 and 1.
areaMarker:
boolean
Whether to show an area marker on the polygon.
showInspector:
boolean
Whether to show the tool inspector.
false
"#ABC123";
"rgb(255, 0, 0)";
"hsl(200, 100%, 50%)";"#C93535"12"solid"0.25falseThe Tools controller allows you to let users draw elements on the map.
setTool(
tool:null| ):void
Sets the tool to use for drawing elements on the map.
Use this method to programmatically activate drawing tools for users. When a tool is set, users can draw elements on the map using that tool. Set to null to deactivate all drawing tools.
void
getTool():
Promise<null| >
Gets the current tool, if any is in use.
Use this method to check which drawing tool is currently active, if any.
Promise<null | >
A promise that resolves to the current tool, or null if no tool is in use.
onToolChange(
args: {handler: (tool:null| ) =>void; }):VoidFunction
Listens for changes to the current tool.
Use this to react to tool changes, such as updating your UI to reflect the currently active drawing tool.
VoidFunction
setToolSettings(
settings: ):void
Sets the settings for the current tool.
Use this method to configure how drawing tools behave, such as setting colors, stroke widths, or other tool-specific properties.
void
getToolSettings<
T>(tool:T):Promise<[T]>
Gets the settings for the chosen tool.
Use this method to retrieve the current configuration of a drawing tool.
Promise<[T]>
A promise that resolves to the settings for the chosen tool.
onToolSettingsChange(
args: {handler: (settings: ) =>void; }):VoidFunction
Listens for changes to the settings on all tools.
Use this to react to tool setting changes, such as updating your UI to reflect the current tool configuration.
VoidFunction
A function to unsubscribe from the listener.
tool
null | ToolType
The tool to set, or null to deactivate all tools.
args
{ handler: (tool: null | ToolType) => void; }
-
args.handler
(tool: null | ToolType) => void
This callback is called with the current tool whenever the tool changes.
settings
The settings to set for the specified tool.
T extends ConfigurableToolType
tool
T
The tool to get settings for.
args
{ handler: (settings: ToolSettingsChangeEvent) => void; }
args.handler
(settings: ToolSettingsChangeEvent) => void
// Set the tool to "marker"
await felt.setTool("marker");
// put down the tool
await felt.setTool(null);const tool = await felt.getTool(); // "marker", "polygon", etc.const unsubscribe = felt.onToolChange({
handler: tool => console.log(tool),
});
// later on...
unsubscribe();// Set the settings for the marker tool
await felt.setToolSettings({
tool: "marker",
color: "#FE17",
});const settings = await felt.getToolSettings("marker");const unsubscribe = felt.onToolSettingsChange({
handler: settings => console.log(settings),
});
// later on...
unsubscribe();