drag-and-drop.html

---
layout: example.html
title: Drag-and-Drop
shortdesc: Example of using the drag-and-drop interaction.
docs: >
  Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson, 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>
<div><label><input type="checkbox" id="extractstyles" checked /> Extract styles from KML</label></div>
<br />
<div>
  <a id="download" download></a>
  Download samples:&nbsp;&nbsp;
  <button id="download-gpx">GPX</button>
  &nbsp;
  <button id="download-geojson">GeoJSON</button>
  &nbsp;
  <button id="download-igc">IGC</button>
  &nbsp;
  <button id="download-kml">KML</button>
  &nbsp;
  <button id="download-topojson">TopoJSON</button>
</div>
<br />
<div id="info">&nbsp;</div>