I want to make a system where a user will be able to draw a hexagonal grid. The regions and their coordinates will be stored in Database. We are thinking to implement H3 libary for this. How will be the library help is in making H3 hexagons all over the country?
I have made a node project with h3-js library but can't figure how which function to actually render or draw hexagons over a projection/map.
In general, to render H3 cells, you can get the vertexes using h3.h3ToGeoBoundary(cell) (v3) or h3.cellToBoundary(cell) (v4). This gives you an array of [lat, lng] pairs; passing true as the second argument gives you [lng, lat] pairs and closed loops appropriate for GeoJSON. You can use the geojson2h3 library to facilitate the process of converting one or more H3 cells to GeoJSON, which can be rendered to a map using Mapbox, Google Maps, or a variety of other mapping tools.
See https://observablehq.com/#nrabinowitz/h3-tutorial-heatmap-rendering?collection=#nrabinowitz/h3-tutorial for an example of rendering cells to a map using Mapbox.
Recently I found this tuto for create custom for with CSS grid, I think it's will help you for your problem :
https://css-tricks.com/css-grid-and-custom-shapes-part-1/#aa-css-grid-of-hexagons
Related
I'm trying to obtain a picture of a map using Mapbox. This should be very simple using
map.getCanvas().toDataURL(); The catch is that I have markers on my map and these are not present when I obtain the image using the method mentioned above.
This is an example of what I'm experiencing: https://codepen.io/loskiorama/pen/YzeeMqm
Is there any way I could get a "screenshot" of my map that includes the markers?
I'm bundling this on a single js file so I can't use solutions like html2canvas as I'd like to keep my file as small as possible.
Thanks!
I’m attempting to create a seating diagram using React Leaflet 2.7.0. I’ve made the coordinates relative to the Map bounds by setting the crs property to L.CRS.Simple.
I know how to create and place vector circles by manually inputting coordinates to represent a seat. This method allows the shapes to scale proportionately when zoomed (rather than using Markers, which don’t scale). My challenge is finding a way to efficiently determine coordinates based on an image of a seating chart.
I’m wondering if anyone knows of a way to extract coordinates based on an image to say a geoJson or Javascript object; Perhaps a plugin or other third-party, or built-in Leaflet feature I’m not aware of.
The image shows the concept of what I’m trying to achieve.
desired concept:
what I normally do is, create an event that when onclick it would gather the coordinates related to the image and after that push it to an array which after I finish I can console log the array which I just copy-paste to my text editor
So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.
I am new to Leaflet and I would like to find out if how to create a fully interactive fictional map. I have an image that I would like to convert to a leaflet map. This image has a number of connections and points like a graph basically.
I want to first of all convert that image to the map, be able to hover over the points, highlight them and display information about them and also to create animations at some point but not immediately with the connections. There is also a requirement to display permanent labels next to each point.
Is that at all possible in Leaflet?
Is that at all possible in Leaflet?
Yes.
Start by reading the leaflet tutorial for non-geographical maps.
I'm using ChartJS to include some maps in my website but the ChartJS library doesn't have the map I want.
I want to know if this type of vector maps is something easy to find free online or do you have to build from scratch?
ChartJS website isn't clear about that.
Thanks for your time!
From what I've noticed in vectormap-data/world.js file map data is an array of objects and each object has a coordinates field. It looks like each object corresponds to some country.
You may try to change those coordinates and see how this affects the map. Maybe, that will allow you to create you own map data.
Good luck!