landxml/examples/web-converter/index.html

92 lines
5.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LandXML Converter Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/lib/codemirror.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.1/lib/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/mode/javascript/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/codemirror@5.58.3/mode/xml/xml.js"></script>
<script type="text/javascript" src="/bundles/landxml.browser.dev.js" defer></script>
<script type="text/javascript" src="main.js" defer></script>
</head>
<body>
<section class="section">
<div class="container is-fluid">
<h1 class="title">LandXML Converter Example</h1>
</div>
</section>
<section class="section pt-0">
<div class="container is-fluid">
<div class="columns">
<div class="column is-6">
<div class="level is-paddingless">
<div class="level-left">
<h3 class="is-size-3 level-item">LandXML</h3>
</div>
<div class="level-right">
<input type="file" id="file-selector" style="display:none" accept=".xml">
<button id="load-file-button" class="button level-item is-medium">Charger un fichier</button>
</div>
</div>
<textarea id="xml-editor" class="textarea" rows="25"></textarea>
<div class="level mt-3">
<div class="level-left"></div>
<div class="level-right">
<div class="level-item">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Projection</label>
</div>
<div class="field-body">
<div class="field is-narrow">
<div class="control">
<div class="select is-fullwidth">
<select id="projection-select">
<option value="auto_detect">Détection automatique (si possible)</option>
<option value="EPSG:3944">RGF93 (CC44)</option>
<option value="EPSG:3945">RGF93 (CC45)</option>
<option value="EPSG:3947">RGF93 (CC47)</option>
<option value="EPSG:3948">RGF93 (CC48)</option>
<option value="EPSG:3949">RGF93 (CC49)</option>
<option value="EPSG:3950">RGF93 (CC50)</option>
<option value="EPSG:2154">RGF93 (Lambert-93)</option>
<option value="EPSG:27572">NTF (Lambert II)</option>
<option value="EPSG:27573">NTF (Lambert III)</option>
<option value="EPSG:4275">NTF</option>
<option value="EPSG:4326">WGS84</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="transform-button" class="button is-primary is-medium level-item">Transformer</button>
</div>
</div>
</div>
<div class="column is-6">
<h3 class="is-size-3">GeoJSON</h3>
<textarea id="geojson-editor" class="textarea" rows="25"></textarea>
<div class="buttons is-right mt-3">
<a id="download-link" href="#" class="button is-link is-medium">Télécharger</a>
</div>
</div>
</div>
<h3 class="is-size-3">Prévisualisation</h3>
<div class="is-fullwidth" id="map" style="height:800px;"></div>
</div>
</section>
</div>
</body>
</html>