Using a polygon as a marker with leaflet - javascript

I currently have a map for a game with item locations, i'm wanting to add animals to the side bar/legend but as a polygon instead of a marker, i get how to draw a polygon but i cannot figure out how to make it only show when selected from the legend (or even how to add one to the legend). Sorry for this very basic question.
I'm really very new to this, I only started learning about leaflet to make a map for a game, so i'm not really sure how to explain what i've done.. so i'll try my best:
I have a list of markers like:
var marker_combulbrsh2 = L.marker([-1474, 2661.5])
.bindPopup('Common Bullbrush');
and then i have the layer groups that have lines this like:
var lg_combulbrsh = L.layerGroup([
marker_combulbrsh1, marker_combulbrsh2
]);
and then an overlay list with the layer groups like:
"<i>Common Bullbrush" : lg_combulbrsh,
and then i have them display on the map with:
L.control.layers(null, overlays, {collapsed:true, position: 'topleft'}).addTo(map);
I am wanting to add a series of polygons that are selectable from the side panel/legend in the same way that the above L.marker is, so that I don't have to add individual locations that are close together for adding animal locations to the map.
`var polygonPoints = [
[-2263, 432],
[-2361, 435],
[-2337, 674],
[-2263, 432]];
var poly = L.polygon(polygonPoints).addTo(map);`
The code above draws the polygon i want to draw, but it's permanently there and I haven't been able to figure out how to make it a selectable item like the L.markers are. I figure i have to add the polygon as a marker some how and then have that marker added to the layer group and create an entry for them on the overlay list and then have them display through L.control.layers - I just cannot wrap my head around how though.
again, sorry for this very basic question and thank you to anyone who reads. if you are able to help with this and would like credit added to the website with a link to your work or social media or something i'm more than happy to do so.

Related

Google Maps API: how to tell if a marker is hidden by another marker?

I have a map that has markers programmatically placed on it based on values in my database. When you click on a marker, it will go to a detail page for that location.
My problem is that when the map is sufficiently zoomed out, markers that are close enough to each other appear as a single marker, in effect hiding some of the markers. Is there a way to tell programmatically whether a marker is part of a group of markers or is hidden/covered up by other markers?
My intention is to do something like this for each dynamically generated marker:
marker.addListener('click', function() {
// if marker is not hiding any other markers
window.location.href = markerURL;
// else if it is hiding markers/is part of a group of markers
map.setZoom(15);
map.setCenter(marker.getPosition());
});
I have checked the Marker API documentation, but can't seem to find any useful methods. getClickable and getVisible always return true in my case, regardless of whether a marker is covered by another marker. Any suggestions? Thank you!
I ended up going with MarkerClusterer to solve my problem. I was hoping for a simpler solution, but this turned out to be pretty simple after all.
The only thing I needed to add to my existing marker-generating code was a list: var markers = [];, and then I called markers.push(marker); on all of my markers. The final step was to create a new MarkerClusterer object:
var markerCluster = new MarkerClusterer(map, markers, options);
And MarkerClusterer handles the rest more or less (the options parameter is optional, but I used it to set the path to my images and set the maximum zoom level). Now, in the situations where previously my markers were stacked on top of each other, making it impossible to see or click certain markers at certain zoom levels, I instead see a cluster with a number indicating the number of markers in that cluster. Clicking the cluster icon will further zoom in, revealing my markers.
All of this was done following the simple usage example on their github page, but they have pretty good documentation too. Most of my time getting this to work right was actually spent styling the cluster icons to match my site's color scheme...

Which 3 marker creates a triangle that contains specified point?

