leaflet
Determine if a point reside inside a leaflet polygon
Use the Ray Casting algorithm for checking if a point (marker) lies inside of a polygon: function isMarkerInsidePolygon(marker, poly) { var polyPoints = poly.getLatLngs(); var x = marker.getLatLng().lat, y = marker.getLatLng().lng; var inside = false; for (var i = 0, j = polyPoints.length – 1; i < polyPoints.length; j = i++) { var xi = … Read more
React-Leaflet marker files not found
Try to do this 🙂 React leaflet for some reason do not include images and you will need to reset default icons image. Below is some working example, I hope it will solve your issue. You also can add icons from one of public link https://cdnjs.com/libraries/Leaflet.awesome-markers import React, { Component } from ‘react’; import L … Read more
How do you add a class to a Leaflet marker?
In 1.0 and 0.7 you can use L.DomUtil to add remove classes from a DOM element: L.DomUtil.addClass(marker._icon, ‘className’); L.DomUtil.removeClass(marker._icon, ‘className’);
Leaflet with next.js?
Answer for 2020 I also had this problem and solved it in my own project, so I thought I would share what I did. NextJS can dynamically load libraries and restrict that event so it doesn’t happen during the server side render. See the documentation for more details. In my examples below I will use … Read more
Leaflet Marker not found production env
This is a known bug in Leaflet, the root issue is that Leaflet’s icon image location is been wrongly referenced during bundling. You can verify that this is your issue, buy validating this parameter (in run time): L.Icon.Default.prototype._getIconUrl(). The correct value should be <some_directory>/leaflet/dist/images/. However if this bug is happening to you, it’s value is: … Read more
Leaflet.draw retrieve layer type on draw:edited event
You could use instanceof (docs here). map.on(‘draw:edited’, function (e) { var layers = e.layers; layers.eachLayer(function (layer) { if (layer instanceof L.Marker){ //Do marker specific actions here } }); });
Good way to combine React and Leaflet
You don’t need to manage uniqueness, i.e. “UID”, yourself. Instead, you can use getDOMNode to access the component’s real node. Leaflet’s API supports either a string selector or an HTMLElement instance. Leaflet is managing rendering, so the map should not live on state. Only store data in state that affects React’s rendering of the DOM … Read more
Dynamically change the color of a polygon in leaflet?
L.Circle extends L.Path (http://leafletjs.com/reference.html#path), that have method setStyle( <Path options> object ), and you can apply new style as window.circle.setStyle({fillColor: ‘#dddddd’});