Develop Reference

How to show modal window on marker click?

I am using leafletjs to build a web map and trying to figure out how to show a modal window when a marker is clicked (instead of the default popup method).
Here's my setup:
var myAirports = L.geoJson(myData, {
pointToLayer: function(latlng){
..snip..
},
onEachFeature: function(feature,layer){
$('#myModalOne').modal(options);
}
});
myAirports.addTo(map);
My HTML is like so:
<div id="myModalOne">....</div>
<div id="myModalTwo">....</div>
Lets say my data has a featurecollection with a key of 'name' (i.e., 'name': 'Bush Airport') for each feature. Would I just add a switch statement to my onEachFeature function?
Just need a little guidance,thanks.
Note: I am using Bootstrap for the modal windows

If I understand you correctly, you don't need to set the pointToLayer option which is useful if you want to display something else than a marker.
What you need is to catch the click event on the markers and display a modal window. There is no popup by default.
var myAirports = L.geoJson(myData, {
onEachFeature: function(feature,layer){
layer.on('click', function(e){
$('#myModal'+feature.properties.name).modal(options);
// or whatever that opens the right modal window
});
}
});
myAirports.addTo(map);

How to dynamically load the right markers and print them on a Leaflet map?

I'm making an application that dynamically fills dropdowns from the database. You can select different tables that have different datasources in them. So one table could be just points, but unother table could have polygons. So at the moment I have the following piece of code to generate the standard markers and pop-up information. But I want to add a specific style to the markers of different tables. But I'm not sure what's the best approach to do this. I was thinking of making some variables and declaring the styles in there and then, depending on the selection of the user, use the right variable.
This is my dynamic code so far:
window["mapDataLayer"] = L.geoJson(geojson, {
onEachFeature: function (feature, layer){
layer.on({
click: function showResultsInDiv() {
var d = document.getElementById('tab4');
d.innerHTML = "";
for (prop in feature.properties){
d.innerHTML += prop+": "+feature.properties[prop]+"<br>";
}
$('.nav-tabs a[href="#tab4"]').tab('show');
console.log(d.innerHTML);
}
}); }
}).addTo(map);

Leaflet: Toggle GeoJSON layers with Checkboxes

I would like to be able to use checkboxes to toggle on/off layers on a map. The map will be loaded without any layers.
Right now my buttons look like this:
<label><input type="checkbox" name="points" value="addressPoints" /> ADDRESS POINTS</label>
I'm calling my GeoJSON layers like this:
L.geoJson(schoolDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("<h4>School District: " + feature.properties.name);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.name);
}
});
I know I need to add a change event to the checkbox code. I just don't really know how to go about writing a function to toggle the layer on and off. I have about 10 layers I will need to do this for so I'd like to be able to have a function that I can use for them all.
Hopefully this is enough information to go on.
Thanks!

Leaflet has this capability built into the layers control via an overlay object. The layer control can accept an input for a basemap object and an overlay object. The basemaps are toggled with radio buttons, the overlays are toggled with checkboxes. Here's a simple example:
var basemapObj = {
"First Basemap": L.tileLayer(...),
"Second Basemap": L.tileLayer(...)
}
var overlayObj = {
"LayerA": L.geoJson(...),
"LayerB": L.geoJson(...)
}
L.control.layers(basemapObj, overlayObj).addTo(map);
The link listed in the comments above does the same thing as the built-in control, but requires that you write the code yourself and style the elements, etc. Using the base Leaflet controls is much simpler.

Opening a leaflet popup on a layerGroup

