githubmirror/Leaflet

debug/map/popup.html
85 строк2 KB
Roman Zoller
Use https everywhere for OSM links (#6082)
12 мар 2018, 10:46
12 мар 2018, 10:465ffe207
<!DOCTYPE html>
<html>
<head>
  <title>Leaflet debug page</title>

  <link rel="stylesheet" href="../../dist/leaflet.css" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../css/screen.css" />

  <script src="../leaflet-include.js"></script>
</head>
<body>

  <div id="map"></div>

  <script>

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

    var map = L.map('map')
        .setView([50.5, 30.51], 15)
        .addLayer(osm);

    function getRandomLatLng(llbounds) {
      var s = llbounds.getSouth(),
          n = llbounds.getNorth(),
          w = llbounds.getWest(),
          e = llbounds.getEast();

      return L.latLng(
        s + (Math.random() * (n - s)),
        w + (Math.random() * (e - w))
      )
    }

    var features = new L.FeatureGroup([
      L.marker(getRandomLatLng(map.getBounds())),
      L.polyline([
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds())
      ]),
      L.polygon([
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds()),
        getRandomLatLng(map.getBounds())
      ])
    ]);

    features.bindPopup(function(layer){
      return 'Leaflet ID is ' + features.getLayerId(layer);
    }).addTo(map);

    var content = L.DomUtil.create('p', 'custom-popup');
    content.innerText = 'I\'m a red polygon';

    var polygon = L.polygon([
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds())
    ], {
      color: 'red'
    }).bindPopup(content).addTo(map);

    var polyline = L.polyline([
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds()),
      getRandomLatLng(map.getBounds())
    ], {
      color: 'red'
    }).bindPopup('I\'m a red polyline').addTo(map);

    var marker = L.circleMarker(getRandomLatLng(map.getBounds()), {
      color: 'red',
      radius: 25
    }).bindPopup('I\'m a red circle').addTo(map);
  </script>
</body>
</html>