openlayers map in html page

Solutions on MaxInterview for openlayers map in html page by the best coders in the world

showing results for - "openlayers map in html page"

10 Nov 2020

1<!doctype html>
2<html lang="en">
3  <head>
4    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
5    <style>
6      .map {
7        height: 400px;
8        width: 100%;
9      }
10    </style>
11    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
12    <title>OpenLayers example</title>
13  </head>
14  <body>
15    <h2>My Map</h2>
16    <div id="map" class="map"></div>
17    <script type="text/javascript">
18      var map = new ol.Map({
19        target: 'map',
20        layers: [
21          new ol.layer.Tile({
22            source: new ol.source.OSM()
23          })
24        ],
25        view: new ol.View({
26          center: ol.proj.fromLonLat([37.41, 8.82]),
27          zoom: 4
28        })
29      });
30    </script>
31  </body>
32</html>

source