JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<link rel="stylesheet" href="https://publiclab.github.io/Leaflet.DistortableImage/dist/leaflet.distortableimage.css">
<script src="https://publiclab.github.io/Leaflet.DistortableImage/dist/leaflet.distortableimage.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.toolbar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.toolbar.min.css">

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Leaflet.DistortableImage Example</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
  </head>
  <body style="margin:0;">
    <form id="test_form">
      <input type="file" id="inputimage" accept="image/*" />
    </form>

    <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
  </body>
</html>

JavaScript

var map;

    (function() {
      // basic Leaflet map setup
      map = L.map("map").setView([55.266425, -114.595854], 9);
      L.tileLayer(
        "https://{s}.tiles.mapbox.com/v3/anishshah101.ipm9j6em/{z}/{x}/{y}.png",
        {
          maxZoom: 18,
          attribution:
            'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
          id: "examples.map-i86knfo3"
        }).addTo(map);

      // create an image
      img = L.distortableImageOverlay("https://www.rangelandenergy.com/sites/default/files/rangelandcanada.jpg", {
        // (WIP) add a toolbarType field with values 'popup' (default) or 'control'
        // add a keymapper_position field with combinations of 'top', 'bottom', 'left' or 'right'
        // mode: "distort", => default handle
        keymapper: false,
        selected: true
      }).addTo(map);

      L.DomEvent.on(img._image, "load", img.editing.enable, img.editing);
    })();