or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

Files

docs

core-mapping.mddata-visualization.mdindex.mdinteractive-features.mdplugins.mdutilities-styling.mdvector-layers.md

vector-layers.mddocs/

0

# Vector Layers

1

2

Geometric shapes and paths including polylines, polygons, circles, and rectangles with customizable styling, interactive features, and data integration capabilities.

3

4

## Capabilities

5

6

### Lines and Paths

7

8

Multi-segment lines connecting coordinate points with extensive styling options.

9

10

```python { .api }

11

class PolyLine:

12

"""

13

Create multi-segment lines connecting coordinate points.

14

15

Parameters:

16

- locations: list, coordinate pairs [[lat1, lon1], [lat2, lon2], ...]

17

- popup: str or Popup, popup content for the line

18

- tooltip: str or Tooltip, tooltip content

19

- smooth_factor: float, path smoothing factor (default 1.0)

20

- no_clip: bool, disable clipping to map bounds (default False)

21

- color: str, line color (default 'blue')

22

- weight: int, line width in pixels (default 3)

23

- opacity: float, line opacity (default 1.0)

24

- line_cap: str, line cap style ('butt', 'round', 'square')

25

- line_join: str, line join style ('miter', 'round', 'bevel')

26

- dash_array: str, dash pattern (e.g. '5, 5' for dashed line)

27

- dash_offset: str, dash offset

28

- fill: bool, fill the path (default False)

29

- fill_color: str, fill color

30

- fill_opacity: float, fill opacity (default 0.2)

31

- fill_rule: str, fill rule ('evenodd' or 'nonzero')

32

- bubbling_mouse_events: bool, bubble mouse events (default True)

33

34

Returns:

35

PolyLine instance

36

"""

37

def __init__(

38

self,

39

locations,

40

popup=None,

41

tooltip=None,

42

smooth_factor=1.0,

43

no_clip=False,

44

color='blue',

45

weight=3,

46

opacity=1.0,

47

line_cap='round',

48

line_join='round',

49

dash_array=None,

50

dash_offset=None,

51

fill=False,

52

fill_color=None,

53

fill_opacity=0.2,

54

fill_rule='evenodd',

55

bubbling_mouse_events=True,

56

**kwargs

57

): ...

58

```

59

60

### Polygons

61

62

Closed shapes with fill and stroke styling, supporting complex geometries with holes.

63

64

```python { .api }

65

class Polygon:

66

"""

67

Create closed polygon shapes with customizable fill and border styling.

68

69

Parameters:

70

- locations: list, coordinate pairs for polygon boundary, or list of lists for polygons with holes

71

- popup: str or Popup, popup content

72

- tooltip: str or Tooltip, tooltip content

73

- color: str, border color (default 'blue')

74

- weight: int, border width in pixels (default 3)

75

- opacity: float, border opacity (default 1.0)

76

- line_cap: str, line cap style ('butt', 'round', 'square')

77

- line_join: str, line join style ('miter', 'round', 'bevel')

78

- dash_array: str, border dash pattern

79

- dash_offset: str, border dash offset

80

- fill: bool, fill the polygon (default True)

81

- fill_color: str, fill color (defaults to border color)

82

- fill_opacity: float, fill opacity (default 0.2)

83

- fill_rule: str, fill rule ('evenodd' or 'nonzero')

84

- bubbling_mouse_events: bool, bubble mouse events (default True)

85

- smooth_factor: float, path smoothing factor (default 1.0)

86

- no_clip: bool, disable clipping to map bounds (default False)

87

88

Returns:

89

Polygon instance

90

"""

91

def __init__(

92

self,

93

locations,

94

popup=None,

95

tooltip=None,

96

color='blue',

97

weight=3,

98

opacity=1.0,

99

line_cap='round',

100

line_join='round',

101

dash_array=None,

102

dash_offset=None,

103

fill=True,

104

fill_color=None,

105

fill_opacity=0.2,

106

fill_rule='evenodd',

107

bubbling_mouse_events=True,

108

smooth_factor=1.0,

109

no_clip=False,

110

**kwargs

111

): ...

112

```

113

114

### Rectangles

115

116

Rectangular shapes defined by corner coordinates.

117

118