I have a map with ~50 markers on it (Google maps api v3) and I'd like to click a random point and get which 3 markers surrounds it.
I've found this example, but it doesn't really do the thing i want alone.
Here's an image of my markers and what I'm trying to accomplish:
[IMAGE]
According to image;
When I click to red point, the script should return me the coordinates of those 3 markers connected with yellow lines.
Same for blue point and green lines.
It has to be the narrowest, smallest triangle.
I've tried finding closest 3 markers, it works for most situations but doesn't cover all. (Like when there's 3 markers in the same line with a close range.)
Any advice? Thanks in advance!
Edit
ps. I can use PHP with ajax calls if it helps.
Did it using PHP, by looping all marker coordinates.
First I checked if a point is in the triangle using this class
Then checked if its' area is smaller than the last one.
/* 3 foreach loops{ */
$pointLocation = new pointLocation();
$polygon = array($A['y'].' '.$A['x'], $B['y'].' '.$B['x'], $C['y'].' '.$C['x'], $A['y'].' '.$A['x']);
$point = $P['y'].' '.$P['x'];
if(($pointLocation->pointInPolygon($point, $polygon)=='inside' || $pointLocation->pointInPolygon($point, $polygon) == 'vertex'))
// Here I check the area using another function and save this coordinates if this is the smallest triangle. Then it continues to loop
/* } */
This is probably not the most efficient way, but unless I find another way, this'll do the job.

How to remove markers when use Leaflet Slider to show changes over time

I am using Leaflet Slider, of Dennis Wilhelm, to try to show changes in data over a period of five years in a Leaflet map.
I am trying to get that when the user move the cursor over the slider, some marker disappear and some other appear. So far, I only get that the new marker appear on top of the old marker.
So, my question is:
How can I remove markers when use Leaflet Slider to show changes over time? What changes I have to do in the original SliderControl.js?
Thanks in advance!
Below is the link to Dennis Wilhelm's Leaflet Slider code:
https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js
It might be late, but for anyone who is looking for it now. If you want to show changes over time and want to show specific points at a time, pass the parameter follow as true, so the slider would show only one point at a time.
var sliderControl = L.control.sliderControl({
position: "topleft",
layer: layername,
follow: true
});
When I need to update markers in Leaflet I add my markers to a layergroup. I then add that layer group to the map once, and clear it before adding new markers. Below is a code snippet of what it might look like. That way all markers are cleared out before adding new ones. I hope that helps you.
var map = L.map('map').setView([0, 0], 2);
var markerLayerGroup = new L.LayerGroup();
map.addLayer(markerLayerGroup);
function addMarkers() {
markerLayerGroup.clearLayers();
markerLayerGroup.addLayer(markerVariable);
}
I have used the range: true property to overcome this issue in a project i'm working on.
It is suboptimal however given that you need to move 2 sliders, both a Left and right slider, which represent the limits of the period you're interested in viewing, rather than just one for say a month end snapshot.
Also one increment of the slider will add 1 point to the map rather than adding a whole lot at once.
I expect there are solutions to these problems by extending the class but i've not had the time to do that yet.
here's my code:
var sliderControl = L.control.sliderControl({
position: "topleft",
layer: membMarksCurrent,
range: true
});
map.addControl(sliderControl);
sliderControl.startSlider();

How to add square tiles to leaflet map with hovering effect?

I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.
I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.
If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?
UPDATE:
Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.
And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.
This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.
Updated after your update:
MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},

How to identify google maps marker on the map

I have a list of google maps markers as html links next to a google map. I have the function that is triggered when I click on the link. Marker ID is passed to this function.
My question is - when I have 100 markers, I want somehow IDENTIFY the clicked marker on the map. Some sort of ripple effect that would go away from the marker.
please advice what are my possible options so I could develop appropriate solution
Example: 100 markers already on the map. I also have 100 names on the left. Each name corresponds to each marker. When I click the name, I want the marker that belongs to that name somehow "blink" or identify itself in some other way among other markers.
before the markers was pin on the map
you need to set a global markers variable
var gb.markers = [];
while you create each marker need to push into global marker array
marker = new google.maps.Marker({
// other stuff
'id': marker.id
});
after you done with assign function to marker, push it into global var
gb.markers.push(marker);
make sure when you click on marker will get marker id
and loop the global markers or make marker array with id as index
A ripple effect would be quite complicated, possibly involving positioning of a 'GroundOverlay' object centered around the marker you wish to highlight.
If your goal is just to be able to highlight the marker, perhaps playing a simple animation using 'Marker.setAnimation(animationObject)'. You could perhaps using 'Animation.BOUNCE' to highlight the marker?

Categories

Resources