iwmlib/lib/pixi/maps/index.html

114 lines
3.6 KiB
HTML
Raw Normal View History

<html>
<head>
<title>PIXI Maps Doctests</title>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta
name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
/>
<link rel="stylesheet" href="../../../css/index.css" />
<script src="../../../dist/iwmlib.js"></script>
<template id="itemTemplate">
<a class="wrapper" href="">
<div class="preview">
<div class="thumbnail-container">
<div class="thumbnail">
<img class="icon" src="thumbnails/notfound.png" />
<!-- <iframe src="" frameborder="0"></iframe> -->
</div>
</div>
<div class="title"></div>
</div>
</a>
</template>
<style>
body {
font-size: 20px;
display: flex;
flex-direction: column;
}
#logo {
left: 0;
position: absolute;
top: 30px;
}
#logo > img {
width: 80px;
}
header > h1 {
text-transform: uppercase;
letter-spacing: 0.05em;
word-spacing: 0.25em;
margin-top: 0;
}
header > p {
max-width: 720px;
line-height: 1.5em;
color: rgb(207, 207, 207);
}
header {
font-family: 'Open Sans', sans-serif;
background-color: #4c4f4f;
color: whitesmoke;
padding: 68px 50px 10px 150px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.container {
justify-content: center;
flex: 1;
height: auto;
min-height: auto;
width: auto;
min-width: auto;
margin: 0 60px;
}
</style>
</head>
<body>
<header>
<h1>
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a
><a href="../index.html">map.</a>Doctests
</h1>
<p>
The maps module provides a handy toolkit to easily integrate maps in an application. Create a full
screen map application by using the mapapp. Utilize the GeoLayer-system to integrate maps in an existing
application. Draw graphics onto the map using geographical positions instead of pixel positions with the
GeoGraphics. Or just use an Overlay to quickly draw icons for each point on a map.
</p>
</header>
<div id="container" class="container"></div>
<script>
const index = new Index(
itemTemplate,
[
['GeoGraphics', 'geographics.html'],
['GeoJson', 'geojson.html'],
['GeoMap', 'map.html'],
['MapApp', 'mapapp.html'],
['MapProjection', 'mapprojection.html'],
['MapViewport', 'mapviewport.html'],
['Overlay', 'overlay.html'],
['Scatter', 'scatter.html']
],
null
)
index.load()
</script>
</body>
</html>