```python { .api }

119

class Rectangle:

120

"""

121

Create rectangular shapes defined by corner coordinates.

122

123

Parameters:

124

- bounds: list, bounding coordinates [[south, west], [north, east]]

125

- popup: str or Popup, popup content

126

- tooltip: str or Tooltip, tooltip content

127

- color: str, border color (default 'blue')

128

- weight: int, border width in pixels (default 3)

129

- opacity: float, border opacity (default 1.0)

130

- line_cap: str, line cap style ('butt', 'round', 'square')

131

- line_join: str, line join style ('miter', 'round', 'bevel')

132

- dash_array: str, border dash pattern

133

- dash_offset: str, border dash offset

134

- fill: bool, fill the rectangle (default True)

135

- fill_color: str, fill color (defaults to border color)

136

- fill_opacity: float, fill opacity (default 0.2)

137

- fill_rule: str, fill rule ('evenodd' or 'nonzero')

138

- bubbling_mouse_events: bool, bubble mouse events (default True)

139

140

Returns:

141

Rectangle instance

142

"""

143

def __init__(

144

self,

145

bounds,

146

popup=None,

147

tooltip=None,

148

color='blue',

149

weight=3,

150

opacity=1.0,

151

line_cap='round',

152

line_join='round',

153

dash_array=None,

154

dash_offset=None,

155

fill=True,

156

fill_color=None,

157

fill_opacity=0.2,

158

fill_rule='evenodd',

159

bubbling_mouse_events=True,

160

**kwargs

161

): ...

162

```

163

164

### Circles

165

166

Two types of circular shapes: geographic circles with radius in meters, and pixel-based circle markers.

167

168

```python { .api }

169

class Circle:

170

"""

171

Create circles with radius specified in map units (meters).

172

173

Parameters:

174

- location: tuple, center coordinates [lat, lon]

175

- radius: float, circle radius in meters (default 10)

176

- popup: str or Popup, popup content

177

- tooltip: str or Tooltip, tooltip content

178

- color: str, border color (default 'blue')

179

- weight: int, border width in pixels (default 3)

180

- opacity: float, border opacity (default 1.0)

181

- line_cap: str, line cap style ('butt', 'round', 'square')

182

- line_join: str, line join style ('miter', 'round', 'bevel')

183

- dash_array: str, border dash pattern

184

- dash_offset: str, border dash offset

185

- fill: bool, fill the circle (default True)

186

- fill_color: str, fill color (defaults to border color)

187

- fill_opacity: float, fill opacity (default 0.2)

188

- fill_rule: str, fill rule ('evenodd' or 'nonzero')

189

- bubbling_mouse_events: bool, bubble mouse events (default True)

190

191

Returns:

192

Circle instance

193

"""

194

def __init__(

195

self,

196

location=None,

197

radius=10,

198

popup=None,

199

tooltip=None,

200

color='blue',

201

weight=3,

202

opacity=1.0,

203

line_cap='round',

204

line_join='round',

205

dash_array=None,

206

dash_offset=None,

207

fill=True,

208

fill_color=None,

209

fill_opacity=0.2,

210

fill_rule='evenodd',

211

bubbling_mouse_events=True,

212

**kwargs

213

): ...

214

215

class CircleMarker:

216

"""

217

Create circles with radius specified in screen pixels (consistent size regardless of zoom).

218

219

Parameters:

220

- location: tuple, center coordinates [lat, lon]

221

- radius: int, circle radius in pixels (default 10)

222

- popup: str or Popup, popup content

223

- tooltip: str or Tooltip, tooltip content

224

- color: str, border color (default 'blue')

225

- weight: int, border width in pixels (default 3)

226

- opacity: float, border opacity (default 1.0)

227

- line_cap: str, line cap style ('butt', 'round', 'square')

228

- line_join: str, line join style ('miter', 'round', 'bevel')

229

- dash_array: str, border dash pattern

230

- dash_offset: str, border dash offset

231

- fill: bool, fill the circle (default True)

232

- fill_color: str, fill color (defaults to border color)

233

- fill_opacity: float, fill opacity (default 0.2)

234

- fill_rule: str, fill rule ('evenodd' or 'nonzero')

235

- bubbling_mouse_events: bool, bubble mouse events (default True)

236

237

Returns:

238

CircleMarker instance

239

"""

240

def __init__(

241

self,

242

location=None,

243

radius=10,

244

popup=None,

245

tooltip=None,

246

color='blue',

247

weight=3,

248

opacity=1.0,

249

line_cap='round',

250

line_join='round',

251

dash_array=None,

252

dash_offset=None,

253

fill=True,

254

fill_color=None,

255

fill_opacity=0.2,

256

fill_rule='evenodd',

257

bubbling_mouse_events=True,

258

**kwargs

259

): ...

260

```

261

262

## Usage Examples

263

264

### Multi-colored Path

265

266

```python

267

import folium

268

269

# Create a map

270

m = folium.Map(location=[45.52, -122.67], zoom_start=13)

271

272

# Define path coordinates

273

path_coords = [

274

[45.52, -122.68],

275

[45.521, -122.679],

276

[45.522, -122.678],

277

[45.523, -122.677],

278

[45.524, -122.676]

279

]

280

281

# Add styled polyline

282

folium.PolyLine(

283

locations=path_coords,

284

color='red',

285

weight=5,

286

opacity=0.8,

287

dash_array='10, 5',

288

popup='Walking Route',

289

tooltip='5-minute walk'

290

).add_to(m)

291

292

m.save('styled_path.html')

293

```

