Populating markers inside rectangle, circle and polygon - javascript

My requirement is to populate markers inside a user drawn area ,which can be either circle, rectangle ,polygon.
This is what I am trying currently :-
map.on('draw:created', function(e) {
var type = e.layerType, layer = e.layer;
var bounds = layer.getBounds();
});
Now I am using these bounds(southWest, northEast) latlongs to virtually create a row column spacing and then populate markers accordingly.
Problem :-
The above approach works fine for rectangle and all markers are populated inside rectangle.
Doesn't work for circle and polygon. Markers are populated outside (nearby) the circle and polygon also.
I guess the getBounds() method is giving the bounds or calculating the area by creating a box that touches circle and all corner of polygon.
Any suggestions that how can I populate markers strictly inside or on boundary of circle and polygon?
Thanks in advance.

Resolved for point inside polygon by PIP as suggested by #kmandov and also resolved for circle by the below process :-
Get latitude and longitude of the point.
Get the latitude and longitude of circle center.
Run distanceTo() method on any of the above two latlongs and pass the second latlong as parameter.
Check if the distance is greater than the radius of circle.
If it's greater than the radius then the point is outside circle else inside circle.
Here is the condition that I used :
if (customMarker.getLatLng().distanceTo(myCircle.getLatLng()) <= myCircle.getRadius()) {
console.log("Marker is inside circle");
}else{
console.log("Marker is outside circle");
}

You can probably use the PointInLayer leaflet plug-in to check if a point is inside your area.
You can then add markers only for grid points that are actually within the polygon.
Something like that:
// the user area:
var areaLayer = L.geoJson(userArea);
// iterate over your grid of points
for (var i = 0; i < gridPoints.length; i++) {
// add marker only if the point is within the area
var results = leafletPip.pointInLayer(gridPoints[i], areaLayer, true);
if (results.length > 0) {
L.marker(gridPoints[i]).addTo(map);
}
}

Related

Mapbox: Zooming Out One Level After Using fitBounds Re-Centers Map

I am using Mapbox GL JS and created a dynamic store locator based on their store locator demo. I am using fitBounds to include all store markers on the initial display of the map.
The problem is, it zooms in too close and the map needs a bit of padding. So, I'm trying to back out the zoom one level. The problem is, when I get the zoom level and back out one, the map is recentered to the original center of the map.
I have included code below where I try to reset the center to the fitBounds center but it's not working. Any idea what I'm doing wrong?
var bounds = new mapboxgl.LngLatBounds();
$(markers).each(function() {
var features = $(this);
bounds.extend(features[0].geometry.coordinates);
});
map.fitBounds(bounds);
var mapLat = map.getBounds().getCenter().lat;
var mapLong = map.getBounds().getCenter().long;
map.setCenter = (mapLat, mapLong);
var mapZoom = map.getZoom();
newZoom = mapZoom - 1;
map.setZoom(newZoom);
If all you want to achieve is to add padding to the bounds, mapbox-gl provides an option for this in fitBounds:
map.fitBounds(bounds, {padding: 100}) // adds 100px padding to the bounds
Here is the documentation: https://www.mapbox.com/mapbox-gl-js/api#map#fitbounds

Changing the Length of drawn polyline : leaflet

I am fairly new in using leaflet. Can someone tell me how to change the length of already drawn polyline in leaflet?. I want to make its length small or large depending on zoom level.
Leaflet polyline is a array of points, each of them consist of lat and lng. To change it's size you need to update this array and change distance between points width setLatLngs() method.
If you want to fit the screen you need to get screen bounding box width map.getBounds() get lat or lng from bbox and update your line width it.
So it will be something like this:
map.on('zoomend', function(){
var bounds = map.getBounds();
line.setLatLngs(bounds[0],bounds[1]);
})

Circle creates on previous coordinate on google map api

I'm creating marker and circle around 500 area. When user will be out of the boundary by drag the map another circle will create within same area of new generated marker. Issue is that its creating circle around previous generated marker instead of current generated marker.
You can check here:
http://jsbin.com/exiram/1
Can anyone help me please?
Pay atention with the events in tme map. for every pan "drag the map" you make a new marker in center of the map and a new circle for that marker.
probaly, you have a listener that capture all mouse events and call the code to make markers and circles.
you can make 2 buttons in your page, one to make a marker and other to make a circle.
Im a little bit busy to post a full answer so please excuse my psudo code
Somthing like this will work !
var map; // OUR MAP OBJECT
var circle; //OUR CIRCLE
var center; // lat long holder
google.maps.event.addListener(map, 'drag', function() {
center = getCenter();
circle.setCenter(center);
});

Javascript API Google Maps set Center right of the screen

I have a container to render a google map instance, above this container i draw (HTML) another container with a search box (Origin and Destination).
When an origin is selected, a marker is draw in the map (the same with the Destination input).
Now i need to "pan" the map to show the markers in the right side of the search box.
Now, when i put a marker i use fitbounds to make sure the marker is inside the map container, but in some occasions, the marker is draw under the searchbox.
Then i try to use "panBy" method to draw the center of the map in the right side of searchbox, but don't always work.
How can i make sure that the two markers always be visible and draw in the right side of search box?
Consider this: You need to make sure that the marker is in the right side of the map. If we get the NE coordinates along with the center, we can compare that with the marker position and easily set a new center as required.
Code:
google.maps.event.addListener(marker, 'click', function() {
var markerPos = this.getPosition(), center = map.getCenter(),
mapNE = map.getBounds().getNorthEast();
if(!(markerPos.lng() > center.lng() && markerPos.lng() < mapNE.lng())) { //marker is not on the right side
//based on center and NE calulate pos to center the marker
map.setCenter(new google.maps.LatLng(markerPos.lat(), (markerPos.lng() - (mapNE.lng() - center.lng())/2)));
}
});

Remove Polygon from the map

Requirements: Using the Leaflet js maps api, when the customer clicks on a marker, a Rectangle should be drawn just below the Marker, centering according to the marker. Then clicking on another marker should remove previous rectangles and draw another rectangle below newly clicked marker.
Problem: I am using the code below to draw a polygon and I can see a rectangle. And it draws the rectangle on a marker. Then by clicking on another marker a new rectangle is being drawn. But the old rectangle also still exists.
Question: How should I implement the behavior, so that when clicking on new marker, the old rectangle will be deleted from the map?
//polygon
var latBlockSize = 0.002;
var lngBlockSize = 0.002;
var route = [
new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) + latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) + lngBlockSize),
new L.LatLng(parseFloat(customer.MailingAddress.Lat) - latBlockSize, parseFloat(customer.MailingAddress.Lng) - lngBlockSize)
];
window.polygon = new L.Polygon(route);
window.map.addLayer(window.polygon);
I figured it out by myself.
This was the solution:
window.map.removeLayer(window.polygon);
That is working as well, tested with Leaflet 1.2.0.
window.polygon.remove()

Categories