I have a map for my Pen and Paper RPG and I want to show it via Leaflet.
I put the Png-File throw a Tile- Making Script and was able to generate this map.
I want to do the following things but don't know how:
Place the equator on the actual equator of the map
Putting bounds on the map, but only for the north-south-axis
The scale calculates with the dimensions of the real earth and i want to give it the dimensions of my world
I want my markers and polygons to repeat every 360°
I would appreciate any help,
Civer
To get the equator you could use a polyline like
var latlngs = [
[0, -180],
[0, 180]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
Not really sure what you mean by "putting bounds on the map". Are you saying you want to limit the user's ability to pan to areas outside of the map? Or are you talking about some sort of visual bounding line?
To do stuff with with different scales I'd suggest you look into how leaflet's Coordinate Reference System works (CRS). Take a look at this page: https://leafletjs.com/examples/crs-simple/crs-simple.html
It looks like you commented out some CRS stuff in your demo.
Related
I'm pretty new in using OpenStreetMaps with leaflet and got stuck trying to find out if there is a smarter way to include a boundary that I found on a map with markers that I created.
The best way I found until now is to find the area I need to show behind my markers ( for example this area : https://www.openstreetmap.org/relation/3123501#map=9/54.1375/-1.3898 ) and convert that to a list of lat/long coordinates that I add using (shortened the poly coordinates) code like this:
var latlngs = [
[54.1508316, -2.5609075],
[54.1498313, -2.5577575],
];
var polygon = L.polygon(latlngs, {color: 'rgba(0, 128, 0, 1.00)'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());
It produces the output I want but having 10k coordinates does not seem like an effective way to do this. Unfortunately my google and reading afforts dit not help me (yet) so I'm asking if somebody can point me in the right direction (if there is any) to do this in a smarter way.
Thanks in advance.
So I'm currently working on Deck.gl and React and I need to load a geojson file which has an additional property named "floors" or something similar which tells how many floors the building has.
Is there any way to extrude alternating floors horizontally just a little bit so that it looks like a floor edge like some of the buildings in this image (although most of them just go thinner at the top). I tried searching the deck.gl but there is no such thing. I looked up and found MapBox-gl-js has something called an extrusion-base-height which lets you add polygon above another but there is no such thing as extruding horizontally to make 1 floor thinner and then back to the original size. This would give and edge whenever a new floor starts.
I have scoured the docs for deck.gl but couldn't find any thing on extruding horizontally or in another sense changing the polygon area/size so that I can draw multiple size polygons on the same spot.
Another clear picture of what I'm trying
Things I want to do.
The red polygon is tilted. Need to make it's orientation the same as the green one and reducing it's area at the same time.
Move the red polygon base at the top of the green polygon.
The test data I'm using is given below,
var offset = 0.00001;
var data = [{
polygon: [
[-77.014904,38.816248],
[-77.014842,38.816395],
[-77.015056,38.816449],
[-77.015117,38.816302],
[-77.014904,38.816248]
],
height: 30
},
{
polygon: [
[-77.014904 + offset ,38.816248],
[-77.014842 - offset, 38.816395 - offset],
[-77.015056 - offset, 38.816449 - offset],
[-77.015117 + offset, 38.816302],
[-77.014904 + offset, 38.816248]
],
height: 40
}
];
EDIT:- I think the proper way would be to convert longitude/latitude to Cartesian Coordinates, get the vectors to the 4 corners of the polygon translate the vectors to move towards the center by the offset amount then convert back. But this would only work with quad/rectangle polygon, for buildings that are made up of multiple quads I'd need another way.
If I'm understanding correctly, your problem boils down to: given a polygon (the footprint of the lower part of the building), generate a slightly smaller version of the same polygon, centered within it.
Fortunately, this is really easy using Turf's transformScale method.
So your steps will be:
Convert your polygon data into GeoJSON. (Which I assume you have some mechanism to do, in order to display it in Mapbox-GL-JS in the first place.)
Generate a smaller polygon using turf.transformScale(base, 0.9)
Add the new polygon with map.addSource
Display the new polygon with map.addLayer, setting the extrusion base height etc as required.
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?
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.
Is there any way to adjust the bounds of the map so that the right-edge of Russia doesn't appear over to the left? You can see in the image I have a MultiPolygon area overlaying Russia but the map and the overlay are split. I'd like that tiny piece of the country to be on the right if possible!
Edge of Russia on the wrong side of the map:
A workaround I can think of is using the maxBounds property, where you would shift the default bounds slightly to the right, along with minZoom: 1. This won't prevent the user from seeing the world several times for a short time if zoomed out far / panning outside, as it says there:
... bouncing the user back when he tries to pan outside the view
var map = L.map('map',{
maxBounds:[ [-90, -160], [90, 200] ],
minZoom: 1
}).setView([66.058, 189.459], 4);
Demo
Welcome to SO!
If your multi polygon is the blueish area, then I am afraid you have to refactor your data in order to achieve what you want (shifting the left area onto the right, as if it were stitched back to Russia main land).
Your data (probably GeoJSON?) contains a separate polygon which longitudes are in the [-180, -120] range. Leaflet has no choice but to display it on the left of your map, independently from the noWrap option.
So you would need to dig into your data, and add 360 degrees longitude to every node of this polygon, so that they now sit in the range [180, 300].
Or somehow introduce a "detection" in your code that would perform the longitude addition automatically for shapes which bounds and/or center are far away (let's say in the [-180, -120] longitude range). Leaflet does not perform that operation automatically out-of-the-box.
Note: the noWrap option is for your Tile Layer not to load tiles outside that "central" world (in order to avoid showing multiple copies of the world). But in your case, you want to show a part of Russia / Siberia on an "adjacent copy of the world", so you might want to remove that option, or you will have your polygon not sitting over any basemap.