Say I had some code like this:
L.marker({lat: 30.266293, lon: -97.656965}, {icon: myIcon})
.addTo(mymap)
.bindPopup("<a href='#' class='test'>click me!</a>");
I'd like to be able to do $('test').click(function() { ... }); after the popup has loaded.
How might I do that? Is there some sort of onpopupload event I could use?
Yes there is an event on the layer popupopen
var marker = L.marker({lat: 30.266293, lon: -97.656965}, {icon: myIcon})
.addTo(mymap)
.bindPopup("<a href='#' class='test'>click me!</a>");
marker.on('popupopen',(e)=>{
$('.test').click(function() { ... });
});
PS: That the click event will added to the test element, you have to add a point before test, else the element will not found --> $('.test')
Related
I'm using the Leaflet.markercluster plugin (https://github.com/Leaflet/Leaflet.markercluster) and
I'm struggling to update the markerClusterGroup Icon when the event spiderfied is fired.
Code:
// Initiate markers w/ a markerClusterGroup and the default icon
var markers = L.markerClusterGroup({
showCoverageOnHover: false,
});
// Set marker, bind it to Popup and add the markers as an layer to the map
markers.addLayer(L.marker(...))
.bindPopup(
L.popup({offset: L.point(0,0)}).setContent(
`...`
).openPopup()));
map.addLayer(markers);
// Try to update the default markerClusterGroup icon when a markerClusterGroup is spiderfied
markers.on('spiderfied', function (a) {
console.log('spiderfied');
markers.options = {
showCoverageOnHover: false,
iconCreateFunction: function() {
return L.divIcon({ html: '<b>' + 'Test' + '</b>' });
}
};
markers.refreshClusters();
});
What am I doing wrong here? Any advices?
Thanks in advance!
I've tried to get: https://github.com/Leaflet/Leaflet.markercluster#refreshing-the-clusters-icon implemented
I've done research on internet
Does somebody know how you can re-add an icon (symbol) after changing the map style?
The situation is as follows:
I created a map with two views: a street view and satellite view. On the street view I also added an icon (symbol) that show the place where someone lives. When I switch between the two views the icon disappears and doesn't come back again. How can I reload the icon again?
Basically I want to combine the following two examples:
Change a map's style
https://docs.mapbox.com/mapbox-gl-js/example/setstyle/
and
Display a popup on click
https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/
How can it be done?
Thank you very much for your answer!!
I looked at your code and compared it with my code and the only thing that I had to change was map.on('load', ...) to map.on('style.load', ... ) and that did the trick!
Here is the complete code:
HTML
<div id='openstreetmap' style='height: 420px'>
<div id="mapbox-menu">
<input id="streets-v11" type="radio" name="rtoggle" value="streets" checked="checked" />
<label for="streets">Kaart</label>
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
<label for="satellite">Satelliet</label>
</div>
</div>
JavaScript
// Set an access token.
mapboxgl.accessToken = '';
// Create a map object.
var map = new mapboxgl.Map({
container: 'openstreetmap',
style: 'mapbox://styles/mapbox/streets-v11',
center: [5.880299, 51.834706],
zoom: 15
});
// Set the controls.
map.addControl(new mapboxgl.NavigationControl({showCompass: false}), 'top-right');
// Create and add a list of places.
map.on('style.load', function() {
map.addSource('places', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'description':
'<strong>Header</strong><p>text</p>',
'icon': 'music'
},
'geometry': {
'type': 'Point',
'coordinates': [5.880299, 51.834706]
}
}
]
}
});
// Add a layer showing the places.
map.addLayer({
'id': 'places',
'type': 'symbol',
'source': 'places',
'layout': {
'icon-image': '{icon}-15',
'icon-size': 1.25,
'icon-allow-overlap': true
}
});
// Show a popup.
map.on('click', 'places', function(e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer.
map.on('mouseenter', 'places', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Reset the cursor.
map.on('mouseleave', 'places', function() {
map.getCanvas().style.cursor = '';
});
});
// Switch between street view and satellite view.
var layerList = document.getElementById('mapbox-menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
The only (small) problem is that the close button doesn't work anymore. Have an idea about that?
Mapbox-GL-JS doesn't distinguish between layers that are part of the basemap, and layers that you added. So if you want to "retain" additional layers, you really just have to add them again.
Write a function to add your additional layers. Then, whenever you change basemap, just call that function again.
Thanks again!!
I moved the following three block out of the function map.on('style.load', ...):
map.on('click', 'places', ...)
map.on('mouseenter', 'places', ...)
map.on('mouseleave', 'places', ...)
And that was it!
Thank you for helping me!
I've used this Tutorial in order to create a guide
http://www.hongkiat.com/blog/introjs-step-by-step-guide-tutorial/
$(function(){
var introguide = introJs();
// var startbtn = $('#startdemotour');
}
introguide.setOptions({
steps: [
{
element: '.nav-bar',
intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',
position: 'bottom'
},
{
element: '.nav-logo',
intro: 'Click this main logo to view a list of all Hongkiat demos.',
position: 'bottom'
},
{
element: '.nav-title',
intro: 'Hover over each title to display a longer description.',
position: 'bottom'
},
{
element: '.readtutorial a',
intro: 'Click this orange button to view the tutorial article in a new tab.',
position: 'right'
},
{
element: '.nav-menu',
intro: "Each demo will link to the previous & next entries.",
position: 'bottom'
}
]
});
But I could not find a way or I did not understand :)
How to trigger introJs With a button or link.
In addition, I've search on the Internet User's Guide
But I did not find enough information on the subject:(
I tried this:
Show me how
&
<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
But nothing happens
please help me
The example is right there on your tutorial page:
var startbtn = $('#startdemotour'); // <-- you need to uncomment this line, or just use $('#startdemotour').on()
startbtn.on('click', function(e){
e.preventDefault();
introguide.start();
$(this).hide();
});
I have a mobile page showing a map using angular-leaflet-directive 0.7.11, and have declared my required events like so:
$scope.map = {
events: [
'mousedown',
'contextmenu'
],
...
}
$scope.$on('leafletDirectiveMap.mousedown', function (event) {
debugger;
});
Where the debugger statement is, the event variable contains no information about where the map was clicked. The same event format was provided by the directive when the contextmenu event is triggered.
In fact, if I inspect the entire event variable, it is just an Object, not an Event:
Are the docs wrong? Is the example missing something? How can I obtain the X/Y or Lat/Lng for the particular position that I have right-clicked (tap-hold)?
You need to use the 'leafletEvent'. Try this:
myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {
$scope.$on('leafletDirectiveMap.mousedown', function (event, leafletEvent) {
leafletData.getMap().then(function(map) {
map.on('click', function(e) {
console.log('e');
console.log(e);
console.log('e.latlng:');
console.log(e.latlng); // L.LatLng {lat: 19.642587534013046, lng: -4.5703125}
});
});
});
}]);
I try to build a map with openlayers3 with a group of markers and popups. The markers and the popups work so far, but when I click on one marker (popup shown) and then -without clicking in the map again- on another one, it shows a popup with the same content as the first one. I have already done research, but can't find something helpful. So here's the part for my popups:
//popup
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
Hope somebody can help me. Thanks!
I was having the same issue and found my solution here https://gis.stackexchange.com/questions/137561/openlayers-3-markers-and-popovers
Try changing your
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('information')
});
to
$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-content', feature.get('information'));
I've made an example for you. Take a look!
You gotta "write" some content on each marker.
http://embed.plnkr.co/hhEAWk/preview