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;
}

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: {
        color: "#d66",
        fillOpacity: 1,
        stroke: "#222",
        width: "12px",
        height:"12px"
    },
    move: function(e, geo) {
        foundShapes = map.geomap("find", geo, 6);
        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"
    }
});