JMap Init

by xerxesnoble

HTML

<script src="https://ggp.js-network.co:9443/cms/demo/app/jmap/JMap-v1.0.0-rc16.min.js"></script>
<link rel="stylesheet" href="https://ggp.js-network.co:9443/cms/demo/app/jmap/JMap-v1.0.0-rc16.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="map"></div>

CSS

body{
    padding:0;
    overflow:hidden;
}
/*This is a child <div> used for styling */
 .JMap-storeLabel {
    -webkit-transition: opacity 1s;
    opacity: 0.8;
    font-family:"FlamaCondensed";
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
}
/*An extra <span> element if you want to create a caret or need a place to put an icon*/
 span.JMap-storeLabel-span {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 5px solid #202020;
}
/*The class that is added to the losing .JMap-storeLabel during collision detection*/
 div.JMap-storeLabel-hidden {
    /*display:none;*/
    opacity:0;
}

JavaScript

JMap.init({
    url: "https://ggp.js-network.co:9443",
    id: 526,
    locationId: 1059,
    apiUser: "apiUser",
    apiPass: "apiPass",
    apiKey: "apiKey",
    code: "en",
    config: {},
    container: "#map",
    allMapsRendered: onMapsRendered
});

function onMapsRendered(b) {
    window.building = b;

    building.addMapInteraction("click", function (destination, waypoint) {
        this.resetUnitHighlight();
        this.highlightUnitsBy('destination', true, destination.id, "#fff");
    });

}