Witam,
potrzebuję narysować siatkę na mapie (plastra miodu) z informacją o położeniu środka sześciokąta i jego aktualnej wielkości. W momencie przybliżania siatka ma się zagęszczać, a po oddaleniu rozszerzać. W momencie kliknięcia na dany sześciokąt wyświetla się informacja.
http://szablony.freeware.info.pl/background.html
W jaki sposób mogę taką siatkę stworzyć ?
Witaj, obecnie za mało informacji podałeś, aby spróbować Ci pomóc.
- Jaka platforma? Przeglądarka czy Android/iOS?
- Jaka biblioteka do wyświetlania map? Leaflet, OpenLayers, osmdroid, Mapbox GL, Tangram czy coś jeszcze innego?
Chodzi o mapy w przeglądarce, biblioteka to Leaflet.
Coś podobnego znalazłem tutaj github.com/euoia/hex-grid.js/tree/master z tym że nie jest to dla map. http://gps.wroclaw.pl/mapy.html
Chodzi tutaj o stworzenie czegoś ala heat mapy, z możliwością kolorowania pól (plastrów miodu) w zależności od jakiejś wartości a po kliknieciu w pole wykonywać jakiś skrypt JS. Przez to potrzebuje wiedzieć w jakim miejscu jest pole żeby wiedzieć że gdy w polu są 2 pkt to mogę je uśrednić i zamalować pole na jakiś tam kolor.
Biblioteka leaflet-hexbin robi coś takiego, z tym że opiera się to na zliczaniu punktów wpadających w element siatki.
Nie robi dokładnie tego czego potrzebujesz, ale zawsze możesz ją sobie przerobić.
dzieki 
mam z ta biblioteka jeden mały problem w przerobieniu. Nie umiem pobrac srodków połozenia pól. Do biblioteki jest dołączona biblioteka d3-hexabin.js https://github.com/d3/d3-hexbin ma ona w sobie wbudowaną funkcję o ile dobrze tłumaczę dokumentacje
# hexbin.centers()
Returns an array of [x, y] points representing the centers of every hexagon in the extent.
Nie działa mi to… zwraca mi to aby jeden punkt [0,0].
Część kodu
// Create the hex layout
this._hexLayout = d3_hexbin()
.radius(this.options.radius)
.x(function(d) { return d.point[0]; })
.y(function(d) { return d.point[1]; });
centers: function() {
var points_table = [];
points_table = this._hexLayout.centers();
for (let i=0; i<points_table.length; i++) {
console.log('licznik pętli: ' + i);
console.log('element: ' + points_table[i]);
}
return points_table;
},
var hexLayer = L.hexbinLayer(options).addTo(map)
hexLayer.centers();
Jest ktoś w stanie mi pomóc ogarnąć tą jedną rzecz ? Strasznie mnie to blokuje, siedzę nad tym już któryś dzień ;/.