Treuchtlingen
/
Test-Geo-Information


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!DOCTYPE html>
<html>
<head>
	<title>Leaflet GeoJSON Example</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="pure/0.6.0/pure-min.css">
	<!--[if lte IE 8]>
		<link rel="stylesheet" href="pure/0.6.0/grids-responsive-old-ie-min.css">
	<![endif]-->
	<!--[if gt IE 8]><!-->
		<link rel="stylesheet" href="pure/0.6.0/grids-responsive-min.css">
	<!--<![endif]-->

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
	<div class="grids-example">
		<div class="pure-g">
			<div class="pure-u-1">Ganze Zeile</div>

			<div class="pure-u-1 pure-u-md-1-4">
				Navigation
			</div>
			<div class="pure-u-1 pure-u-md-3-4">
				<div id="map" style="height: 700px"></div>
			</div>
		</div>
	</div>

	<script src="tr-hydrant.js" type="text/javascript"></script>
	<script src="tr-ladesaeulen.js" type="text/javascript"></script>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

	<script>
		var hydranten = new L.LayerGroup();
		var ladesaeulen = new L.LayerGroup();

		var osm = L.tileLayer(
				'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
				{
					attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
				}
			);

		var baseLayers = {
				'OSM': osm,
			};


		function onEachFeature(feature, layer) {
			var popupContent = "<p>" + feature.geometry.type + "</p>";

			if (feature.properties && feature.properties.popupContent) {
				popupContent += feature.properties.popupContent;
			}

			layer.bindPopup(popupContent);
		}


		hypois = L.geoJson(regions, {
			style: function (feature) {
				st = { weight: 1, color: "#000", opacity: 1, fillColor: "#ff0", fillOpacity: 0.5 }
				return st
			},

			onEachFeature: onEachFeature,

			pointToLayer: function (feature, latlng) {
				return L.circleMarker(latlng, {
					radius: 8,
					fillColor: "#ff7800",
					color: "#000",
					weight: 1,
					opacity: 1,
					fillOpacity: 0.8
				});
			}
		}).addTo(hydranten)

		lspois = L.geoJson(regions2, {
			style: function (feature) {
				st = { weight: 1, color: "#000", opacity: 1, fillColor: "#f00", fillOpacity: 0.5 }
				return st
			},

			onEachFeature: onEachFeature,

			pointToLayer: function (feature, latlng) {
				return L.circleMarker(latlng, {
					radius: 8,
					fillColor: "#ff7800",
					color: "#000",
					weight: 1,
					opacity: 1,
					fillOpacity: 0.8
				});
			}
		}).addTo(ladesaeulen)


		var overlays = {
			"Hydranten": hydranten,
			"Ladesäulen": ladesaeulen,
		};


		var map = L.map('map',
				{
					center: [48.9547, 10.9083],
					zoom: 16,
					layers: [osm, hydranten],
				}
			);

		L.control.layers(baseLayers, overlays).addTo(map);
	</script>
</body>
</html>