How to embed openstreetmap map in a webpage with JavaScript?

Estimated read time 2 min read

To embed an OpenStreetMap map in a webpage using JavaScript, you can use a library such as leaflet.js. Here is a basic example:

  1. Include the leaflet.js library in your HTML file:
<link rel="stylesheet" href=""
<script src=""
  1. Create a div container to hold the map in your HTML file:
<div id="mapid" style="height: 400px; width: 100%;"></div>
  1. Initialize the map and set the view in your JavaScript file:
var map ='mapid').setView([51.505, -0.09], 13);
  1. Add a tile layer to the map:
L.tileLayer('https://{s}{z}/{x}/{y}.png', {
    attribution: '© <a href="">OpenStreetMap</a> contributors'

This code will create a basic map centered at latitude 51.505 and longitude -0.09 with zoom level 13 and a default OpenStreetMap tile layer. You can find more information and examples in the leaflet.js documentation.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply