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>
<div id="legend">
    <ul>
        <li class="Dermatology"><label><input type="checkbox" name="Dermatology" checked="checked" /> Dermatology</label></li>
        <li><span class="swatch Gastrointestinal"></span> Gastrointestinal</li>
        <li><span class="swatch General"></span> General</li>
        <li><span class="swatch Respiratory"></span> Respiratory</li>
        <li><span class="swatch STD"></span> STD</li>
        <li><span class="swatch Vector-Borne"></span> Vector Borne</li>
    </ul>
</div>

CSS

body {
    font-family: Arial;
}

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

/* styles for all labels (dots in this case) on all services */
.geo-label {
    width: 8px;
    height: 8px;
    margin-top: -8px;
    margin-left: -8px;
    border-radius: 4px;
}

#legend {
    background: white;
    border-radius: 8px;
    padding: 8px;
    position: fixed;
    top: 8px;
    right: 64px;
}

#legend li {
    border-radius: 4px;
    color: #555;
    font-weight: bold;
    padding: 1px 4px;
}

#legend input {
    vertical-align: middle;
}

.swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
}

/* category/service specific labels (the space between service class and .geo-label is required) */
li.Dermatology {
  	background-image: linear-gradient(to right, purple, #fff 25%);
}

.Dermatology .geo-label, .Dermatology.swatch {
    background: purple;
}

.Gastrointestinal .geo-label, .Gastrointestinal.swatch {
    background: brown;
}

.General .geo-label, .General.swatch {
    background: green;
}

.Respiratory .geo-label, .Respiratory.swatch {
    background: blue;
}

.STD .geo-label, .STD.swatch {
    background: red;
}

.Vector-Borne .geo-label, .Vector-Borne.swatch {
    background: black;
}

JavaScript

// an array of category names to use in the query and as CSS class names for services
// since CSS class names can't have spaces or plusses, I'm using a hyphen & converting during the query and when we get a result
var categories = ["Dermatology", "Gastrointestinal", "General", "Respiratory", "STD", "Vector-Borne"];

// build an array of jQuery Geo service objects:
// one base service
var serviceDefs = [
    // basemap service
    {
        "class": "basemap",
        type: "tiled",
        src: "http://otile1.mqcdn.com/tiles/1.0.0/osm/{{:zoom}}/{{:tile.column}}/{{:tile.row}}.png"
    }    
];

// plus one shingled placeholder service (src: "") service for each category
// the category services will get the CSS class defined when they're created with the map
$.each(categories, function () {
    serviceDefs.push({
        // "this" is name of category here
        "class": this,
        type: "shingled",
        src: ""
    });
});

// create a map
var map = $("#map").geomap({
    center: [-60, 0],
    zoom: 4,
    mode: "drawPoint",
    services: serviceDefs,
    shape: function(e, geo) {
        // search each service for a diag, stop when we find one
        var diags = null;
        $.each(categoryServices, function() {
			diags = this.geomap("find", geo, 8);
            if (diags.length > 0) {
                // here, diags[0] is a GeoJSON object we appended
                // the properties property has all the original data
                alert(diags[0].properties.diag_name);
                return false;
            }
        });
    }
});

// references to the created jQuery Geo services DOM elements (no longer definitions)
// filled in during $.each below so that each category has a property name on this object
// think of this as a reference cache for future use when appending data
// will look like: categoryServices = { Respiratory: DOM_Element, General: DOM_Element, ... }
var categoryServices = { };

// set the shapeStyle of each category service to...