JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<div id="map">
</div>
<div class="info">
    <p>This example tests getting and setting the bbox property on the geomap widget as well as calling various $.geo bbox functions.</p>
    <form action="bbox.html" class="bbox">
        <table>
            <tr class="bbox-prop">
                <th><label for="bbox-prop">.geomap(&quot;option&quot;, &quot;bbox&quot;,</label> </th>
                <td><input id="bbox-prop" name="bbox-prop" type="text" /> <b>)</b> <button type="submit">set</button></td>
            </tr>
            <tr class="bbox-center">
                <th>$.geo.center( bbox )</th>
                <td></td>
            </tr>
            <tr class="bbox-width">
                <th>$.geo.width( bbox )</th>
                <td></td>
            </tr>
            <tr class="bbox-height">
                <th>$.geo.height( bbox )</th>
                <td></td>
            </tr>
        </table>
    </form>
    <p>For this example, the functions below operate on the above text input only. After using them, you can click <b>set</b> to update the map and other info.</p>
    <form action="bbox.html" class="expandBy">
        <table>
            <tr>
                <th>$.geo.expandBy( bbox, </th>
                <td><input type="text" name="dx" value="20000" /> <b>,</b> <input type="text" name="dy" value="20000" /> <b>)</b> <button type="submit">expand</button></td>
            </tr>
        </table>
    </form>
    <form action="bbox.html" class="scaleBy">
        <table>
            <tr>
                <th>$.geo.scaleBy( bbox, </th>
                <td><input type="text" name="scale" value="2" /> <b>)</b> <button type="submit">scale</button></td>
            </tr>
        </table>
    </form>
    <p>This last function, reaspect, forces an aspect ratio (calculation of width divided height) onto the bbox. You can run this but it will be difficult to visually see the effects because the...

CSS

html
{
    font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}

.info 
{
    background: #fff;
    border-radius: 8px;
    box-shadow: -4px 4px #444;
    opacity: .8;
    padding: 8px;
    position: absolute !important;
    right: 16px;
    top: 16px;
}

#map
{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

table 
{
    table-layout: fixed;
    width: 99%;
}

table th
{
    font-weight: bold;
    padding-right: 2px;
    text-align: right;
    width: 35%;
}

.bbox-prop input
{
    font-family: Courier New, Monospace;
    width: 70%;
}

.expandBy input
{
    width: 80px;
}

.scaleBy input, .reaspect input
{
    width: 64px;
}

JavaScript

var $bboxInput = $(".bbox-prop input"); //< bbox input reference
// create a map
var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8,
    bboxchange: function(e, geo) {
        // inside the bboxchange event, update the input with the current bbox
        // the geo object has a bbox property which is the new bbox
        updateBboxDisplay(geo.bbox);
    }
});

$("form.bbox").submit(function() {
    // a new bbox is submitted, update the bbox option
    // since the bbox is a JavaScript array, jQuery's parseJSON method will work
    map.geomap("option", "bbox", $.parseJSON($bboxInput.val()));

    // based on the map view's aspect ratio, the final bbox can be different than the one set
    // update the input and display based on the new/final value
    updateBboxDisplay(map.geomap("option", "bbox"));

    // return false to short circuit the form, we don't want to actually submit
    return false;
});

$("form.expandBy").submit(function() {
    // read the bbox from the input using jQuery's parseJSON method
    var bbox = $.parseJSON($bboxInput.val());

    // read the dx, dy inputs
    var dx = parseFloat($("input[name='dx']").val()),
        dy = parseFloat($("input[name='dy']").val());

    // call expandBy
    // expandBy takes a bbox argument & returns an updated bbox
    bbox = $.geo.expandBy(bbox, dx, dy);

    // only update the bbox input for now and let the user click set
    $bboxInput.val("[" + bbox + "]");

    return false;
});

$("form.scaleBy").submit(function() {
    // read the bbox from the input using jQuery's parseJSON method
    var bbox = $.parseJSON($bboxInput.val());

    // read the scale input
    var scale = parseFloat($("input[name='scale']").val());

    // call scaleBy
    // scaleBy takes a bbox argument & returns an updated bbox
    bbox = $.geo.scaleBy(bbox, scale);

    // only update the bbox input for now and let the user click set
    $bboxInput.val("[" + bbox + "]");

    return...