JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css">
<div id="map">
</div>
<div class="info">
    <h1>
        shingled</h1>
    <p class="not-mobile">This page tests geomap with shingled services, i.e., fully dynamic services that to not use a tilingScheme. Dynamic services can be set to any scale.</p>
    <p class="not-mobile">If all shingled services are in the same projection, they can be layered and turned on and off at any time by updating and re-setting the services option of the geomap widget or by using the toggle convenience method.</p>
    <p class="not-mobile">The toggle method is preferred because it is faster and you can use it on specific services, e.g., $(&quot;#massgis_interiorforest&quot;).geomap(&quot;toggle&quot;).</p>
    <p class="not-mobile">These services are hosted by MassGIS.</p>
    <div id="layers">
        <input type="checkbox" id="interiorforest" name="layer" value="interiorforest" /><label for="interiorforest">Interior Forest</label>
        <input type="checkbox" id="hydrography" name="layer" value="hydrography" /><label for="hydrography">Hydrography</label>
    </div>
    
</div>

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;
    width: 95%;
}
#map
{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

JavaScript

// Set proj to null because we are working in map units
// (note: this will still be valid but not required in alpha 4)
$.geo.proj = null;

// create a map with three services from MassGIS
// the service types are "shingled"
// they must all be in the same coordinate system to work together
// to keep jQuery Geo's API simple, it will only work in one coordinate system at a time and will not reproject images on the fly
var map = $("#map").geomap({
    services: [
        // this is a basemap and will always be shown
        {
            id: "massgis_basemap",
            type: "shingled",
            getUrl: function(view) {
                return "http://giswebservices.massgis.state.ma.us/geoserver/wms?LAYERS=massgis_basemap&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX=" + view.bbox + "&WIDTH=" + view.width + "&HEIGHT=" + view.height;
            },
            attr: "&copy; 2011 Commonwealth of Massachusetts"
        },

    // this is a forest layer // it has visibility set to "hidden"
        {
            id: "massgis_interiorforest",
            type: "shingled",
            getUrl: function(view) {
                return "http://giswebservices.massgis.state.ma.us/geoserver/wms?LAYERS=massgis%3AGISDATA.INTERIORFOREST_POLY&STYLES=GISDATA.INTERIORFOREST_POLY%3A%3ADefault&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX=" + view.bbox + "&WIDTH=" + view.width + "&HEIGHT=" + view.height;
            },
            attr: "&copy; 2011 Commonwealth of Massachusetts",
            visibility: "hidden"
        },

// this is a water layer //it has visibility set to "hidden"
        {
            id: "massgis_hydrography",
            type: "shingled",
            getUrl: function(view) {
                return...