I want to develop a map with Leaflet marker cluster. You can see how it looks like here: https://github.com/danzel/Leaflet.markercluster

But I need that my markers have popups with more information than just a name (three more rows). I don't have many those markers. In this example with clustering markers are only written by long and latitude, and one information without any css and popups (http://danzel.github.com/Leaflet.markercluster/example/realworld.388.js).

So how can I style my popups and enter more informations, and also how can I style my marker icons?

Also, I would need that popup shows up on mouse over, not on click.


1 Answer 1

  1. Marker Popups: Content in popups are pure HTML. You can add multiple rows with data. Here is a code snippet to add a marker and popup multi-row text on mouse click. You can add rows, create table or change fonts/ colors - whatever is allowed in HTML/CSS.
    // Add Marker with Popup Text
    var mymarker = new L.Marker(map.getCenter());
    mymarker.addTo(map).bindPopup(map.getCenter() +"<br>" + 
                                "Min Zoom" + map.getMinZoom() +"<br>" + 
                                "Max Zoom" + map.getMaxZoom());

The result would appear as in the figure below:

enter image description here

  1. Custom Markers: You can look at Custom Icons which has detailed steps with examples

  2. Popup on MouseOver: I would recommend against Mouseover in maps unless you have an absolute need. Think of today's tablets and mobile devices. They don't support MouseOver. If the number of markers per bounding box goes up - it could get problematic with usability and performance. Should you absolutely need one you could try extending the event object.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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