Hot answers tagged

57 votes

Showing popup on mouse-over, not on click using Leaflet?

If you need to show the popup for a marker you can use markers bindPopup method. Then you have more control and it will automatically be bound to your marker. In the example below you can show the ...
user avatar
29 votes

Displaying properties of GeoJSON in popup on Leaflet?

The line where you create and bind your popup should have been included in the onEachFeature option of your L.geoJSON factory. var layerGroup = L.geoJSON(data, { onEachFeature: function (feature, ...
user avatar
  • 6,853
22 votes

How to update a popup content from its marker?

_popup has an underscore in front of it to indicate that it's a private / member instance, and should not be accessed directly. The correct API is Layer.setPopupContent(). e.g. marker.setPopupContent(...
user avatar
  • 323
21 votes
Accepted

Displaying link in popup with Leaflet?

You are providing html in setContent() var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent(e.latlng.toString() + '<a href="http://www.google.com">...
user avatar
  • 969
16 votes

Showing popup on mouse-over, not on click using Leaflet?

If you're using Leaflet 1.3.x, tooltip binding is a built in method. http://leafletjs.com/reference-1.3.0.html#tooltip var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this....
user avatar
15 votes

Leaflet Marker Mouseover Popup

You just have to add 'mouseover' and 'mouseout' event listeners to your newly created layer. You will also want to change the offset of the popup to make it higher. If not, you will have annoying ...
user avatar
  • 969
14 votes
Accepted

Error when trying to bind popup on geojson, failed to execute 'appendChild'

I had the exact same problem and it solved when I concatenated a string to it. // the number shows correctly itself console.log(layer.feature.properties.ROWID); // 46 // but bindPopup() won't accept ...
user avatar
14 votes
Accepted

How to update a popup content from its marker?

I suppose you want the content to be changed after some event occured, like mouseover, contextmenu, or anything else. To do so, you can use the following code: //marker creation var marker = L....
user avatar
14 votes
Accepted

Custom marker and properties from geoJSON in Leaflet

To create a custom marker you can create a L.Icon object and for the popup you can use the onEachFeature option. Here is an example code snippet for these functions: var myIcon = L.icon({ iconUrl: ...
user avatar
  • 2,281
11 votes
Accepted

Styling popup with two separate styles at once in Leaflet

I have no idea what the error means, but you can make a circle and a semicircle, then, combine them in a featureGroup. var map = L.map('map').setView([39, 30], 7); L.tileLayer('https://api.mapbox.com/...
user avatar
10 votes
Accepted

Handling Popups in Leaflet with Overlapping Features?

One option would be to use leaflet point in poly (leaflet.pip) which is available through Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/ Or as a leaflet plugin: https://...
user avatar
9 votes

OpenLayers 3 creating popups on a click

Here's a tutorial that I found useful. The tutorial uses the ol3-popup by walkermatt to make the popups. I've cut and paste some code from the demo so you have an idea on what this should look like. ...
user avatar
9 votes

Open popups in a fixed position with Leaflet

You could for example use a div-Container and a click-Event instead of the default popups: HTML: <div id="info"></div> Javascript: onEachFeature: function (feature, layer) { //...
user avatar
  • 6,350
9 votes
Accepted

Submit a form from within a leaflet popup?

I figured it out! - the problem is that my function or wherever I hold my line of code to "preventDefault()" was outside of the function that created the form in the first place. I need to place the ...
user avatar
  • 1,283
9 votes

Displaying properties of GeoJSON in popup on Leaflet?

Build a simple popup content for any properties in a simple way, in one line: var layer = L.geoJSON(data, { onEachFeature: function (f, l) { l.bindPopup('<pre>'+JSON.stringify(f.properties,...
user avatar
  • 266
9 votes
Accepted

Why does the className option of a Leaflet popup change only the outside of the popup?

A popup in Leaflet is not one single HTMLElement. If you use the developer tools in your web browser, you'll see that a popup has: A container for the whole thing: (note how there's a margin on the ...
user avatar
  • 9,390
9 votes
Accepted

Adding popup to Leaflet but only on click?

Just leave out call of .openPopup() method: mymarker.bindPopup('<p>You are here ' + username + '</p>');
user avatar
  • 17.1k
8 votes
Accepted

How to let leaflet layer events to propagate to layer below

Just a little CSS workaround will do the job for you. You can see the result in the following fiddle: http://jsfiddle.net/GFarkas/kkwgc1nh/ I made all of the images irresponsible to pointer events, ...
user avatar
  • 4,428
8 votes
Accepted

how can I specify a popup to show only for a specific layer in openLayers 3?

When doing forEachFeatureAtPixel, you should do any filtrering inside the callback function. You have the feature and it's layer available as arguments. This would return the first clicked feature: ...
user avatar
7 votes

How to Hide InfoWindow/Popup when "no information available" or when buffering?

This question is a year old but this alternate solution may be helpful to others. If you are using the Popup class you can set the Popup to a global variable so that you can set it not to show the ...
user avatar
  • 316
7 votes
Accepted

How do I show feature attributes in a Leaflet popup?

Look at the docs! You'll see that you need to define other callback methods on the L.geoJson object. Namely: L.geoJson(data, { style: function (feature) { return {[style properties here}; ...
user avatar
  • 6,402
7 votes
Accepted

OpenLayers 3.10.1 - Feature Popup

This works on OL 3.10.1. This example assumes you already have a feature layer added to your map and are using bootstrap and Jquery. For a solution without Jquery and Bootstrap see : OpenLayers 3 - ...
user avatar
  • 696
7 votes
Accepted

Automating Pop up configuration of web app in ArcGIS for Portal?

If you're using Portal for ArcGIS or ArcGIS Online you can manage your configuration files via the ArcGIS Online Assistant. Login with your Portal or ArcGIS Online credentials and select 'View an Item'...
user avatar
  • 10.6k
7 votes
Accepted

How to add top and bottom margins to leaflet popup with scroll

I couldn't get your strategy that both custom-popup and leaflet-popup-content-wrapper style classes have overflow: auto property to work properly. I moved overflow: auto property to leaflet-popup-...
user avatar
  • 17.1k
7 votes
Accepted

Access report/atlas page from feature in layer (QGIS)

The identify tool could do what you expect in possibility number 1. It could open the atlas page you click on. Step by step : Select the layer used as coverage layer Click on the identify tool Right-...
user avatar
6 votes
Accepted

How to add link in ArcGIS Online web map popup to google or bing driving directions?

Good question. You can achieve this in an ArcGIS Web Map by providing a custom value in the popup window. I added a sample New Zealand schools layer by searching for "school" within ArcGIS Online. ...
user avatar
  • 20.5k
6 votes

Getting image pop ups in QGIS

Like Maj said, I think that he easiest way to do something like you said is based om the map tips functionality. You can find the steps by step description here First you should have a file name or a ...
user avatar
  • 227
6 votes

Moveable ArcGIS Identify Popup Window (Dojo)

This blog has an excellent example of how to make the window draggable and hide the arrow using dojo: https://gavinr.com/2015/04/13/arcgis-javascript-draggable-infowindow Here's the key javascript ...
user avatar
  • 431
6 votes

Changing popup position on Leaflet marker?

You can specify the offsets by using the popupAnchor options, but not where you would expect it. First, you need to specify an icon like this: var myIcon = L.divIcon({ popupAnchor: [0, -30] }); You ...
user avatar
  • 161
6 votes
Accepted

OpenLayers 3 - Feature Popup without Jquery/Bootstrap

This works on OL 3.20.1. This example assumes you already have a feature layer added to your map. HTML <div id="map" class="map"><div id="info"></div></div> CSS #map { ...
user avatar
  • 696

Only top scored, non community-wiki answers of a minimum length are eligible