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
Related
I am trying to use Flutter mapbox_gl package to display clustered data, support for this functionnality has been added recently as showed in this example.
When the user zooms in, I would like to make symbols clickable, I have followed this example of clickable annotations but it seems not working, basically what I did is exactly combining the two examples: adding cluster layers (symbols and circles) using the map controller through onStyleLoadedCallback property, then adding on-click callbacks in my onMapCreated property (using onSymbolTapped & onCircleTapped methods). Am I doing something wrong?
For the clickable annotations from a source, as they come from a GeojsonSource, you must use onFeatureTapped. This will give you 3 data : the id (defined in the source), the point (coordinate on the screen) and the latlng (position on the map).
This allows you to set a generic callback for both the features in the source and the clusters made with it.
The package currently does not support having more data returned in the callbacks.
I would like to add a custom container to Leaflet. The container would contain edit controls and would be used as a kind of properties editor in order to customize the map (marker colors, zoom level, polyline color, etc ...). The panel would be displayed when the user clicks on a "settings" button located on the map.
Is there a Leaflet plugin for this?
I also had a look at how to implement custom controls, but I am really not clear how to achieve this. In particular it seems to me that I can only use JavaScript and DOM manipulations (and no direct HTML markup) in order to create a custom control.
Could someone please help me bootstrap the control? thanks!
Edit:
So I tried to create a very simple container consisting of a single checkbox "control" as follow:
L.Control.SettingsPanel = L.Control.extend({
onAdd: function(map){
var checkbox = L.DomUtil.create('input');
checkbox.setAttribute("type", "checkbox");
checkbox.style.width = '200px';
return checkbox;
}
});
L.control.settingsPanel = function(opts){
return new L.Control.SettingsPanel(opts);
}
The sidebar v2 leaflet plugin might be what you are looking for.
I'd like to generate a link to a Mapbox map, centered on a particular latitude and longitude, that also contains a marker on that spot. This is trivial when generating a static map:
https://api.mapbox.com/v4/mapbox.streets/pin-m(<lat>,<lon>)/<lat>,<lon>,<zoom>/320x160.png?access_token=<access token>
with the pin-m() segment specifying the marker. When generating a link to a full, interactive (zoomable/pannable) map, however, specifying a marker doesn't seem to be an option. This URL goes to the map I want:
https://api.mapbox.com/v4/mapbox.streets/zoompan.html?access_token=<access token>#<zoom>/<lat>/<lon>
but there's no marker. I looked through all the documentation and couldn't find any reference to a way to do this. From the docs it looks like the only way to add a marker to the map is to host a page and generate the map via JS in a script. I can do this, but I'd much prefer to be able to just add a parameter to a URL instead of adding a whole new route/controller/view/associated specs for our Rails app for what seems to me to be a very minor addition.
Does anybody know of an undocumented way to do this? Or a documented way that I've just overlooked?
You aren't able to add a marker through a url parameter like the static API allows. You could add a marker by following this example for Mapbox JS or you could use the newer Mapbox GL JS to center the map around a marker like in this example.
I Hope this helps
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.
The leaflet documention shows you can add a popup to a marker with
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
or create a standalone popup with
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(map);
Is there no way to set popup options and bind it to a marker? I want to be able to set my own maxwidth for popups and have them open/close when you click a marker.
Are you sure that you're reading the Leaflet reference documentation? It specifies that you can bind a popup with options by creating it and calling .bindPopup with it. For instance,
var popup = L.popup()
.setContent("I am a standalone popup.");
marker.bindPopup(popup).openPopup();
You can pass an object of popup options as the second argument of bindPopup, like this:
marker.bindPopup("<strong>Hello world!</strong><br />I am a popup.", {maxWidth: 500});
I've tested this in Leaflet 1.4, and it also seems be available in earlier versions of bindPopup.
For maxWidth you should do this:
var popup = L.popup({
maxWidth:400
});
marker.bindPopup(popup).openPopup();