Game Map Leaflet

Leaflet is an open-source JavaScript library for building interactive maps. You can use the leaflet to create in-game mini or world maps.

Prerequisites

To use the leaflet library you need first to locate the leaflet.cohtml.js file. This file extends the base functionality of the library and makes it work inside Gameface. The file is located inside Samples/uiresources/library folder.

Getting started

Import the library

Import the leaflet library and our plugin (leaflet.cohtml.js) to the HTML page using the <script> tag.

Note - leaflet.cohtml.js should be always added after leaflet.js!

You can download or use the hosted version of leaflet.js and leaflet.css. For more information check here.

Add a script that defines the navigator.platform right before the import of the scripts.

<head>
    <link rel="stylesheet" href="leaflet.css" />
    <script>
        navigator.platform = 'Win';
    </script>
    <script src="leaflet.js"></script>
    <script src="leaflet.cohtml.js"></script>
</head>

Map container

Add a div element to the body - <div id="map"></div>. This will be the container that leaflet will work with.

Required styles for the map container

Make sure to add a border, width, and height style to the container of the map.

#map {
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    width: 1000px;
    height: 700px;
}

Note - The border is required to be 0px so the library makes correct calculations of the map size.

The map size can be set with responsive units as well but if you do that make sure to include trackResize flag when you initialize the leaflet map so the leaflet calculates the map size correctly when the window has been resized! For more information about this flag check here.

Initialize map

To initialize the map it is enough to do the following:

<script>
    window.requestAnimationFrame(()=>{
        const map = L.map('map').setView([51.505, -0.09], 13);
    });
</script>

L.map('map') will create a new leaflet map inside the container with id ‘map’.

setView will set the map view to chosen geographical coordinates and zoom level.

Note - Always make sure to wait for one frame with requestAnimationFrame before the map initialization. This is required because the map container may not be visible on the first frame and the library will not locate it correctly.

After this step, you can continue with initializing the map elements such as layers, markers, etc.

The next code snippet presents the Quick Start tutorial from the official leaflet site that works inside Gameface.

<html>
<head>
    <link rel="stylesheet" href="leaflet.css" />
    <script>
        navigator.platform = 'Win';
    </script>
    <script src="leaflet.js"></script>
    <script src="leaflet.cohtml.js"></script>
    <style>
        #map {
            border-left-width: 0px;
            border-right-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 0px;
            width: 1000px;
            height: 700px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        window.requestAnimationFrame(() => {
            const map = L.map('map').setView([51.505, -0.09], 13);

            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
                    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1
            }).addTo(map);

            L.marker([51.5, -0.09]).addTo(map)
                .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

            L.circle([51.508, -0.11], 500, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
            }).addTo(map).bindPopup("I am a circle.");

            L.polygon([
                [51.509, -0.08],
                [51.503, -0.06],
                [51.51, -0.047]
            ]).addTo(map).bindPopup("I am a polygon.");

            const popup = L.popup();

            function onMapClick(e) {
                popup
                    .setLatLng(e.latlng)
                    .setContent("You clicked the map at " + e.latlng.toString())
                    .openOn(map);
            }

            map.on('click', onMapClick);
        })
    </script>
</body>
</html>

Known issues

  • Dragging the map with the left mouse button is not working. However, pressing the scroll button and dragging the map around will do the job.
  • Layers Control is not working well because the library uses radio buttons that are not supported by the Gameface.
  • map.setView may not set the view correctly when the map container changes its display property from none to block or inline. The alternative is the map.setViewWhenVisible method that is defined by the leaflet.cohtml.js.
  • Video overlay works just with a single video source. That means videoUrls should be a string and not an array with strings (check the leaflet tutorial).
  • Some button icons are not displayed. The library is using before, after, and not pseudo-selectors that are currently not supported from the Gameface.
← Fix Ratio
JS Polyfills →