OSM

by Yunus Gaziev

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>

CSS

*,
*:after,
*:before {
	min-width: 0;
	min-height: 0;
}

#map {
	position: relative;
	border-radius: 16px;
	
	height: 320px;
}

JavaScript

const map = L.map('map').setView([37.781814, -122.404740], 18);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var polylinePoints = [
    [37.781814, -122.404740],
    [37.781719, -122.404637],
    [37.781489, -122.404949],
    [37.780704, -122.403945],
    [37.780012, -122.404827],
];
  
var polyline = L.polyline(polylinePoints, {
	color: '#99ca3c',
    weight: 10,
    opacity: 1,
    smoothFactor: 1,
}).addTo(map);