githubmirror/Leaflet

debug/map/popup.html
74 строки2 KB
i.taratuhin
fix vector in ie8
08 май 2015, 15:03
08 май 2015, 15:0357d7dff
<!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 type="text/javascript" src="../../build/deps.js"></script>
  <script src="../leaflet-include.js"></script>
</head>
<body>

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

  <script type="text/javascript">

    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="http://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);

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

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

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

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

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

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