Using Goong Maps with Goong JS

Goong JS is a JavaScript library for interactive, customizable vector maps on the web. It is part of the Goong GL ecosystem. To get started with Goong JS or any of our other building blocks, get your own API key.

Quickstart

<script src='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js'></script>
<link href='https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css' rel='stylesheet' />

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
goongjs.accessToken = 'your maptiles key here';
var map = new goongjs.Map({
container: 'map',
style: 'https://tiles.goong.io/assets/goong_map_web.json', // stylesheet location
center: [105.83991, 21.02800], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>

Reading this documentation

This documentation is divided into several sections:

• Map. The Map object is the map on your page. It lets you access methods and properties for interacting with the map's style and layers, respond to events, and manipulate the user's perspective with the camera.
• Properties and options. This section describes Goong GL JS's global properties and options that you might want to access while initializing your map or accessing information about its status.
• Markers and controls. This section describes the user interface elements that you can add to your map. The items in this section exist outside of the map's canvas element.
• Geography and geometry. This section includes general utilities and types that relate to working with and manipulating geographic information or geometries.
• User interaction handlers. The items in this section relate to the ways in which the map responds to user input.
• Sources. This section describes the source types Goong GL JS can handle besides the ones described in the Goong Style Specification.
• Events. This section describes the different types of events that Goong GL JS can raise.

Each section describes classes or objects as well as their properties, parameters, instance members, and associated events. Many sections also include inline code examples and related resources.

Goong CSS

The CSS referenced in the Quickstart is used to style DOM elements created by Mapbox code. Without the CSS, elements like Popups and Markers won't work.

Including it with a <link> in the head of the document via the jsdelivr.net CDN is the simplest and easiest way to provide the CSS, but it is also bundled in the Goong module, meaning that if you have a bundler that can handle CSS, you can import the CSS from goong-js/dist/goong-js.css.

Note too that if the CSS isn't available by the first render, as soon as the CSS is provided, the DOM elements that depend on this CSS should recover.

Dependencies

The dependencies for Goong GL JS (.js & .css) are distributed via jsdelivr.net.

Examples