I am trying to draw country shapes on a leaflet map using L.GeoJSON(data).addTo(map). I then want to bind a popup to the click event of that country shape...
new L.GeoJSON(data, {
onEachFeature: function(feature, layer) {
layer['on']('click', popupFunction);
}
}).addTo(this.map);
popupFunction = function(event) {
var layer = event.target;
// Open the 'add' popup and get our content node
var bound = layer.bindPopup(
"<div>Hello World!</div>"
).openPopup();
// Ugly hack to get the HTML content node for the popup
// because I need to do things with it
var contentNode = $(bound['_popup']['_contentNode']);
}
Now this works fine when the data is a single polygon, because then the layer attribute passed to the onEachFeature function is just that: a layer.
However if the data is a multipolygon (i.e. the US) this stops working because the "layer" is now a layerGroup (it has a _layers) attribute and therefore has no _popup attribute and so I can't get the _contentNode for the popup.
It seems like this should be quite a common thing, wanting a popup on a layerGroup. Why does it have no _popup attribute?

short answer: layergroup does not support popup
plan B:
you should consider using FeatureGroup, it extends LayerGroup and has the bindPopup method and this is an example
L.featureGroup([marker1, marker2, polyline])
.bindPopup('Hello world!')
.on('click', function() { alert('Clicked on a group!'); })
.addTo(map);

You cannot bind a L.Popup to anything else than a L.Layer because the popup will some coordinates to anchor on.
For a L.Marker it will be the position (L.Latlng), for the L.Polygon it will be the center (look at the code to see how it is calculated).
As for the other cases (like yours), you can open a popup but you will have to decide where the popup opens:
var popup = L.popup()
.setLatLng(latlng)
.setContent('<p>Hello world!<br />This is a nice popup.</p>')
.openOn(map);

First of all, you should be able to bind popUp in similar way to Using GeoJSON with Leaflet tutorial. Something like this:
var geoJsonLayer = L.geoJson(data, {
onEachFeature: function(feature, layer) {
layer.bindPopup('<div>Hello World!</div>');
}
}).addTo(map);
How to further process your popUps depends on your usecase. Maybe this can be enough for you:
geoJsonLayer.eachLayer(function(layer) {
var popUp = layer._popup;
// process popUp, maybe with popUp.setContent("something");
});
Hope this helps..

I used this code to open all popups in a layer group:
markers.eachLayer(marker => marker.openPopup());
While dealing with layer groups, you might want to consider passing { autoClose: false, closeOnClick: false } options while binding popup, so popups won't get closed while opening new popup, or if user clicks on the map:
marker.bindPopup(item.name, { autoClose: false, closeOnClick: false });

how to make the zoom button of my own on an esri map

i am trying to implement a zomm button (and other buttons) and using esri javascript api.
i hide esri default buttons and want to use my own for zoomin in.
see it here: http://jsfiddle.net/nxuq857d/
var map;
// esri map initialization
require(["esri/map", "esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/graphic", "dojo/domReady!"], function (Map, Point,
SimpleMarkerSymbol, SimpleLineSymbol,
Graphic, Color) {
map = new Map("map", {
center: [0, 0],
zoom: 5,
basemap: "topo",
slider: true // set to false to remove default zoom buttons
});
});
i want it to perform the same functionality as the default esri zoom button (zoom in). how to do that?
ALSO i am having problem with referencing the map from outside the map function... so if you can help with that as well. how to reference the map from other functions and perform for example the zoomin functionality.
after:
});
});
thnx a lot

First you have to subscribe on click event of your "zoombutton" DOM element.
You can do it with native api or something like jquery ($('#zoombutton').on) or dojo/on module.
In event callback function you can access your map, because you initialized it in a global scope, and simply set next level of the map (https://developers.arcgis.com/javascript/jsapi/map.html#setlevel).
Function example:
document.getElementById('zoombutton').addEventListener('click', function(){
map.setLevel(map.getLevel()+1);
});
If you want something more reusable and modular you can look here for more instructions https://developers.arcgis.com/javascript/jshelp/intro_custom_dijit.html

See this:
http://jsfiddle.net/moizhb/rLwaytnp/
All you need is to subscribe the click event and call setZoom
on(dom.byId("zoomInBtn"), "click", function(evt){map.setZoom(map.getZoom()+1);});
on(dom.byId("zoomOutBtn"), "click", function(evt){map.setZoom(map.getZoom()-1);});