53
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 popup when the user mouses over, and hide it when the user mouses out:
marker.bindPopup("Popup content");
marker.on('mouseover', function (e) {
...
20
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, layer) {
layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
}
}).addTo(map);
Demo: http:/...
19
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">Visit Google</a>"')
.openOn(map);
}
map.on('click', onMapClick);
17
_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(newContent);
14
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.map);
polyline.bindTooltip("tool tip is bound");
14
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 mouseout when the mouse comes near the arrow of the popup, causing the disappearance of the popup.
gpsMarker = new L.geoJson(gjsonMarker, {
onEachFeature: ...
13
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 numbers
layer.bindPopup(layer.feature.properties.ROWID); // error
// Then you must convert to string
layer.bindPopup('quartier ' + layer.feature.properties....
12
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: 'my-icon-url',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
function onEachFeature(feature, layer) {
layer.bindPopup(feature....
11
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.marker([44.63, 22.65]).bindPopup('something').addTo(map);
marker.openPopup();
//changing the content on mouseover
marker.on('mouseover', function(){
marker....
10
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://github.com/mapbox/leaflet-pip
The fiddle here: http://jsfiddle.net/TnX96/136/ will show exactly how this would work. Or see the code below....
HTML be sure to ...
9
This will helps to show popup on marker mouseover
marker.on('mouseover', function(e) {
//open popup;
var popup = L.popup()
.setLatLng(e.latlng)
.setContent('Popup')
.openOn(map);
});
9
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.
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol....
9
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) {
//layer.bindPopup(feature.properties.name);
layer.on('click', function (e) {
document.getElementById("info").innerHTML = feature.properties....
8
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 code like such:
//Custom functions upon 'edit'
map.on('draw:created', function(e) {
var coords = e.layer._latlng;
console.log(coords);...
8
Just leave out call of .openPopup() method:
mymarker.bindPopup('<p>You are here ' + username + '</p>');
7
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, so the clicks will fall through them and will activate the popup contents of the GeoJSON layer. The CSS code is:
img.leaflet-tile{
pointer-events: none;
}
...
7
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};
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.Sheet_Num + </br> + feature.properties.Date);
}
}).addTo(...
7
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 - Feature Popup without Jquery/Bootstrap
HTML
<div id="map" class="map"><div id="info"></div></div>
CSS
#map {
position: relative;
}...
7
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's JSON' under the 'I Want To...' menu. You can't directly run a batch script from here, but you can copy this JSON code, edit it locally, and then 'upload' the ...
7
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:
var feature = map.forEachFeatureAtPixel(pixel,
function(feature, layer) {
return feature;
}
);
This would return the first clicked feature in ...
7
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,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
}
}).addTo(map);
7
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 bottom of the container; please also note that the behaviour of Leaflet 0.7 versus Leaflet 1.x in regards to this margin did change)
A wrapper for the content:
...
6
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 window while updating. To prevent getting the "No information available" window, just set visibleWhenEmpty to false and hideDelay to 0:
var popup = new Popup(...)...
6
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 snippet:
require([
'esri/arcgis/utils',
'dojo/dnd/Moveable',
'dojo/query',
'dojo/on',
'dojo/dom-class'
], function (
arcgisUtils,
...
6
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. This sample dataset contains a field called ADDRESS which lists the school's address.
Next choose > Configure Popup:
Choose a Custom Attribute Display, and use ...
6
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 path in the points layer attributes associated with your pictures.
Second, edit the map tips with following HTML code :
< img src="[% image %]" width=300 ...
6
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 can then use this icon in your marker options:
var marker = L.marker(location, {
icon: myIcon
}).bindPopup(function (marker) {...}...
6
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 {
position: relative;
}
#info {
position: absolute;
z-index: 10;
background-color: black;
border: 1px solid #ccc;
color: #fff;
padding: ...
5
In terms of having a solution that works "for a bigger number of markers", this is what I do for each layer of point data loaded from GeoJSON:
var layerPopup;
featureLayer.on('mouseover', function(e){
var coordinates = e.layer.feature.geometry.coordinates;
var swapped_coordinates = [coordinates[1], coordinates[0]]; //Swap Lat and Lng
if (map) {
...
5
The Icon example from the ol3js.org pages is fairly close to what you're after. You'll need to make sure you have the correct bootstrap css and js files included, and the important bit of JS is highlighted here:
https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/examples/icon.js#L65-L84
Only top voted, non community-wiki answers of a minimum length are eligible
