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="//unpkg.com//dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="//unpkg.com//dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <!-- Load Esri Leaflet from CDN --> <script src="//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: '//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 | |
| //phpschool.com/link/qna_html/220560 ���� SyntaxHighlight�� ���� | ||
�ȳ��ϼ���. jQuery�� ������ ���̾�� ���� ����� ���� ���� �л��Դϴ�. ��ư Ŭ�� ��ġ�� ���� ������ �ٸ��� ����ϰ� �ͽ��ϴ�. �߰������� ��ư Ŭ�� ��ġ�� ���� ���̾ ǥ�õǰ� �߽��ϴ�. �ٸ� ������� Ŭ�� DIV ID�� ���� ��ư�� ��ܿ� ��� ��ư �Ȱ��� ��ġ�� ���� ��ų �� �ִ� ����� ����������? ���� �ߴ� ����� �� ���� DIV�� ���̾ �ھƼ� ����ϰ� �غ��ҽ��ϴ�. ���� �ҽ��� �˷��ֽø� ���������� �ٻڽôٸ� Ű���峪 ������� �˷��ֽ� �� ����������? �����մϴ�. �Ʒ��� ���� �����Դϴ�. [ �� �������� ���� Source ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript" src="//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>
|
- �˻��������
- �ű� ��õ �亯 ��ȸ
- �Խù� 4��