294

295

### Polygon with Holes

296

297

```python

298

import folium

299

300

m = folium.Map(location=[45.52, -122.67], zoom_start=14)

301

302

# Outer boundary

303

outer_coords = [

304

[45.520, -122.672],

305

[45.524, -122.672],

306

[45.524, -122.668],

307

[45.520, -122.668]

308

]

309

310

# Inner hole

311

hole_coords = [

312

[45.521, -122.671],

313

[45.523, -122.671],

314

[45.523, -122.669],

315

[45.521, -122.669]

316

]

317

318

# Create polygon with hole

319

folium.Polygon(

320

locations=[outer_coords, hole_coords],

321

color='blue',

322

weight=2,

323

fill_color='lightblue',

324

fill_opacity=0.4,

325

popup='Building with Courtyard'

326

).add_to(m)

327

328

m.save('polygon_with_hole.html')

329

```

330

331

### Circles with Different Radius Types

332

333

```python

334

import folium

335

336

m = folium.Map(location=[45.52, -122.67], zoom_start=13)

337

338

# Geographic circle (radius in meters)

339

folium.Circle(

340

location=[45.521, -122.671],

341

radius=200, # 200 meters

342

color='red',

343

fill_color='pink',

344

fill_opacity=0.3,

345

popup='200m radius circle'

346

).add_to(m)

347

348

# Pixel circle marker (consistent size at all zoom levels)

349

folium.CircleMarker(

350

location=[45.523, -122.669],

351

radius=15, # 15 pixels

352

color='blue',

353

fill_color='lightblue',

354

fill_opacity=0.7,

355

popup='15px radius marker'

356

).add_to(m)

357

358

m.save('circles_comparison.html')

359

```

360

361

### Data-driven Styling

362

363

```python

364

import folium

365

import pandas as pd

366

367

# Sample data

368

data = pd.DataFrame({

369

'location': [[45.520, -122.672], [45.522, -122.670], [45.524, -122.668]],

370

'value': [10, 25, 40],

371

'category': ['low', 'medium', 'high']

372

})

373

374

m = folium.Map(location=[45.522, -122.670], zoom_start=14)

375

376

# Color mapping

377

color_map = {'low': 'green', 'medium': 'orange', 'high': 'red'}

378

379

# Add circles with data-driven styling

380

for idx, row in data.iterrows():

381

folium.CircleMarker(

382

location=row['location'],

383

radius=row['value'] / 2, # Scale radius by value

384

color=color_map[row['category']],

385

fill_color=color_map[row['category']],

386

fill_opacity=0.6,

387

popup=f"Value: {row['value']}<br>Category: {row['category']}"

388

).add_to(m)

389

390

m.save('data_driven_circles.html')

391

```

392

393

### Complex Multi-part Geometry

394

395

```python

396

import folium

397

398

m = folium.Map(location=[45.52, -122.67], zoom_start=12)

399

400

# Create a feature group for related shapes

401

shapes_group = folium.FeatureGroup(name='Area Analysis')

402

403

# Main area polygon

404

main_area = [

405

[45.515, -122.675],

406

[45.525, -122.675],

407

[45.525, -122.665],

408

[45.515, -122.665]

409

]

410

411

folium.Polygon(

412

locations=main_area,

413

color='blue',

414

weight=3,

415

fill_color='lightblue',

416

fill_opacity=0.3,

417

popup='Study Area'

418

).add_to(shapes_group)

419

420

# Buffer zone around area

421

buffer_coords = [

422

[45.514, -122.676],

423

[45.526, -122.676],

424

[45.526, -122.664],

425

[45.514, -122.664]

426

]

427

428

folium.Rectangle(

429

bounds=[[45.514, -122.676], [45.526, -122.664]],

430

color='red',

431

weight=2,

432

fill=False,

433

dash_array='5, 5',

434

popup='Buffer Zone'

435

).add_to(shapes_group)

436

437

# Add connecting lines

438

connections = [

439

[[45.520, -122.670], [45.522, -122.668]],

440

[[45.522, -122.672], [45.520, -122.670]]

441

]

442

443

for line in connections:

444

folium.PolyLine(

445

locations=line,

446

color='green',

447

weight=2,

448

opacity=0.8

449

).add_to(shapes_group)

450

451

shapes_group.add_to(m)

452

folium.LayerControl().add_to(m)

453

454

m.save('complex_geometry.html')

455

```