Treuchtlingen
/
Test-Geo-Information


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
							<!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="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
	<div id="map" style="width: 1200px; height: 700px"></div>

	<script src="tr-hydrant.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 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)

		var overlays = {
			"Hydranten": hydranten
		};


		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>