summaryrefslogtreecommitdiff
path: root/html/index.html
blob: d72b4f5d6e81147f9f5e186f5431a7e7dadd6b18 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!--
   index.html
   
   Copyright 2021 joak <joak@nospace.at>
   
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.
   
   
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>map nospace.at</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="/static/leaflet.css" />
	<script src="/static/leaflet.js"></script>
	<script src="/static/leaflet.ajax.min.js"></script>
	<script src="data.geojson" type="text/javascript"></script>

	<style>
	#mapid { 
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100vH; 
		width: 100vW;
	}

	.scan{
		width: 300px;
	}
	
	.leaflet-popup-content{
		width: 320px
		margin: 13px 13px;
	}
	.leaflet-popup-content-wrapper{
		border-radius: 0px;
		border: 1px solid #000;
		position: fixed;
		text-align: center;
		margin-bottom: 20px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) !important;
		box-shadow: none;
	}
	.leaflet-popup-tip-container{
		display: none;
	}
	a.leaflet-popup-close-button{
		display: none;
	}
	</style>
</head>

<body>
	<h1>map</h1>
	 <div id="mapid"></div>

</body>
	<script>
		
	var penIcon = L.icon({
		iconUrl: 'static/images/pen.png',
		iconSize:     [26, 43],
		iconAnchor:   [13, 21],
		popupAnchor:  [-3, -76]
	});
	var imageIcon = L.icon({
		iconUrl: 'static/images/image.png',
		iconSize:     [26, 43],
		iconAnchor:   [13, 21],
		popupAnchor:  [0, 0]
	});
		

	var themap = L.map('mapid').setView([48.112646337861406, 16.214275360107425], 13);
	//L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png', {
	L.tileLayer('https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png	', {
		maxZoom: 18,
		attribution: '',
		id: '',
		tileSize: 512,
		zoomOffset: -1
	}).addTo(themap);
	

	//var geojson = new L.GeoJSON.AJAX("data.geojson");
	//geojson.on('data:loaded').addTo(themap);
	function popUp(f,l){
		var out = [];

		
		if (f.properties){
			if(f.properties.type == "sound"){
				l.bindPopup("<audio src=files/"+f.properties.file+" controls></audio><br />");
				l.options.icon = penIcon;
			}
			if(f.properties.type == "image"){
				l.bindPopup("<img class='scan' src=files/"+f.properties.file+"><br />");
				l.options.icon = imageIcon;
			}
		}
	}
	function theIcon(f,l){
		console.log(f,l);
	}
	
	var geojson = new L.GeoJSON.AJAX("data.geojson",{onEachFeature:popUp, icon: theIcon}).addTo(themap);
	</script>
</html>