43
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) {
...
17
As the Leaflet documentation states, Marker#bindPopup takes an HTML string as first parameter.
If you want your lines to appear on different lines, you need to add the proper HTML markup. In your case, a definition list seems the most relevant.
Hence:
var list = "<dl><dt>Student</dt>"
+ "<dd>" + title + "</dd>"
...
17
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);
14
_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
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:/...
11
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: ...
11
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....
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
beside all answer you can make your popup as google map popup style. check out this link which will help you to make g-style popup...
popup script codes,
popup images,
and so css...
i hope it helps you..
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....
9
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....
8
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....
7
Think you almost have it. It may be that you need to reset the handle on connect...
clickHandle = dojo.connect(map, "onClick", clickListener);
The following is working for me...
var agolPopupClickHandle,
agolPopupclickEventListener;
//get the response
.then {
agolPopupClickHandle = response.clickEventHandle;
...
6
for getting one popup info, you should do this:
map.popups[0]; // the firstly added popup
for removing one popup:
map.removePopup(map.popups[0]); // it will destroy firstly added popup
map.popups[0].destroy() // the same thing
for removing all popup from maps:
var pops = map.popups;
for(var a = 0; a < pops.length; a++){
map.removePopup(map.popups[...
6
This is not a Leaflet-specific problem, but rather a question of Javascript.
Store your markers in a collection, and then bind openPopup to a 'mouseover' event for all of them.
For example, with an array:
var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>
for (var i = 0; i < markers.length; i++) {
var ...
6
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");
6
To all the people who are looking for a way to collect data via Popup as asked in my question, this is how I solved it (same script as in question except the added popup-function and the tool "select"):
function init() {
Save-strategy
var saveStrategy = new OpenLayers.Strategy.Save();
//empty map, bounds are test-layer bounds (EPSG:32647)
map = new ...
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
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
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;
}
...
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
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);...
6
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(...
6
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;
}...
6
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 ...
6
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 ...
5
Just a note, from my recent task - to create custom popup in OpenLayers for WMSGetFeatureInfo.
What I do:
var highlightControl = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'url to wms',
infoFormat: 'text/html',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event) {
this_is_popup_handler_function(...
Only top voted, non community-wiki answers of a minimum length are eligible
