Drawing on the map

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

// Set options
const marker = new nmapsgl.Marker({
color: "#FFFFFF",
draggable: true
}).setLngLat([30.5, 50.5])
.addTo(map);

let map = new nmapsgl.Map({
	container: 'map',
	center: [-96, 37.8],
	zoom: 3,
	style: 'Streets'
});

let geojson = {
	type: 'FeatureCollection',
	features: [
		{
			type: 'Feature',
			geometry: {
				type: 'Point',
				coordinates: [-77.032, 38.913]
			}
		},
		{
			type: 'Feature',
			geometry: {
				type: 'Point',
				coordinates: [-122.414, 37.776]
			}
		}
	]
};

// add markers to map
geojson.features.forEach((marker) => {
	// create a HTML element for each feature
	let el = document.createElement('div');
	el.className = 'marker';
 
	// make a marker for each feature and add to the map
	new nmapsgl.Marker(el)
		.setLngLat(marker.geometry.coordinates)
		.addTo(map);
});

.marker {
	background-image: url('custom_marker.png');
	background-size: cover;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	cursor: pointer;
}

const markerHeight = 50, markerRadius = 10, linearOffset = 25;
const popupOffsets = {
'top': [0, 0],
'top-left': [0,0],
'top-right': [0,0],
'bottom': [0, -markerHeight],
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
'left': [markerRadius, (markerHeight - markerRadius) * -1],
'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};
const popup = new nmapsgl.Popup({offset: popupOffsets, className: 'my-class'})
.setLngLat(e.lngLat)
.setHTML("<h1>Hello World!</h1>")
.setMaxWidth("300px")
.addTo(map);

const coordinates = [
[-122.483696, 37.833818],
[-122.483482, 37.833174],
[-122.483396, 37.8327]
];
 
let polyline = new nmapsgl.Polyline()
.setPath(coordinates)
.addTo(map);

// Set options
let polyline = new nmapsgl.Polyline({
strokeColor: '#888',
strokeWeight: 8
}).setPath(coordinates)
.addTo(map);// add the polyline to the map

const coordinates = [
[-67.13734, 45.13745],
[-70.11617, 43.68405],
[-70.98176, 43.36789],
[-70.30495, 45.91479],
[-68.2343, 47.35462],
[-67.13734, 45.13745]
];
 
let polygon = new nmapsgl.Polygon()
.setPath(coordinates)
.addTo(map);

// Set options
let polygon = new nmapsgl.Polygon({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
}).setPath(coordinates)
.addTo(map);

const bounds = {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
};
 
let rectangle = new nmapsgl.Rectangle()
.setBounds(bounds)
.addTo(map);

// Set options
let rectangle = new nmapsgl.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
}).setBounds(bounds)
.addTo(map);

const center = [-116.243, 33.678];
 
let circle = new nmapsgl.Circle()
.setCenter(center)
.addTo(map);

// Set options
let circle = new nmapsgl.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
radius: 10
}).setCenter(center)
.addTo(map);

map.addControl(new nmapsgl.RulerControl({
unit: 'Imperial'
}));