동적 레이어 팝업 - dongjeog leieo pab-eob

Question

Customizing a popup on a Dynamic Map Layer. Click to render a popup. More information about Map Services can be found in the L.esri.DynamicMapLayer documentation.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Custom Popup with Dynamic Map Layer</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com//dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com//dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com//dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

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

<script>
  var map = L.map('map', {
    minZoom: 3
  }).setView([38.5, -96.8], 4);

  var wildfireRisk = L.esri.dynamicMapLayer({
    url: 'https://maps7.arcgisonline.com/arcgis/rest/services/USDA_USFS_2014_Wildfire_Hazard_Potential/MapServer',
    // server response content type can be either 'json' (default) or 'image'
    f: 'image'
  }).addTo(map);

  wildfireRisk.bindPopup(function (error, featureCollection) {
    if (error || featureCollection.features.length === 0) {
      return false;
    } else {
      return 'Risk Level: ' + featureCollection.features[0].properties.CLASS_DESC;
    }
  });
</script>

</body>
</html>

�Ϲ�
ȸ��
��
ȸ��

HTML/JS/CSS/jQuery/Ajax ��亯
HOME > Q&A > HTML/JS/CSS/jQuery/Ajax ��亯

�˻��

jQuery ��̾� �˾� ��
�۾��	��	�� ¥	13-01-20 14:11	�� ȸ	8514
��URL	https://phpschool.com/link/qna_html/220560 �� SyntaxHighlight��
�ȳ��ϼ��. jQuery�� ̾�� л��Դϴ�. ��ư�� Ŭ��ϸ� �ϳ�� ̾ ��ϰ� �߽��ϴ�. ��ư Ŭ�� ġ�� ٸ�� ϰ� �ͽ��ϴ�. ��ũ��Ʈ�� Ź� �Է�� ʰ� ��� ϴ� �� ȿ��ΰ��? �� ޾Ƽ� append ��Ű�� ΰ��? �߰�� ư Ŭ�� ġ�� ̾ ǥ�õǰ� �߽��ϴ�. �ٸ� �� Ŭ�� DIV ID�� ư�� ܿ� �� ư �Ȱ�� ġ�� ų �� ִ� �� ? �� ߴ� �� DIV�� ̾ �ھƼ� ��ϰ� �غ��ҽ��ϴ�. �� ҽ�� ˷��ֽø� �� ٻڽôٸ� Ű��峪 �� ˷��ֽ� �� ? ��մϴ�. �Ʒ�� Դϴ�. http://jsfiddle.net/Wta7k/ [ �� Source ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <style> li { width: 200px; height: 200px; background-color: #6f6f6f; float: left; list-style: none; margin: 5px;} .box { position: relative; top: 0; right: -160px; width: 40px; height: 40px; background-color: blue;} #layer { position: absolute; display: none; background-color: red; width: 100px; height: 100px; z-index: 999; } #doc { width: 500px; height: 210px; background-color: green; display: block; margin-top: 200px;} </style> </head> <body> <div id="doc"> <ul> <li><div class="box"></div></li> <li><div class="box"></div></li> </ul> </div> <div id="layer"> <div style="position:absolute;top:5px;right:5px"> <span onClick="javascript:document.getElementById('layer').style.display='none'" style="cursor:pointer;font-size:1.5em" title="�ݱ�">X</span> </div> </div> <script type="text/javascript"> $('.box').click(function(e) { var divTop = event.clientY+document.body.scrollTop; var divLeft = event.clientY+document.documentElement.scrollLeft; $('#layer').css({ "top": divTop, "left": divLeft, "position": "absolute" }).show(); }); </script> </body> </html> �亯ä�� 100% ��õ 0 �� 峪��? ��õ 0 �� ȵ��.