Step-1: Initialize Viamap with a single pin

Step-1: Initialize Viamap with single pin (marker)

Introduction

This step-1 guides to initialize Viamap with single pin (marker) and basic controls. It requires beginner or intermediate knowledge of HTML / CSS and JavaScript.

Viamap Initialization

Initialize map by using the following method:

vms.initmap (options: Object)

initmap (options: Object) requires specifying a container ID and other optional options to render a map.

Parameters:

Name	Description
options.container `(HTMLElement \| string)`	The HTML element in which Viamap will render the map, or the element’s string `id` . The specified element must have no children.
options.center `LngLatLike` default `[0,0]`	The initial geographical centerpoint of the map. If `center` is not specified in the constructor options, Mapbox GL JS api will look for it in the map’s style object. If it is not specified in the style, either, it will default to `[0, 0]` Note: Mapbox GL api uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
options.zoom `number` default `0`	The maximum zoom level of the map (0-24).
options.hash `boolean` default `false`	If `true` , the map’s position (zoom, center latitude, center longitude, bearing, and pitch) will be synced with the hash fragment of the page’s URL. For example: `http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60`

Adding Basic Controls

To add controls onto your map use the following method:

map.addControl(control, position?);

For example the following code adds the Navigation Control on the top left corner of the map window:

map.addControl(new mapboxgl.NavigationControl(), 'top-left');

Adding a single pin (marker)

Add a new Marker() on a specified longitude and latitude using mapbox gl js api addTo() method:

var marker = new mapboxgl.Marker().setLngLat([30.5, 50.5]).addTo(map);

Mapbox GL api uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.
addTo() attaches the newly created Marker to the map on the specified longitude and latitude .

Setting zoom level

Zoom level can be set with the following method:

setZoom(zoom, eventData)

Parameters

Name	Description
zoom`(number)`	The zoom level to set (0-20).
eventData`(Object)`	Additional properties to be added to event objects of events triggered by this method.

Final Code

Here is the final code that initializes Viamap with single pin (marker) and basic controls.

A working example can be seen here.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title> Viamap vektordemo </title>
        <script src="viamapstrap.js"> </script>
    </head>

    <body style="margin:0; padding:0;">
        <nav id="menu"> </nav>
        <div id='map' style="position:absolute; top:0; bottom:0; width:100%;"> </div>
        <script>
            var lnglat = [9.912028, 57.043528],
                zoom = 15.6;

            vms.initmap({
                    container: 'map',
                    hash: false,
                    'center': lnglat,
                    'zoom': zoom
                })
                .then(function(map) {
                    map.addControl(new mapboxgl.NavigationControl(), 'top-left');

                    new mapboxgl.Marker()
                        .setLngLat(lnglat)
                        .addTo(map);

                    map.setCenter(lnglat)
                        .setZoom(zoom)
                });
        </script>
    </body>

</html>

Do you want to try Viamap? Download “starter kit“