dwilhelm89 / leaflet.styleeditor Goto Github PK

add a delete function

Is there a way to use this library from the NPM registry?

Providing a forms array in the options it would make sense to only show the provided features.
Additionally Custom elements should be shown as well.

I want to add buttons and images to the places indicated in the picture. How can I do this?

when i draw a eg a circle and a rectangle, and then edit one of them with the styleeditor, both shapes change.

another question...is it possible to use the styleEditor functionality with the button from Leaflet.Draw or vice versa ?

Hi, exactly where on the code can I change the default opacity values that appears on the side bar menu?

I tried on the js but didnt work, maybe not the correct line or place.

Can I have some help with that?

Thanks

I cannot click the opacity and fill opacity input box to enter the value.
I am using iOS 10. Version 10.2.1, iPhone 6s.

I test it with your demo link.

thanks

Using Draw plugin with StyleEditor has an error when editing style for a previous added element.
Selected style is applied to ALL elements instead to apply only to selected element.

here is an error :
TypeError: leaflet_styleeditor__WEBPACK_IMPORTED_MODULE_7__.StyleEditor is not a function

thx in advance

I noticed an issue with using the StyleEditor in Internet Explorer. When trying to open a page with a Leaflet Map with the StyleEditor integrated, the page doesn't load and the console throws an error. It says that it's looking for a ':' in the Form.js file on the line with the function called "showFormElementForStyleOption". I believe this may be an error with ES6 as everything works fine in Firefox, Chrome and Edge.

Is this is a known issue and is there a possible resolution to make things work in Internet Explorer?

I am working on a Leaflet project using this library and Bootstrap.min.css. Upon including the minified Bootsrap CSS in the project the icon for the StyleEditor button becomes quite small. If I comment out the Bootstrap CSS the Style Editor button is normal sized.

Selected images have a border to highlight - if using an image spreadsheet without borders they are shown - which does not look good.

Add a function to allow 3rd party applications to open the styleeditor for elements

show the popup while editing the popup text as proposed in #61

Would it be possible to create a new release version, so that i18n can be used when downloading the project from bower?

Maybe this would be a great opportunity to also fix the last open issue :)

Hi,
I would like to be able to do an action when clicking the editor button (the one which enables editing).
I tried this but it did not work,

$(".leaflet-control-styleeditor-interior").on('click', function(){
   alert('hello');
});

How can I do it?
Many thanks.

Creating a marker in Leaflet Draw should create the defaulMarker given by the StyleEditor.

Creating a geometry should respect the defaultColor (maybe add defaultFillColor).

Hi,
I have the following layer:

lyrPow = L.geoJSON(jsnPow,{pointToLayer:returnPow}).addTo(mymap);

