JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
Map test.<ul>
    <li>Can zoom, drag, switch layers on/off. Markers can have custom icons and travel routes can be drawn later.</li>
    <li>Choose critters or regions from dropdown lists to show polygons of their areas. Click on the polygons for info.</li>
    <li>Plotting mode: Click to place markers or draw a polygon. Undo/Clear buttons and the co-ords are at the bottom. Save them in a text file or sth.</li>
    <li>[working on this now] Viewing mode: Click anywhere on map to detect region, and list all critters found nearby.</li>
</ul>
<p>Species: <select id='select_animal'></select> 
Region: <select id='select_region'></select></p>

<div id='click-result'></div>

<div id='map_container'></div>

<p>Mode: <select id='mode_select'><option value='plot'>Plotting</option><option value='view'>Viewing</option></select> <button id='undo_plotting'>Undo</button> <button id='reset_plotting'>Clear</button></p>
<textarea id='points_plotting'></textarea>

CSS

#map_container {
  height: 400px;
  width: 600px;
}

#click-result {
    padding: 5px;
    margin: 5px auto;
    border: 1px solid grey;
    background-color: #eee;
}

JavaScript

// Define background images. They can be swapped between.
const mapUrl = "http://milcote.net/images/bestiary/map.jpg",
    mapUrl2 = "http://milcote.net/images/bestiary/map-old.jpg";

/*
- dropdowns maybe should separate types, with disabled options like '--- Dragons' first. sort critters into types.
- as well as 'regions' (provinces? countries?) have other kinds of area, like national parks, private/royal estates, wild danger zones, that may overlap with some regions or not. group them in dropdowns, again.
- have options like 'all regions' or 'all parks' etc.
- have city/town/landmark/lake/etc marker layers in a dropdown, rather than part of controls?
*/

const db = {
    animals: [
        {
            id: 1, name: "Midnight Hill unicorn",
            shortDesc: "",
            polygons: [
                [
                    [111,111], [222,555], [111,456]
                ]
            ]
        },{
            id: 2, name: "Silver Hill pegasus",
            shortDesc: "",
            polygons: [
                [
                    [111,111], [222,555], [111,456]
                ]
            ]
        },{
            id: 3, name: "Midnight Silver horse",
            shortDesc: "",
            polygons: [
                [
                    [111,111], [222,555], [111,456]
                ]
            ]
        },{
            id: 4, name: "Bark-nibbling griffin",
            shortDesc: "",
            polygons: [
                [
                    [111,111], [222,555], [111,456]
                ]
            ]
        },{
            id: 5, name: "Crocus ? wyvern",
            shortDesc: "",
            polygons: [
                [
                    [111,111], [222,555], [111,456]
                ]
            ]
        },{
            id: 6, name: "Emerald wyvern",
            shortDesc: "",
            polygons: [
                [
                    [111,111], [222,555], [111,456]
                ]
            ]
        },{
            id: 7,...