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.centerLngLatLike 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.zoomnumber default 0 | The maximum zoom level of the map (0-24). |
options.hashboolean 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“