index.html

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<title>Baumkataster Karlsruhe</title>

	<meta charset="utf-8">
    <!--
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    -->
    <!-- iphone zooms on select input. disable with maximum-scale, see
        https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

	<link rel="shortcut icon" type="image/x-icon" href="/baumkataster/trees.ico">

    <!-- local:
    <link rel="stylesheet" type="text/css" href="/baumkataster/css/leaflet.css">
    <script src="leaflet.js" ></script>

    <link rel="stylesheet" type="text/css" href="/baumkataster/css/MarkerCluster.css">
    <link rel="stylesheet" type="text/css" href="/baumkataster/css/MarkerCluster.Default.css">
    <script src="/baumkataster/js/leaflet.markercluster.js" ></script>

    <link rel="stylesheet" type="text/css" href="/baumkataster/css/c3.min.css"/>
    <script src="/baumkataster/js/d3.min.js" crossorigin=""></script>
    <script src="/baumkataster/js/c3.min.js" crossorigin=""></script>
    -->

    <!-- alternative cdn: 
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
      integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
      crossorigin=""></script>

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist//MarkerCluster.css"/>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"/>
    <script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js" crossorigin=""></script>
    -->

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js" crossorigin=""></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js" crossorigin=""></script>

    
    <!-- for c3 diagrams c3 and d3 are needed -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js" crossorigin=""></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.min.js" crossorigin=""></script>

    <!-- custom files -->
	<link rel="stylesheet" type="text/css" href="/baumkataster/css/custom.css"/>
    <script type="text/javascript" src="/baumkataster/js/custom.js"></script>

	
</head>
<body onload="init()">

<div id="nav" class="nav">
<a href="/baumkataster/info.html" alt="Info" target="_blank">Info</a>
</div>

<div id="sorry" class="sorry" style="display:block">
    <p>Sorry</p>
</div>
<div id="works" class="works" style="display:none">

<div id="topInfo">
</div>

<div id="sel" class="sel">
<p style="margin-bottom:0">Stadtteil wählen:</p>
<select id="select" onchange="distSel()">
</select>
</div>

<div id="chart">
</div>

<p id="loading" class="fading">... Loading trees ...</p>

<div id="mapid" class="leaflet-container leaflet-fade-anim leaflet-grab leaflet-touch-drag" tabindex="0">
<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);">
</div>
</div>

</div> 


</body></html>