c6b942f185
Two new examples show how custom renderers can be used to render text along paths, and to declutter labels using 3rd party libraries.
21 lines
1.1 KiB
HTML
21 lines
1.1 KiB
HTML
---
|
|
layout: example.html
|
|
title: Street Labels
|
|
shortdesc: Render street names with a custom render.
|
|
docs: >
|
|
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, and [linelabel](https://github.com/naturalatlas/linelabel) makes sure that labels are placed on suitable street segments. The data is fetched from OSM using the [Overpass API](https://overpass-api.de).
|
|
tags: "vector, label, collision detection, labelgun, linelabel, overpass"
|
|
resources:
|
|
- https://cdn.polyfill.io/v2/polyfill.min.js?features=Set"
|
|
- https://unpkg.com/rbush@2.0.1/rbush.min.js
|
|
- https://unpkg.com/labelgun@0.1.1/lib/labelgun.min.js
|
|
cloak:
|
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
|
---
|
|
<!-- Wrap https://npmjs.com/package/linelabel -->
|
|
<script>var module = {};</script>
|
|
<script src="https://unpkg.com/linelabel@0.1.1"></script>
|
|
<script>var linelabel = module.exports;</script>
|
|
|
|
<div id="map" class="map"></div>
|