hexagonal-grid/example.html at master · igobrilhante/hexagonal-grid · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<html lang="en">
<head>
<meta charset="utf-8">
<title>Hexagonal Grid Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Igo Brilhante">

<link rel="stylesheet"    href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="./hexagonalgrid.js"></script>
<style>
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }

            .over-map {
                z-index: 99;
            }


            .leaflet-top .leaflet-control{
                margin-top: 60px;
            }
        </style>

<script>
        GUEST = "http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpg"
</script>

</head>
<body>

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

            <script>

                var map = L.map('map').setView([43.72166389,10.39539444], 14);
                var popup = null

                L.tileLayer(GUEST, {attribution: '', styleId: 997}).addTo(map);


                function highlightFeature(e) {
                    var layer = e.target;

                    layer.setStyle({
                        weight: 5,
                        color: '#666',
                        dashArray: '',
                        fillOpacity: 0.7
                    });

                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    }
                }

                function resetHighlight(e) {
                    geojson.resetStyle(e.target);
                }

                function click(e) {
                    popup = L.popup()
                                    .setLatLng(e.latlng)
                                    .setContent("Hexagon ID: "+e.target.feature.properties.id)
                                    .openOn(map);
                }

                function onEachFeature(feature, layer) {
                    layer.on({
                        mouseover: highlightFeature,
                        mouseout: resetHighlight,
                        click: click
                    });
                }

                function style(feature) {
                    return {
                        fillColor: 'blue',
                        weight: 2,
                        opacity: 1,
                        color: 'white',
                        dashArray: '3',
                        fillOpacity: 0.5
                    };
                }


                grid = H.hexagonalGrid([10.39466389,43.72234167],5,2, 0.008);


                var geojson = L.geoJson(grid, {
                                    style: style,
                                    onEachFeature: onEachFeature
                }).addTo(map);
            </script>
</body>
</html>