I have a historical city map that I want to display using Leaflet.
I like to set the coordinates of this image to reflect the real world, e.g so I can click on the image and get the real coordinates.
I guess I can just make it an overlay to a real map, but there must be a better solution just define at what coordinates of the corners of the image.
For this image, the approx real world coordinates is NW: 60.34343, 18.43360, SE: 60.33761, 18.44819
My code, so far, is here:
http://stage1876.xn--regrund-80a.se/example3.html
Any ideas how to proceed? It feels like it there should be an easy way to do this?
Any help would be so appreciated!
EDIT: The implementation (so far) with tiles are optional. I could go for a one image-map as well.
Related
I am attempting to place a hexagon (centred over co-ordinates) which I can interact with, hover/onclick. The method I am using is to LoadImage(..._Hexagon.png) and then addLayer. Eventually the idea is to have many hexagons over specific areas.
I have obtained the desired interaction with the shape, but I would like this layer to be invariant under zoom (ie I have the hexagons cover an area of x square km at all times regardless of zoom). Is there an efficient way to do this? Will another method be better? etc
Thank you in advance for any and all advice!
If you really want to scale an icon such that it gets bigger as you zoom in, you can use an exponential scale:
"icon-scale": ["*", ["interpolate", ["exponential", 2], ["zoom"]], SCALE]
where SCALE is some constant you pick.
It probably makes more sense to actually generate hexagonal polygon data (eg, using Turf), and displaying that though.
I am looking for a way to display a polygonmarker instead of a circlemarker in leaflet.
I am not looking for a way to draw a polygon on the map, because I need it to be the same size independent of zoomlevel.
Drawing a polygon also requires multiple coordinates which I don't have.
example: There is a spot on a mountain that allows to start flying here in winddirections from North to Southwest.
I want to draw a cone in those directions.
Can this be done in leaflet? I've looked around but can't find a solution to this.
If not, any suggestions?
Bit of a weird one I hope someone can help out with.
In leaflet, once the user has entered a lat/lng and added a point to the map I want to be able to also add a 10km square around that point.
I've tried looking around for a calculation to find the corners of the square x Km away but haven't dug anything up. But surely there's an easier way!
Does anyone have any thoughts? It'd be lovely to just say L.polygon then pass in a centre point and a square size.
Thanks,
Tayler
Initialize a L.Circle on your desired latitude/longitude with a radius of 5000 meters, grab the boundaries and use them to initialize a L.Rectangle:
new L.Rectangle(new L.Circle([0, 0], 5000).getBounds())
Seems like a simple question, but I have been tearing my hair out for hours now.
I have a series of files ie.
kml_image_L1_0_0.jpg
kml_image_L2_0_0.jpg
kml_image_L2_0_1.jpg
kml_image_L2_1_0.jpg
kml_image_L2_1_1.jpg
etc. However just plotting them on the leaflet map surface understandibly puts the images at 0,0 on the earths surface, and the 0 zoom level inferred by the files should really be about 15 or so.
So I want to specify the latitude and longitude where the images should originate , and what zoom level they should start at. I have tried bounds (which doesn't display anything) and I have tried playing with offsetting the zoom level.
I need this because a user needs to click on an offline map to specify where they are and I need the GPS coordinates.
I also have a KML file but it seems to be of more help for plotting vector data on the map.
Any help is much appreciated, cheers.
If I understand correctly, the "kml_image_Lz_x_y.jpg" images that you have are actually tiles, with zoom, horizontal and vertical indices in their file name?
And your issue is that they use (z,x,y) numbers as if they started from the top-most level (zoom 0, single tile for entire world), but in fact they are just a small portion of the pyramid of tiles?
And you cannot use them as is because you still want to get actual geographic coordinates (latitude, longitude), which would be totally wrong if you used the tiles as if they were showing the entire world?
In that case, you have several options as workarounds:
The most simple and reliable would probably be to simply write a small script to rename all your tiles to their true (z,x,y) numbers.
Another option would be to modify the (z,x,y) numbers before they are written in the tile src attribute, and apply the appropriate offset (constant for z, scaled by z for x and y). That should probably happen in L.TileLayer.getTileUrl() method.
Good luck! :-)
I want to use bitmap images as a "map" for levels in iphone game. Basicly it's all about the location of obstacles in the rectangular world. The obstacles would be color-coded -- where the white pixel is, there's no obstacle. Black means there is one at this point.
Now I need to use this data to do 2 things: (a) display the level map, (b) for in-game calculations. So, in general, I need a way to read the data from the bitmap and create some data structure (matrix-like) with those information - to both overlay the bitmap onto the level graphics as well as to calculate collisions and such.
How should I do it? Is there any easy way to read the data from image? And what's the best format to keep the images for this?
Have you looked at how Texture2D translates an image file to an OpenGL Texture ?
Tip: take a look at this Method in Texture2D.m:
- (id) initWithCGImage:(CGImageRef)image orientation:(UIImageOrientation)orientation sizeToFit:(BOOL)sizeToFit pixelFormat:(Texture2DPixelFormat)pixelFormat filter:(GLenum) filter
In 3D apps, it's quite common to use this kind of representation for height maps, in a height map, you use a Texture with colors that range from black to white ( white represents the maximum altitude )
For example, from this:
To this:
That was just to tell you that your representation is not that crazy :).
About reading the bitmap, I would also recommend you to read this (just in case you want to go deeper)
Hope I helped a bit!