Leaflet marker cluster and popups

Question

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.

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:

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

3. 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.