I use the worldmap and I want to open "www.google.com" when I click in the treshold, is it possible ?,
I tried to modify Leaflet library.
There is no good way to do this, but you can create a workaround with clickevents.
Look what html-id has you map.
$('#mapid_2').on('click',function(){
$('.leaflet-popup').on('click',function(e){
window.open('https://www.google.com','_blank');
});
})
Related
I am trying to allow a mapbox marker to be clicked on and when clicked it automatically takes you to a new link.
Is this possible?
I currently have a map of 10 locations and when loaded the zoom level shows all. When you click on a location, it zooms you into that location.
I now want it to take you through to a url on the click rather than zoom in, however I cant seem to find any documentation on how to do it.
I am aware that it can be done using a popup box which contains a url in it, but is there a way to remove the extra step.
Thank you
You can use click event on your layer to get the feature clicked and use a property of your feature to build your link :
map.on('click', 'layername', function(e) {
// Here you can access e.features[0] which is the feature cliked
// With that you can do whatever you want with your feature
});
Sébastien Bousquet's answer work when using a Symbol, but if using a Marker, you'll need to add your your own click eventlistener like https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event.
marker.getElement().addEventListener('click', event => {
window.location.href = 'https://www.mapbox.com/';
});
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 actually looking for a way to customize my window popups like it is done on this website : http://www.nytimes.com/newsgraphics/2013/quiet/#/map/
I have been looking on all the web and no way to find it ...
Any ideas or website explaining it ?
Thanks guys
The javascript code uses a combination of JQuery, JQueryUI, qTip2, and a couple of other libraries for localization and media player abilities.
You can find the specific javascript code for those markers here: NYTimes Map - zoom.js
All the css is found here: NYTimes Map - quiet.css
The main tool used for the mouseover parts is qTip2. Tutorials and demos can be found on the website. That's probably the thing you're going to want to start with.
There is a Leaflet extention called Leaflet.Rrose. Description from Leaflet plugins page:
For use when you want popups on mouseover, not click, and you need popup tips to reorient as you get close to the edges of your map.
Check out examples on extensions' page.
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