function returnPow(json, latlng) {
                var att = json.properties;
                var name = att.distname;
                var custompopPow = '<p style="padding: 3px 3px;text-align: center;font-family: sans-serif;color:white;margin-bottom: 0;font-weight: bold;font-size: 12px;background:#BF40BF">Place Of Worship</p><b>Name: </b>'+name;
                
                return L.marker(latlng, {opacity:1, fillOpacity:1, icon:iconPow}).bindPopup(custompopPow, {permanent: false, opacity: 0, className : 'popupCustom', closeButton:'', maxWidth:400})

var svgPow = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pray" class="svg-inline--fa fa-pray fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" height="12" width="12"><path fill="darkorchid" d="M256 128c35.35 0 64-28.65 64-64S291.35 0 256 0s-64 28.65-64 64 28.65 64 64 64zm-30.63 169.75c14.06 16.72 39 19.09 55.97 5.22l88-72.02c17.09-13.98 19.59-39.19 5.62-56.28-13.97-17.11-39.19-19.59-56.31-5.62l-57.44 47-38.91-46.31c-15.44-18.39-39.22-27.92-64-25.33-24.19 2.48-45.25 16.27-56.37 36.92l-49.37 92.03c-23.4 43.64-8.69 96.37 34.19 123.75L131.56 432H40c-22.09 0-40 17.91-40 40s17.91 40 40 40h208c34.08 0 53.77-42.79 28.28-68.28L166.42 333.86l34.8-64.87 24.15 28.76z"></path></svg>'; 
                var iconUrlPow = 'data:image/svg+xml;base64,' + btoa(svgPow);
                //var iconUrl = 'data:image/svg+xml;base64,' + svg;
                var iconPow = L.icon({
                iconUrl: iconUrlPow,
                });

But when clicking on one element I get the following error:

Leaflet.StyleEditor.js:1084 Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
at e._getMarkerUrl (Leaflet.StyleEditor.js:1084)
at e._getMarkerUrlForStyle (Leaflet.StyleEditor.js:1079)
at e.createMarkerIcon (Leaflet.StyleEditor.js:1062)
at e._createMarkerIcon (Leaflet.StyleEditor.js:945)
at e.setNewMarker (Leaflet.StyleEditor.js:884)
at e.setStyle (Leaflet.StyleEditor.js:905)
at Leaflet.StyleEditor.js:934
at Array.forEach ()
at e.resetIconOptions (Leaflet.StyleEditor.js:933)
at e.initChangeStyle (Leaflet.StyleEditor.js:1524)

Any idea how can I solve this?

With normal L.marker (without L.Icon) it works well.
Many thanks.

@dwilhelm89 could you create an travis ci account for this project?

At first I want to thank you for this great leaflet plugin.
It is capably of all the thinks I wished for when first thinking about such a possibility (and even more).

However, I noticed that there are some minor issues that I want to report/discuss here:

1. Build a release (so it can be integrated into build process more easily) - That should be easy right?

2. The usability of the style editor on mobile devices (I tested with my iPad) is not that good.
   The main problems I discovered are:

• the tooltip is positioned badly (there is no mousemove event when using a tablet. Shouldn't the tooltip be positioned near to the plugin's icon when clicking on the icon?)
• the icon's size is smaller compared to the zoom controls (and all other leaflet controls) when used on an ipad.
• the spinner controls of the opacity controls does not work on my tablet at all. I can not enter a number (since I can not focus the element for some reason) and I do not see the spinner up/down icons.

3. Some more usability usability issues are (they are not related to the device used):

• the color chooser behaves differently when using it for the first time and after using the line color chooser. At first it changes the color of the line and the fill color. Afterwards it only changes the fill color. I think that this should be changed to increase usability (especially, since it does not change back when collapsing the window and not seeing the line color at all). Maybe the color field should always change line and fill color...
• do we really need the top controls to expand/collapse the options and to close the options. Maybe it would look better just to float a panel from the right/left into the map without these controls (and without padding), I believe that it makes sense to replace the expand/collapse button with a "show more/show less options" text link and to remove the x at all (the panel should then only be closed when clicking on the activated sytleEditor icon)

What do you think about these changes (usability is always some kind of personal preference, isn't it)?

it does not works for me in leaflet.draw v1.0.4

let drawControl = new L.Control.Draw({
      draw: {
    position: 'topright',
    ........
}
}

change to the following works

let drawControl = new L.Control.Draw({
      position: 'topright',
      draw: {
     ...
}
}

https://github.com/dwilhelm89/Leaflet.StyleEditor/blame/master/src/StyleEditorWithLeafletDraw.html#L79

The docs in the README make it look like you can disable a single form. While this might be possible with some hacks, it is not as simple as the README makes it out to be.

{'geometry': {'color': false}}

The above config does not just disable the color form, it disables ALL forms for geometry. This can be mitigated by specifying all other forms in the map, though this is IMO a hack.

In the demo with leaflet.draw when i have two polyline and use "Style editor" toolbar item, select one polyline and change color it's update all polyline.

The current version does not work in IE-11. Blame is the arrow syntax, which is not supported by IE. This is only used in about 3 places in the code. It would be great if you could replace those places.

Write and automatically execute tests when pushing.

Sorry for releasing a broken build 🤕

... and increments by 1.

I would expect it to in/decrease by 0.1 or smaller.

Hi,
The plugin is quite simple and straightforward to use. I could easily identify it. However, in my tests, I saw that the sliders did not work on polygons with holes.
Below is an example geojson;

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature","properties": {}, "geometry": { "type": "Polygon",
        "coordinates": [
          [
            [
              11.620617,
              48.236794
            ]
            [
              11.620617,
              48.237251
            ]
            [
              11.725159,
              48.237251
            ]
            [
              11.725159,
              48.236794
            ]
            [
              11.620617,
              48.236794
            ]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              11.575298,
              48.207401
            ]
            [
              11.575298,
              48.247197
            ]
            [
              11.712112,
              48.247197
            ]
            [
              11.712112,
              48.207401
            ]
            [
              11.575298,
              48.207401
            ]
          ]
        ]
      }
    }
  ]
}

Best regards.

https://unpkg.com/[email protected]/dist/images/marker-icon-2x.png

Hello,
The demos don't seem to be working completely - cannot update markers on one demo, and cannot do anything on the demo with leaflet.draw.
Not sure if this is something to do with the page or the plugins.
Thanks,
patrick

UPDATE : Seems to be working ok now - issues seems to be related to IE and the Browser Mode and Document Mode settings

Allow positioning of labels - with offset and/or direction.

Hi!

