JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<script src="http://code.jquerygeo.com/jquery.geo-1.0.0-b1.5.min.js"></script>
<div id="map"></div>

CSS

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

.geo-label {
    margin: -2em 0 0 1em;
    padding: .25em .5em;
    font-family: Ariel;
    font-size: .7em;
    color: #444;
    background: #dedede;
    border-radius: 8px;
    border: solid 2px #444;
    width: auto;
    display: none;
}

JavaScript

var map = $("#map").geomap( {
    center: [ 123.19, 13.62 ],
    zoom: 14,
    shapeStyle: {
        color: "#444",
        width: 12,
        height: 12
    },
    move: function( e, geo ) {
        var monument = map.geomap("find", geo, 6);
        if ( monument.length > 0 ) {
            $("." + monument[0].properties.id).closest(".geo-label").show();
        } else {
            $(".geo-label").hide();
        }
    }
} );

var monuments = [ {
    type: "Feature",
    geometry: {
        type: "Point",
        coordinates: [123.187005, 13.627944]
    },
    properties: {
        id: 6115163,
        name: "Naga Metropolitan Cathedral"
    }
}, {
    type: "Feature",
    geometry: {
        type: "Point",
        coordinates: [123.200244, 13.632601]
    },
    properties: {
        id: 6115159,
        name: "Basilica of Our Lady of Penafrancia"
    }
} ];

$.each( monuments, function() {
    map.geomap("append", this, '<span class="' + this.properties.id + '">' +  this.properties.name + '</span>', false);
} );

map.geomap("refresh");