<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leaflet test</title>

    <!--leaflet css-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

    <style>
        body{
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100vh;
        }
        img{
            width:100%
        }
        h1{
            font-size: medium;
        }
        .leaflet-popup-content-wrapper{
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

<!--leaflet js-->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/gh/EcoLitDes
/map/points.js"> </script>
<script>
    //Map initialization
    var map = L.map('map').setView([27.316668, 114.183334], 6);

    //mapstyle
    var Stadia_AlidadeSmooth = L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png', {
  maxZoom: 20,
  attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    });

    Stadia_AlidadeSmooth.addTo(map);

    var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
        maxZoom: 20,
        subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
    })

    //googleSat.addTo(map)

    // Layer controller
    // var baseLayers ={
    //"Default": Stadia_AlidadeSmooth,
    //"Satellite": googleSat
    //}
    //var overlays ={
    //"Marker": singleMarker
    //}

    //L.control.layers(baseLayers, overlays, {collapsed: false}).addTo(map);
    var MyIcon = L.icon({
    iconUrl: 'https://github.com/EcoLitDes/map/blob/main/marker.png?raw=true',
    iconSize:     [30, 30], // size of the icon
    iconAnchor:   [15, 15], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -45] // point from which the popup should open relative to the iconAnchor
    });

        L.geoJson(pointJson ,{
    pointToLayer: function(feature,latlng){
      return L.marker(latlng,{icon: MyIcon});
    },
    onEachFeature: function (feature, layer) {
            layer.bindPopup( '<h1>' + feature.properties.name + '</h1>' + '<img src= '+feature.properties.media+'>' + '<br><button class="my-button">Read more +</button>');
            layer.on('popupopen', function() {
      document.querySelector('.my-button').addEventListener('click', function() {
        window.open(feature.properties.url, '_self');
      });
    });
          layer.on('click', function() {
      map.setView(layer.getLatLng(), 10, {animate: true, duration: 1});
    });
  }
}).addTo(map);
</script>
.my-button {
  background-color: #ffffff;
  border: 2px solid #333333;
  border-radius: 22px;
  color: #333333;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s
}

.my-button:hover {
  background-color: #333333;
  color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.