leafletcontrols/leaflet-custom-controls.html at master · larryweya/leafletcontrols · GitHub

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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Leaflet Custom Controls</title>
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="stylesheet" href="css/formhub-map-controls.css" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map { height: 100% }
</style>
</head>
<body onLoad="initialize()">
  <div id="map" style="width:100%; height:100%; margin-top: 40px"></div>
  <script src="js/jquery.min.js"></script>
  <script src="js/leaflet-src.js"></script>
  <script src="js/wax.leaf.min.js"></script>
  <script type="text/javascript" src="js/formhub.controls.filter-by-question.js"></script>
  <script type="text/javascript">
	var mapMarkerIcon = L.Icon.extend({options:{
		iconUrl: 'images/marker-solid-24.png',
		shadowUrl: null,
		iconSize: new L.Point(24, 24),
		shadowSize: null,
		iconAnchor: new L.Point(12, 24),
		popupAnchor: new L.Point(0,-24)
	}});

	var center = {"lat": "-1.271599", "lng": "36.848797"};
  	var leafletMap = null;

	function initialize() {
		var centerLatLng = new L.LatLng(center.lat, center.lng);
		var defaultZoom = 12;
		var layersControl = new L.Control.Layers({}, {}, {collapsed: true});

		leafletMap = new L.Map('map').setView(centerLatLng, defaultZoom);

		wax.tilejson('http://api.tiles.mapbox.com/v3/mapbox.mapbox-streets.jsonp', function(tilejson) {

        	var mapboxstreet = new wax.leaf.connector(tilejson);

			// Add MapBox Streets as a base layer
			leafletMap.addLayer(mapboxstreet);

        	layersControl.addBaseLayer(mapboxstreet, "Mapbox Street");
    	});

		leafletMap.addControl(layersControl);

		var geoJsonLayer = new L.GeoJSON(null, {
			pointToLayer: function (latlng){
		        var marker = new L.Marker(latlng, {
		            icon: new mapMarkerIcon()
		        });
				return marker;
		    }
		});

		$.get('data/data1.json', function(data){
			geoJsonLayer.addGeoJSON(data);
		});

		leafletMap.addLayer(geoJsonLayer);

		var filterByQuestion = new L.Control.FilterByQuestion(geoJsonLayer, [{url: 'data/data2.json', q: 'Do you have children'}, {url: 'data/data3.json', q: 'Do you smoke'}], {collapsed: true});
		leafletMap.addControl(filterByQuestion);
	}
  </script>
</body>
</html>