igMap Demo Backgrounds

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/world-cities"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css"
    rel="stylesheet">
</link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet">
</link>

<div>
    <label for="mapModeSelector">Select Map Mode:&nbsp;</label>
    <select id="mapModeSelector">
    <!-- classic OpenStreetMap street view -->
    <option value="osm">Street (Map)</option>

    <!-- Stamen Terrain tiles you wired to “cycle” -->
    <option value="cycle">Terrain (Map)</option>
  </select>
</div>

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
    <table id="tooltipTable">
      <tr><th colspan="2">${item.Name}, ${item.Country}</th></tr>
      <tr><td>Latitude:</td><td>${item.Latitude}</td></tr>
      <tr><td>Longitude:</td><td>${item.Longitude}</td></tr>
    </table>
  </script>

<div id="map"></div>

CSS

#tooltipTable {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#tooltipTable td,
#tooltipTable th {
    font-size: 9px;
    border: 1px solid #269bc9;
    padding: 3px 7px 2px 7px;
}

#tooltipTable th {
    font-weight: bold;
    font-size: 11px;
    text-align: left;
    background-color: #269bc9;
    color: white;
}

#mapModeSelector {
    margin-bottom: 10px;
}

JavaScript

const STAMEN_TERRAIN =
    "https://tiles.stadiamaps.com/tiles/stamen_terrain/{Z}/{X}/{Y}.png";

function createMap(mode) {
    const opts = {
        width: "700px", height: "500px",
        windowRect: { left: 0.1, top: 0.1, width: 0.7, height: 0.7 },
        series: [{
            type: "geographicSymbol",
            name: "worldCities",
            dataSource: data,
            latitudeMemberPath: "Latitude",
            longitudeMemberPath: "Longitude",
            markerType: "automatic",
            markerCollisionAvoidance: "fade",
            markerOutline: "#b51c1c",
            markerBrush: "#b51c1c",
            showTooltip: true,
            tooltipTemplate: "tooltipTemplate"
        }]
    };

    // pick a basemap
    if (mode === "osm") {
        opts.backgroundContent = { type: "openStreet" };        // default OSM
    } else if (mode === "cycle") {                            // ← NEW
        opts.backgroundContent = {
            type: "openStreet",
            tilePath: STAMEN_TERRAIN                             // custom tiles
        };
    } else {                                                  // “color”
        opts.plotAreaBackground = "#eef";
    }

    // build map 
    $("#map").igMap(opts);

    // attribution
    $(".copyright-notice").remove();          // clean previous
    let notice = "© ";
    if (mode === "osm") {
        notice += "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>";
    } else if (mode === "cycle") {
        notice += "Map tiles © <a href='https://stadiamaps.com/'>Stadia Maps</a> &amp; ";
        notice += "<a href='https://stamen.com/'>Stamen Design</a>, data © ";
        notice += "<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>";
    }
    if (mode !== "color") {
        $("#map .ui-widget-content")
            .append(`<span class='copyright-notice'>${notice}</span>`);
    }
}

$(function...