Skip to content

Map #28

@Angelk90

Description

@Angelk90
Widget Preview
Image Image

I wanted to try inserting a map.
It works in the preview, but when I insert it, nothing appears.

Below is the code I tested:

Html:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="map"></div>

Css:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color:rgb(67, 179, 245);
}

#map {
  height: 100vh;
  width: 100%;
}

Js:

const seoul = [37.5665, 126.9780];
const busan = [35.1796, 129.0756];

const map = L.map('map').setView([36.5, 128.5], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap'
}).addTo(map);

L.marker(seoul)
  .addTo(map)
  .bindPopup("Seoul");

L.marker(busan)
  .addTo(map)
  .bindPopup("Busan");

const line = L.polyline([seoul, busan], {
  color: 'red',
  weight: 4
}).addTo(map);

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions