JSFiddle - React, Tailwind, and code Playground

by essoduke chang

HTML

<script src="https://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.3.13.min.js"></script>
<div id="info"></div>
<div id="map"></div>

CSS

#map{width:100%;height:100vh}
.label{background:rgba(0,0,0,0.5);color:white;padding:4px}

JavaScript

var map = $('#map');

map.tinyMap({
    'zoom' : 12,
    'autoLocation': function (loc) {
        map.tinyMap('modify', {
            'marker': [{
                'id': 'HELLO',
                'addr': [
                    loc.coords.latitude,
                    loc.coords.longitude
                ],
                'newLabel': 'Hello',
                'newLabelCSS': 'label'
            }]
        });
    },
    'event': {
        'zoom_changed': function () {
            $('#info').html('Zoom level: ' + this.getZoom());
        }
    }
});