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.
Related
So ive got a 2000x2000 image as a CRS map where i need to fit -600000 +600000 coordinates, but the image becomes so zoomed that im obviously not doing it right, i guess the program does not know how to combine and calculate that by itself to fit the units into pixels, or does it have a setting for that?
I guess it still makes each pixel of the image approx 600units big but i guess thats accurate enough for what im trying to do.
Coordinates themselves seem to be working as the center of the image is exactly spot on.
var mapOptions = {
center: [11999, 9199],
minZoom: 0,
maxZoom: 0
}
// Creating a map object
var map = L.map('bigmapleaf', {
crs: L.CRS.Simple
}, mapOptions);
var bounds = [[600000,-600000], [-600000,600000]];
var image = L.imageOverlay('../pictures/map.png', bounds).addTo(map);
// Adding layer to the map
map.fitBounds(bounds);
map.setView( center, 1);
Edit:
Now i have managed to find the math that makes the map the right size without any zooming with good precision, but i need to make the map to respond to those kind of large units which i believe requires another conversion back to the original units which does not feel right. I wish i could work with the large units and let leaflet do all the map view conversions. Maybe i try to make a script that discusses both ways with their own units.
Still waiting if someone knows easy answer for my troubles.
In addition to being easier working with them large units, i could also make the map with absolute accuracy.
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.
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've draw polyline programmatically (not using leaflet draw) inside polygone using leaflet draw plugin on map, I want to keep only the points of polyline that are inside of polygone and remove those are outside. Do you have any idea how to do that using a leaflet plugin?. Any help is much appreciated. Thanks
Here is a screenshot:
The expected result:
I did research on difference method of **turf" library as #Sam suggested, so finaly I can apply this method on my drawing polygon and line, here is a code snippet:
var line = path.toGeoJSON();
var polygon = selectedPoly.toGeoJSON();
var difference, result = [];
difference = turf.difference(line, polygon);
if (difference)
{
result.push(difference);
var inter = L.geoJson(result).addTo(map);
}
This is a screenshot of the result:
Now I want to remove this part of line and keep only the section inside polygon, I tried to do that but not working. Can you help me please? Thank you
I'm working with turfjs to check for overlapping polygones in leaflet.
map.on('draw:created', function (e) {
var intersection = [];
otherPolysLayer.eachLayer(function (layer) {
if (!_.isUndefined(turf.intersect(e.layer.toGeoJSON(), ))) {
intersection.push(layer);
}
})
});
You could change the above so that instead it checks for the entire polygone, you'd check with the difference method.
difference: Finds the difference between two polygons by clipping the
second polygon from the first.
I've been looking for a good while for a decent library and looked into leaflet-pip, kevlindev amongst others but I find that turf really just works out of the box.
Update
http://jsfiddle.net/ddce1wh5/ how about this? I used intersect, because that is apparently the part you'd like to keep, I misread, apologies. The following http://jsfiddle.net/mcqL1y90/ we use an array of lines that uses either the intersecting line, or if no intersection is taking place it takes the line itself to draw on the map.
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.