hello I am a leaflet newbie, I am building my app with map component. the marker on the map should be updated every time the user perform specific action (filters) . the component was working fine . then I decided to add the responsive popup plugin from the original Leaflet. so I tweaked a lot the normal component of react leaflet . now every time I perform I new filters the new markers are added successfully to the map however the old marker are not deleted.
codesandbox demo
any help on how to fix this ?
If you are not bound to that component (leaflet-responsive-popup) you can solve it like this (preferred solution):
CodeSandbox without ResponsivePopup
<Marker key={i} position={bus}>
<Popup>
<span>Note<br />{i}</span>
</Popup>
</Marker>
If you have to use that component than you have to store markers in an array and clear all the markers before you add new ones like this:
CodeSandbox with ResponsivePopup
Problem is that you were adding markers, while never removing the old ones. You have to pass all the coordinates so that first you could remove the old ones and than add the new ones.
Related
I'm integrating MB on my Ionic 3 project.
There's a map on my 'home' page. When user touches a button another map loads which uses the Directions API and after another click by user another map is supposed to load but won't.
The map div is present on this page but the styles and js script don't seem to get applied to it.
Is there a limitation which declares you cannot load MapBox 3 times in a project or is there something from my end?
Thank you in advance.
So, sigh, the problem was I was using the same map id on all my HTML pages containing a map div, forgetting Ionic applications are called one-page-apps.
Renaming map container divs fixed it.
I'm trying to get a basic example of react-leaflet 2.2.1 to work with the latest react release, 16.8.4. However, the leaflet map does not display correctly.
I used create-react-app to create a new project, then modified the App.jsx to include a component that is identical to the codepen example given for react-leaflet. The only change is to the containing div where I specified the height & width.
The map tiles do not render within the div and instead end up in somewhat random positions.
The entire app code in https://github.com/sknutsonsf/agdex/tree/master/src
This looks like some kind of compatibility issue with the new react version.
I had the same issue, adding
import 'leaflet/dist/leaflet.css';
solved my problem
I created a real estate website that uses a company called idxbroker to handle the data from the mls (multiple listing service). I want to have a custom marker to populate on the map for property listings that I have personally so that they stand out when someone searches for properties. Idxbroker does this, however, the marker they provide for my personal listings has a tiny star inside of the same marker used for all listings and you wouldn't realize it unless you were looking for it. I know how to create a custom marker based on leaflet doc's, but not sure how to implement this since idxbroker hosts all this data from their server on my custom subdomain. Is there a way to inject javascript into their code so that my listings have a custom marker?general marker & marker for my listings
Are you looking to add a custom marker on a results page or on the details pages?
It might be easier to just hide the IDX map and write your own in it's place with your custom marker.
Can you provide a map code sample or a link to the page you are trying to customize?
I am working with leaflet api.I can draw rectangles and polygons.I have bound the popup with every rectangle and polygon.When i click on drawn shape, popup opens(leaflet functionality).Popup contains some html(image).
As i am working on a demo application, i am wiling to try the fancebox plugin.
Means, when i click on drawn shape, instead of popup, i want to open up that image using fancybox.
Can i do that using simple method like using another function instead of .bindpopup.
Working Script (image loaded using fance box when we click on popup)
e.layer.bindPopup("<a class='fancybox' rel='group' href=''><img /></a>");
I can understand there must be some other javascript function to do it.
If there is some way to do it please let me know, as i am new to leaflet didn't have enough mental power to understand it yet but i hope i will....
Thanks for your time :)
I would just do e.layer.on('click', function() { //do fancybox init, perhaps like $(body).append("<a class='fancybox' rel='group' href=''><img /></a>")})
Although it makes a lot more performance sense to bind that event on the L.FeatureGroup holding all the shapes instead of one by one.
I have an OSM map and I'm using leafletjs.
I have created my custom popup for marker. It it works fine and correctly.
marker.bindPopup(strMsg,{className: 'myPopup'});
This code works perfectly.
Now, I want to create a the same popup, but clicking on Multilopygon. The data for the polygon comes from geoJSON. This is the code I wrote for this issue
var c_park = L.geoJson(data[i].geom, {
style: myStyle
});
c_park.bindPopup("strMsg",{className: 'myPopup'});
map.addLayer(c_park);
The problem is myPopup class is not working for the popup of multipolygon and as a result I get the native popup window. If I manually change the class in browser - it is ok.
I tried different methods. F.e. using function onEachFeature to init popups. But nothing works.
Does anybody knows what is the problem ?
Does anybody knows what is the problem ?
There is no problem. ClassName is supported for markers as an option of L.icon. (docs).
Polygon inherits the options of polyline and path, which do not include ClassName (docs).
The way I see it you have two possibilities:
fork leaflet and add the className option to polygon
make a subclass inheriting polygon taking className as an option by overloading bindPopup