When the leaflet map is a child of an HTML form, clicking on the nextBtn calls the form submit (what we don't want).

To reproduce, just replace <div id="map"></div> by <form><div id="map"></div></form> in https://github.com/dwilhelm89/Leaflet.StyleEditor/blob/master/src/StyleEditorWithLeafletDraw.html and:

1. Draw a feature
2. Click on the top right button "Choose another element you want to style" to close the style editor
3. Watch the page reloading (because the form was submitted)

Thanks!

Congratulations to the great plugin!
In my offline environment, unfortunately, I can not upload images from the Internet. Is there a marker without this requirement or is there a way to host the preview-images myself?
Maybe you already have a marker for awesome markers?

I have a leaflet map with several layers (polylines and markers). Only one of the layers is active at the beginning; the rest are activated and added from layers control. The plugin works fine for the layer that is activated at the beginning, but it does not work for the rest of the layers. Any suggestions? Thanks.

When drawing individual objects successively, each objects can be styled individually. But if I close the form, trigger style editor, re-select one of the objects, the style will apply to all. Checking the currentElement._layers, all layers (drawn objects) are in it.

Hello.

I'm using StyleEditor with Leaflet.draw and I have a question. Is it possible, when several polygons are drawed on the map, to give each of them a different color?

Thanks!
Jérôme

This makes debugging easier when something goes wrong. It also makes it easier to look at the source.

Any plan to add these functions?

Or how can I add these functions to extend this plugin or modify its code?

Thanks for advance.

I wonder as to whether it is simply possible to copy one of the other functions to address radii of circleMarkers? Right now, if initial conditions are set well enough, you can adjust the width of the border to make the circle bigger. However, given its current form, you can not separate the fillColor from the color within the styling.

Here's a demo of circleMarkers in use with styleEditor ... https://jsfiddle.net/redchair218/x76jzLys/3/

@fupduck I realize this question is not specific to your library but figure you are a good person to ask. Especially since I'm running into this while integrating your library in the Maps extension for MediaWiki.

Is there an out-of-the-box way to import and export layer data (positions and styling) in some standard format? Preferably using GeoJSON. I've been looking at the Leaflet docs and code and have the impression there is not, at least not in Leaflet itself.

Having this capability seems like something likely relevant to many users of your library, as this is needed to somehow persist style edits.

(I've also posted this question on the Leaflet issue tracker: Leaflet/Leaflet#6904)

User of Leaflet.Editabe had issues.

Try to support it better.

How do I disable Leaflet.draw delete button while I'm editing?
And viceversa, how to disable StyleEditor while I'm deleting with Leaflet.draw?

What I mean is that, if I click on the Leaflet.draw delete button, and I click on on the StyleEditor button (or viceversa), when I click on an object, it gets deleted but the StyleEditor sidebar also shows.

I know that users shouldn't do that, but I'd prefer to prevent them to even try.

Using master (8054a4f)

When I enter edit mode, the marker changes. There appears to be no way to get back to the default. Closing edit mode does not restore the marker.

Is there a way to fully disable marker icon editing? I do not need this feature at present.

Hi,

Thanks for all your hard work!

This behaviour is provoking this bug on leaflet:

Leaflet/Leaflet#6075

Can you help?

create moooore div 'leaflet-styleeditor-tooltip-wrapper' .. and no delete it...
addButtons: function() {
var nextBtn = L.DomUtil.create('button', 'leaflet-styleeditor-button styleeditor-nextBtn', this.options.styleEditorHeader);
nextBtn.title = 'Choose another element you want to style';

    L.DomEvent.addListener(nextBtn, 'click', function(e) {
        this.hideEditor();
        -------this.createTooltip();---- delete for this
        e.stopPropagation();
    }, this);
},

createTooltip: function() {
    if (!this.options.showTooltip) {
        return;
    }
if( typeof this.options.tooltipwrap === 'undefined' ) {
    this.options.tooltipwrap = L.DomUtil.create('div', 'leaflet-styleeditor-tooltip-wrapper', document.body);
}

if(( typeof this.options.tooltip !== 'undefined' ) && ( this.options.tooltip !== null )) {
this.options.tooltip.parentNode.removeChild(this.options.tooltip);
this.options.tooltip = null;
}
    this.options.tooltip = L.DomUtil.create('div', 'leaflet-styleeditor-tooltip', this.options.tooltipwrap);
this.options.tooltip.innerHTML = 'Выберите элемент для редактирования стиля';
},


removeTooltip: function() {
    if (this.options.tooltip && this.options.tooltip.parentNode) {
    this.options.tooltip.parentNode.removeChild(this.options.tooltip);
    this.options.tooltip = null;
    }
}

Hello,

I need to save the leaflet feature layers to a database after they've been created/ edited. I can capture editing of the geometry via draw:edited... is there a similar event fired when the style is edited?

Thanks,
patrick

Hi,

In Leaflet.StyleEditor.js line 1111:

there is a function setupGlyphiconMarker().

It combines Mapbox v3 marker with Bootstrap 3 Glyphicon icons.

I want to add Font-Awesome icons just like.

https://github.com/lennardv2/Leaflet.awesome-markers

Thanks.

I would like to change the title of some form element.
How can I do that without modifying the script files?

Hello,

Trying to implement StyleEditor with following function below on this link:
https://olanaso.github.io/Leaflet-Select-Polygons/#

The problem is that it "it override each other" for the color and color fill of the polygons.
I need the summery function from multiple select polygons, but I also want to be able to have a group of polygons in one color and another group of polygons in another color to differentiate them from each other. Groups of polygons can be several and not being only two.

Any help is fantastic and remember not an expert in javascript... thanks