question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it possible to style edit marker icons?

See original GitHub issue

Is any way to change the style of the marker icons in a polyline when it is in edit mode?

When instantiating the drawControl I know that this it is possible:

var drawControl = new L.Control.Draw({
    polyline: {
        icon: new L.DivIcon({
            iconSize: new L.Point(10, 10),
            className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
        })
    }
});

However this only applies to drawing and the style reverts back to the “default” when entering edit mode. The only solution for achieving this when editing is to override the leaflet-editing-icon css class which is kind of a dirty hack.

Am I missing something?

Issue Analytics

  • State:closed
  • Created 11 years ago
  • Reactions:1
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
jacobtoyecommented, Feb 11, 2013

Implemented in 0.2. Can do:

drawControl.setDrawingOptions(
    polyline: {
        icon: new L.DivIcon({
            iconSize: new L.Point(10, 10),
            className: 'leaflet-div-icon leaflet-editing-icon my-own-class'
        })
    }
);

Will add to README.

3reactions
mfdickersoncommented, Sep 28, 2015

This worked:

L.Edit.Poly = L.Edit.Poly.extend({
    options : {
        icon: new L.DivIcon({
             iconSize: new L.Point(20, 20),
             className: 'leaflet-div-icon leaflet-editing-icon my-own-icon'
        })
    }
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom bullets with CSS ::marker - web.dev
Custom bullets with CSS ::marker ... It is now trivial to customize the color, size or type of number or bullet when using...
Read more >
Using ::marker to Style Your Lists - Hall Internet Marketing
Use the new ::marker pseudo-element to change marker colors, content, and hover content of your lists more efficiently than ever before.
Read more >
Custom Markers | Maps JavaScript API - Google Developers
This tutorial teaches you how to change the icon of a Google maps marker. It is beneficial to know the basics of creating...
Read more >
Create custom map marker icon with Leaflet - Geoapify
In this article, we would like to show you how to create amazing and easy to style map marker pins with Material Design...
Read more >
Is it possible to style and/or change icons related to labels on ...
Is there a way to style the background-color of the icon, for instance? As far as I understood they aren't markers, therefore API...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found