leaflet-locationpicker
Version:
Simple location picker with Leaflet map
179 lines (151 loc) • 4.08 kB
HTML
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>leaflet locationpicker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background:#F2F9FF;
color:#666;
font-family:Arial;
}
a {
color:#f80;
text-decoration:none;
}
a:hover {
color:#635f94;
text-decoration:underline;
}
h1, h2, h3, h4 {
text-transform: capitalize;
white-space:nowrap;
margin: 0 0 .25em 0;
}
h4 {
color: #A1A8AD;
}
#desc {
float: left;
margin-bottom: 1em;
position: relative;
white-space:nowrap;
font-size:1em;
}
.box {
float: left;
min-width: 200px;
margin-right: 20px;
background: #fff;
padding:8px;
border:2px solid #c5cdd4;
border-radius:.45em;
box-shadow: 0 0 16px rgba(100,100,100,0.2);
}
.screenshot {
margin: 20px 20px 20px 0;
float: left;
clear: both;
background: #fff;
box-shadow: 0 0 10px rgba(120,120,120,0.2);
padding: 8px;
}
ul {
font-size:.85em;
margin:0;
padding:0;
}
li {
margin:0 0 2px 18px;
}
#copy {
position:fixed;
z-index:1000;
right:150px;
top:-8px;
font-size:.85em;
padding:8px 8px 2px 8px;
background: #eee;
border: 2px solid #bbb;
border-radius:.7em;
opacity: 0.9;
box-shadow:0 0 8px #aaa;
font-weight: bold;
color:#bbb;
}
#copy a {
color:#888;
text-decoration:none
}
#copy a:hover {
color:#f80
}
#ribbon {
position: absolute;
top: 0;
right: 0;
border: 0;
filter: alpha(opacity=80);
-khtml-opacity: .8;
-moz-opacity: .8;
opacity: .8;
}
</style>
</head>
<body id="home">
<h1>leaflet locationpicker</h1>
<div id="desc">
Simple location picker with Leaflet map
<div style="position:absolute;top:0;right:-120px">
<iframe src="http://ghbtns.com/github-btn.html?user=stefanocudini&repo=leaflet-locationpicker&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
</div>
</div>
<div style="clear:both"></div>
<div class="box">
<h4>Features</h4>
<ul id="ff">
<li>Custom location format, lat,lon separator and precision</li>
<li>Pick Location Latidute,Longitude clicking on map</li>
<li>Bind multiple events or single picker callback</li>
<li>Load picker map from preselected location</li>
<li>Bind callback on location picked</li>
<li>Enable disable location marker</li>
<li>Custom map baselayer</li>
</ul>
</div>
<div class="box">
<h4>Code repositories</h4>
<a target="_blank" href="https://github.com/stefanocudini/leaflet-locationpicker">Github.com</a>
<br />
<a target="_blank" href="https://npmjs.org/package/leaflet-locationpicker">Node Packaged Module</a>
<br />
<h4>Homepage</h4>
<a href="https://opengeo.tech/maps/leaflet-locationpicker/">https://opengeo.tech/maps/leaflet-locationpicker/</a>
<br />
<h4>Download</h4>
<ul>
<li><a href="https://github.com/stefanocudini/leaflet-locationpicker/archive/master.zip">Dev Pack (.zip)</a></li>
</ul>
</div>
<div class="box">
<h4>Examples</h4>
<ul id="examples">
<li><a href="examples/simple.html">examples/simple.html</a></li>
</ul>
</div>
<div class="screenshot">
<img src="images/leaflet-locationpicker.png" />
</div>
<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> • ©<a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
<a href="https://github.com/stefanocudini/leaflet-locationpicker"><img id="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
<div style="clear:both;font-size:.85em;margin-bottom:1em">
<b>For questions and bugs</b> I recommend you to <a href="https://github.com/stefanocudini/leaflet-locationpicker/issues">create New Issue</a> on Github repository.</strong><br />
<br />
This is a micro discussion area for methods of implementation.<br />
</div>
<div id="comments">
<div id="disqus_thread"></div>
</div>
<script type="text/javascript" src="/labs-common.js"></script>
</body>
</html>