Leaflet - change the color of polyline while opening a popup

leaflet polyline
leaflet examples
leaflet draw
leaflet plugins
leaflet heatmap
leaflet-google maps
leaflet mapbox

Here's what I've got. When I hover the mouse cursor over the polyline, it changes color.

        onEachFeature: function (feature, layer) {
    var popupContent = "<div class=popup>Sample text in popup.</div>";
    layer.on('mouseover', function(){
    layer.setStyle({ color: "#0000FF" });
    layer.on('mouseout', function(){
    layer.setStyle({ color: "#000" });

How to keep the polyline's color change while popup is open?


  • polyline is black as default
  • it changes to blue, while I'm hovering the cursor over it
  • when I click on the polyline, popup is opening and polyline stays blue
  • when I close the popup, polyline's color backs to black (default)

Polyline also have events such as popupopen, popupclose. You can change color when popup is open (also you must disable events connected with hover using method .off()).

More info here Popup events

Documentation - Leaflet, Message that will show when intersect }, shapeOptions: { color: '#97009c' } }, // disable map.on("draw:created", function (e) { var layer = e.layer; openOn(​map); } if (layer instanceof L.Polygon) { var popupCoords = e.layer. It is better to open a new issue for them to handle it. https://github.com/Leaflet/Leaflet.draw/​issues. A common use for popups is to have them appear when markers or shapes are clicked. Marker and shape functions in the Leaflet package take a popup argument, where you can pass in HTML to easily attach a simple popup.

You can use a variable to keep track if a popup is open:

var popupIsVisible = false;

polyline.on('mouseover', function (e) {
    if (!popupIsVisible) e.target.setStyle({color: "#0000FF"});

polyline.on('mouseout', function (e) {
    if (!popupIsVisible) e.target.setStyle({color: "#000"});

polyline.on('popupopen', function (e) {
    popupIsVisible = true;
    e.target.setStyle({color: "#0000FF"});

polyline.on('popupclose', function (e) {
    popupIsVisible = false;
    e.target.setStyle({color: "#000"});

Leaflet popup disappear or moved over drawn polygon , Polyline. A class for drawing polyline overlays on a map. Extends Path . fill, Boolean, depends, Whether to fill the path with color. Set it to false to disable filling popupopen, PopupEvent, Fired when a popup bound to this layer is opened Leaflet; L.Map · L.Marker · L.Popup · L.Tooltip · L.TileLayer · L.​TileLayer.WMS · L. L.FeatureGroup works great. By adding all of my polylines to it, I can catch the popup event on any polyline which makes my code very compact. I don't have to declare each individual polyline as a separate variable, then write a catching function for every one which is exactly what I tried to achieve.

You can also keep opacity to zero (o) and change color to any color you want. For e.g.

L.geoJSON(statesData, {
    style: innerstyle

function innerstyle(feature) {
    return {
        color: "#CF01FD",
        weight: 1,
        fillOpacity: .01

//here "statesData" is any geojson dataset

This is what it looks like

L.Polyline, Click on the link option to add text, photos, and videos. html will open a change color when the cursor hovers over the popup close button */. LeafletJS - Multi Polyline and Polygon - In the previous chapter, we learnt how to add various  Popup. Used to open popups in certain places of the map. Use Map.openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map.addLayer to open as many as you want. Usage example. If you want to just bind a popup to marker click and then open it, it's really easy:

Leaflet change marker color on click, When you created the polyline in the previous example, you set the color to red. did not change. Pop ups The lastfew examplesintroduced pop ups. A pop up. Here we use openOn instead of addTo because it handles automatic closing of a previously opened popup when opening a new one which is good for usability. Dealing with events. Every time something happens in Leaflet, e.g. user clicks on a marker or map zoom changes, the corresponding object sends an event which you can subscribe to with a function.

Leaflet.js Essentials, These contributors also deserve honours for the work on leaflet.js. everything on the screen look more consistent and when you want to change the openPopup() portion the popup won't be open when your map loads, but if you We declare a variable with the L.polyline method and step through our points in the array. Python Data. Leaflet.js Maps. . Contribute to python-visualization/folium development by creating an account on GitHub.

Read Leaflet Tips and Tricks, A common use for popups is to have them appear when markers or shapes are clicked. Unlike popups you don't need to click a marker/polygon for the label to be shown. Change Text Size and text Only and also a custom CSS leaflet() "​3px 3px rgba(0,0,0,0.25)", "font-size" = "12px", "border-color" = "rgba(0,0,0,0.5)" ))). There when popup is open light black color shows in background and when we close the popup show normal background color such as white and whatever. When I use this code…