1

I am currently working on an interactive leaflet map. I managed to display markers from a database via php (create an array). Now I want users to create markers with a click on the map. To add a marker with a click is not the problem, nor to delete the marker again. I have created two buttons in a popup (bind to the created marker). While one marker deletes the marker, the other button shall open a form.

I want this form to be displayed with jquery overlay function (in front of the map and the popup). I managed to open the overlay content, when the link is outside the leaflet-script. But I have no idea how to do open the overlay content from inside the leaflet-script. It just doesn't work!

Does anybody had kind of the same problem? I am not very sure if that will work at the end, I build my script step by step. But an overlay function would be very nice to have.

Hope this picture explains my problem.

<html>
<head>
<title>Marker Leaflet Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<style>
html, body, #map {
height: 100%;
width: 100%;
}
html, body {
padding:0px;
margin:0px;
background: rgb(169,219,128); /* Old browsers */
}

/* the overlayed element */
.simple_overlay {
display:none;
/* place overlay on top of other elements */
z-index:100000;
/* styling */
background-color:#333;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}

/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(http://demo.staticfloat.com/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
</style>
<script>
$(document).ready(function() {
$('#test1').fadeOut();
$("img[rel]").overlay();
});
</script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script>
var map = L.map('map').setView([-41.2858, 174.78682], 14);
mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; ' + mapLink,
maxZoom: 18,
}).addTo(map);
var marker = L.marker([-41.29042, 174.78219])
.bindPopup('<img src="http://tinyurl.com/pb9esy2" rel="#test1" alt="" width="100px">')
.openPopup()
.addTo(map);
</script>   
<div style="position: absolute; right:100px; top:20px">
<img src="http://tinyurl.com/pb9esy2" rel="#test1" alt="" width="100px">
</div>
<div class="simple_overlay" id="test1" style="display:none;background:#2f2f2f;padding:20px;">
<img src="http://tinyurl.com/pb9esy2" rel="#test1" alt="" width="100px">" alt=""/>
<br/>
</div>
</body>
</html>
Improve this question
5
  • geo-marburg.de/leaflet_php/leaflet_overlay.jpg
    – Hannes Bl
    Oct 14, 2014 at 15:34
  • I'm not familiar with overlay, but I have used jQuery Dialogues on top of maps. jqueryui.com/dialog/#modal-form
    – evv_gis
    Oct 14, 2014 at 15:41
  • thanks for the idea! i tried so, but i have the same problem. nothing happens, when i put the modal button in the leaflet popup. no reaction on click.
    – Hannes Bl
    Oct 14, 2014 at 18:37
  • Is your application public? Or can you duplicate the issue in a JSFIDDLE? Last resort, posting some of your code would go a long way - make sure to use the code brackets to format it. You can simply edit your post with the URL, JSFIDDLE, and/or code snippet.
    – evv_gis
    Oct 14, 2014 at 19:41
  • right, i added the relevant code and also uploaded it: geo-marburg.de/leaflet_php/test.html As you can see, the overlay only shows up when you click on the logo at the the right top. Not when you click on inside the popup..
    – Hannes Bl
    Oct 14, 2014 at 20:43

1 Answer 1

Reset to default
1

Since the popup content is dynamic, you need a map.on listener for the popupopen event. This will bind the overlay to the image in the popup:

JSFIDDLE

$(document).ready(function () {
    $("img[rel]").overlay();
    $('#test1').fadeOut();

    var map = L.map('map').setView([-41.2858, 174.78682], 14);
    mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; ' + mapLink,
        maxZoom: 18,
    }).addTo(map);
    var marker = L.marker([-41.29042, 174.78219])
        .bindPopup('<img src="http://tinyurl.com/pb9esy2" rel="#test1" alt="" width="100px"/>')
        .addTo(map);

    map.on('popupopen', function () {
        $("img[rel]").overlay();
    });
});

Request #2

JSFIDDLE

function onPopupOpen() {

    var tempMarker = this;

    var ll = tempMarker.getLatLng();
    $('#latitude').val(ll.lat);
    $('#longitude').val(ll.lng);

    // To remove marker on click of delete button in the popup of marker
    $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);
    });

}
Improve this answer
3
  • Thanks a lot! I will try this, and i will certainly add a jsfiddle to my next question ;)
    – Hannes Bl
    Oct 15, 2014 at 18:04
  • OK, one step further! I don't know if it is necessary to ask a new question. Hopefully this will be my last leaflet-question in this project: I am trying to put the coordinates of the created marker into a form. Unfortunately, my approach doesn't work. I added two script lines and a html form to my jsfiddle. Please have a quick look! Thank you! Maybe there is an easy solution again. e.latlng doenst seem like a proper js-variable to me? jsfiddle.net/freeze2000f/tsnufvw7
    – Hannes Bl
    Oct 21, 2014 at 19:49
  • @HannesBl - See the Second JSFIDDLE above. Make sure to mark this as the correct answer so others can find the information as well.
    – evv_gis
    Oct 21, 2014 at 20:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.