Kotrotsos/map.html

## map.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="http://0.0.0.0:4000/lib/patterns/leaflet/leaflet.js"></script>
    <script src="http://0.0.0.0:4000/lib/patterns/leaflet/Leaflet.fullscreen.js"></script>
    <script src="http://0.0.0.0:4000/bundles/patterns.js"></script>
    <style>
        #map {
            height: 200px;
            width: 200px;
            background-color: hotpink;
        }

    </style>

</head>
<body>

    <!--<div id="map"></div>-->


        <div id="map-waterhoogte-in-omgeving" class="pat-map-leaflet" data-pat-leaflet="config:http://www.overstroomik.nl/media/defaultlayers.xml;layerNames:Luchtfoto,Wegenkaart,Maximale waterhoogte;legend:#map-waterhoogte-in-omgeving .legend;">
            <img class="sample" src="http://www.overstroomik.nl/media/waterhoogte.png" alt="waterhoogte in nederland">
            <div class="maplocation" data-location="52.3753925312122,4.89078398488074" data-zoom="14"></div>
        </div>

        <div class="legend">
            Maximale waterhoogte in meters
            <img class="map" src="http://www.overstroomik.nl/media/waterhoogtelegenda.svg" alt="Legenda van de kaart" />
        </div>


    <script>
        (function() {
            console.log('init');

            /*
            // Create the map
            var map = L.map('map').setView([39.5, -0.5], 5);

            L.tileLayer(
                    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {maxZoom: 18}).addTo(map);

            L.marker([36.83711,-2.464459]).addTo(map);
            */
        })();
    </script>


</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script src="http://0.0.0.0:4000/lib/patterns/leaflet/leaflet.js"></script>
	<script src="http://0.0.0.0:4000/lib/patterns/leaflet/Leaflet.fullscreen.js"></script>
	<script src="http://0.0.0.0:4000/bundles/patterns.js"></script>
	<style>
	#map {
	height: 200px;
	width: 200px;
	background-color: hotpink;
	}

	</style>

	</head>
	<body>

	<!--<div id="map"></div>-->


	<div id="map-waterhoogte-in-omgeving" class="pat-map-leaflet" data-pat-leaflet="config:http://www.overstroomik.nl/media/defaultlayers.xml;layerNames:Luchtfoto,Wegenkaart,Maximale waterhoogte;legend:#map-waterhoogte-in-omgeving .legend;">
	<img class="sample" src="http://www.overstroomik.nl/media/waterhoogte.png" alt="waterhoogte in nederland">
	<div class="maplocation" data-location="52.3753925312122,4.89078398488074" data-zoom="14"></div>
	</div>

	<div class="legend">
	Maximale waterhoogte in meters
	<img class="map" src="http://www.overstroomik.nl/media/waterhoogtelegenda.svg" alt="Legenda van de kaart" />
	</div>






	<script>
	(function() {
	console.log('init');

	/*
	// Create the map
	var map = L.map('map').setView([39.5, -0.5], 5);

	L.tileLayer(
	'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	{maxZoom: 18}).addTo(map);

	L.marker([36.83711,-2.464459]).addTo(map);
	*/
	})();
	</script>


	</body>
	</html>