107 lines
3.9 KiB
HTML
107 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0054)http://leafletjs.com/examples/quick-start-example.html -->
|
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<title>Document Simple Example</title>
|
|
<meta charset="utf-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="../../dist/leaflet.css">
|
|
<link rel="stylesheet" href="../../plugins/draw-0.2.4/dist/leaflet.draw.css">
|
|
<link rel="stylesheet" href="../../src/scrollbar/jquery.mCustomScrollbar.css">
|
|
<style type="text/css"></style></head>
|
|
<body>
|
|
<script src="../../dist/leaflet-src.js"></script>
|
|
<script src="../../plugins/draw-0.2.4/dist/leaflet.draw.js"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="../../src/scrollbar/jquery-1.11.0.min.js"><\/script>')</script>
|
|
<script src="../../src/scrollbar/jquery.mCustomScrollbar.js"></script>
|
|
|
|
<!--The "controls" div holds map controls suchs as the Zoom button and
|
|
it's separated from the map in order to have the controls on the top
|
|
of the page all the time.
|
|
|
|
The "document-container" div is the actual display of the document, is
|
|
what the user sees and it should be no larger than the screen size.
|
|
|
|
The "map" div is the actual document and it has the document's size
|
|
and width, this being inside the smaller "document-container" will
|
|
cause the content to overflow, creating scrollbars -->
|
|
<div id="toolbar" align="center">
|
|
<p style="margin:0px">This space is a placeholder for the future toolbar</p>
|
|
</div>
|
|
<div id="document-container" style="top:100px">
|
|
<div id="clipboard-container"><textarea id="clipboard"></textarea></div>
|
|
<div id="map"></div>
|
|
<div id="scroll-container">
|
|
<div id="mock-document">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function getParameterByName(name) {
|
|
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
|
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
|
results = regex.exec(location.search);
|
|
return results === null ? "" : results[1].replace(/\+/g, " ");
|
|
}
|
|
|
|
var filePath = getParameterByName('file_path');
|
|
var host = getParameterByName('host');
|
|
var edit = getParameterByName('edit') === 'true';
|
|
if (filePath === '') {
|
|
alert('Wrong file_path, usage: file_path=/path/to/doc/');
|
|
}
|
|
if (host === '') {
|
|
alert('Wrong host, usage: host=ws://localhost:9980');
|
|
}
|
|
|
|
var map = L.map('map', 'scroll-container', 'mock-document', {
|
|
center: [0, 0],
|
|
zoom: 10,
|
|
minZoom: 1,
|
|
maxZoom: 20,
|
|
server: host,
|
|
doubleClickZoom: false
|
|
});
|
|
|
|
////// Controls /////
|
|
map.addControl(L.control.buttons());
|
|
map.addControl(L.control.search());
|
|
map.addControl(L.control.permissionSwitch());
|
|
map.addControl(L.control.zoom());
|
|
map.addControl(L.control.parts());
|
|
map.addControl(L.control.statusIndicator());
|
|
|
|
////// Document layer ////
|
|
var docLayer = new L.TileLayer('', {
|
|
doc: filePath,
|
|
useSocket : true,
|
|
edit: edit,
|
|
readOnly: false
|
|
});
|
|
map.addLayer(docLayer);
|
|
|
|
////// Scrollbar /////
|
|
(function($){
|
|
$(window).load(function(){
|
|
$("#scroll-container").mCustomScrollbar({
|
|
axis: 'yx',
|
|
theme: 'dark-thick',
|
|
scrollInertia: 0,
|
|
callbacks:{
|
|
onScroll: function(){
|
|
docLayer._onScrollEnd(this);
|
|
},
|
|
whileScrolling: function(){
|
|
docLayer._onScroll(this);
|
|
},
|
|
alwaysTriggerOffsets:false
|
|
}
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
</body></html>
|