| 1 | ---
|
| 2 | layout: example.html
|
| 3 | title: Street Labels
|
| 4 | shortdesc: Render street names with a custom render.
|
| 5 | docs: >
|
| 6 | Example showing the use of a custom renderer to render text along a path. [Labelgun](https://github.com/Geovation/labelgun) is used to avoid label collisions. [label-segment](https://github.com/ahocevar/label-segment) makes sure that labels are placed on suitable street segments. [textpath](https://github.com/ahocevar/textpath) arranges the letters of a label along the geometry. The data is fetched from OSM using the [Overpass API](https://overpass-api.de).
|
| 7 | tags: "vector, label, collision detection, labelgun, linelabel, overpass"
|
| 8 | resources:
|
| 9 | - https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
|
| 10 | - https://unpkg.com/rbush@2.0.1/rbush.min.js
|
| 11 | - https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
|
| 12 | - https://unpkg.com/textpath@1.0.1/dist/textpath.js
|
| 13 | - https://unpkg.com/label-segment@1.0.0/dist/label-segment.js
|
| 14 | cloak:
|
| 15 | As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
| 16 | ---
|
| 17 | <div id="map" class="map"></div>
|