---
layout: example.html
title: Image Filters
shortdesc: Apply a filter to imagery
docs: >
  <p>Layer rendering can be manipulated in <code>prerender</code> and <code>postrender</code> event listeners.
  These listeners get an event with a reference to the Canvas rendering context.
  In this example, the <code>postrender</code> listener applies a filter to the image data.</p>
tags: "filter, image manipulation"
cloak:
  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
---
<div id="map" class="map"></div>
<select id="kernel" name="kernel">
  <option>none</option>
  <option selected>sharpen</option>
  <option value="sharpenless">sharpen less</option>
  <option>blur</option>
  <option>shadow</option>
  <option>emboss</option>
  <option value="edge">edge detect</option>
</select>

---
layout: example.html
title: Image Filters
shortdesc: Apply a filter to imagery
docs: >
  <p>Layer rendering can be manipulated in <code>prerender</code> and <code>postrender</code> event listeners.
  These listeners get an event with a reference to the Canvas rendering context.
  In this example, the <code>postrender</code> listener applies a filter to the image data.</p>
tags: "filter, image manipulation, maptiler"
cloak:
  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
    value: Get your own API key at https://www.maptiler.com/cloud/
---
<div id="map" class="map"></div>
<select id="kernel" name="kernel">
  <option>none</option>
  <option selected>sharpen</option>
  <option value="sharpenless">sharpen less</option>
  <option>blur</option>
  <option>shadow</option>
  <option>emboss</option>
  <option value="edge">edge detect</option>
</select>

Replace Bing layer with MapTiler
Replace Bing layer with MapTiler