[GIS] Leaflet: Panes and Popups

layersleafletpopuptiles

I have a leaflet map with a circleMarker layer that has a popup. This works as expected.

dotLayer = new L.geoJson(dots, {
  pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, style(feature));
    },
  onEachFeature: onEachDot
  }).addTo(map);

The problem is that I have a tile label layer which should be drawn on top for the labels to be legible.

I can put the tile layer to the markerpane and add the layer after the marker layer to show. But like this the popup will no longer work.

var lDarkMatterLabels = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_only_labels/{z}/{x}/{y}.png',{pane: 'markerPane'});
map.addLayer(lDarkMatterLabels);

I have a jsfiddle here.

Best Answer

Follow the map panes tutorial and create an explicit separate pane for the labels.

Related Solutions

[GIS] Problems with features, popups and strategy with OpenLayers

you can catch your opened(active) popup with this way:

map.popups[a]

you can change so update its content:

map.popups[a].contentHTML = 'Test Content';
map.popups[a].redraw();

or

map.popups[a].setContentHTML = 'Test Content'

you can show or hide your popup:

map.popups[a].show();
map.popups[a].hide();

you can update position of your popup:

map.popups[a].lonlat.lon = 10;
map.popups[a].lonlat.lat = 10;
map.popups[a].updatePosition();

for openlayers cluster you should check out Cluster Strategy Example here. Only one thing you should do is that define fillColor or externalGraphic for your cluster.

          var style = new OpenLayers.Style({
                pointRadius: "${radius}",
                fillColor: "${getColor}",
                fillOpacity: 0.8,
                strokeColor: "#cc6633",
                strokeWidth: 2,
                strokeOpacity: 0.8
            }, {
                context: {
                    radius: function(feature) {
                        return Math.min(feature.attributes.count, 7) + 3;
                    },
                    getColor: function(feature) {
                        return // Your color selection logic;
                    }
                }
            });

As the last question, i dont understand very well what you want? but try to use removeFeatures instead of destroyFeatures....

i hope it helps you...

[GIS] Leaflet marker cluster and popups

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.

enter code here
//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

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.

Cheers,
Ramesh

Best Answer

Related Solutions

[GIS] Problems with features, popups and strategy with OpenLayers

[GIS] Leaflet marker cluster and popups

Related Question