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>

CSS

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

.geo-label {
    background-image: url(/favicon.ico);
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
}

JavaScript

var foundShapes = [];
var shapeUnderCursor = null; //< a shape found at the last cursor location

// create a map, setting a custom mode and changing the cursors
var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8,
    cursors: {
        click: "pointer"
    },
    shapeStyle: {
        width: 0,
        height: 0
    },
    move: function(e, geo) {
        foundShapes = map.geomap("find", geo, 8);
        shapeUnderCursor = foundShapes.length > 0 ? foundShapes[0] : null;
        map.geomap("option", "mode", shapeUnderCursor ? "click" : "pan");                   
    },
    click: function(e, geo) {
        if (shapeUnderCursor) {
            alert(shapeUnderCursor.properties.foo);
        }
    }
});

// append a GeoJSON Feature object to also store properties
map.geomap("append", {
    type: "Feature",
    geometry: {
        type: "Point",
        coordinates: [-71.0595678, 42.3604823]
    },
    properties: {
        foo: "bar"
    }
}, "");