Skip to content
A small plugin for leaflet which allows the author to apply removable or editable options to a popup
JavaScript CSS
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Create LICENSE Sep 12, 2019
README.md Update README.md Sep 12, 2019
leaflet-popupMod-gif.gif Add files via upload Sep 12, 2019
popupMod.css Add files via upload Sep 12, 2019
popupMod.js cleaning up spaces and comments Sep 16, 2019

README.md

Leaflet Popup Modifier

A small plugin for leaflet which allows the author to apply removable or editable options to a popup

Installation

Just download the .js and .css files and include them in your project. The .js file must come after your leaflet script but before your personal script:

<head>
  
      <!-- Load Leaflet from CDN -->
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
      integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
      crossorigin=""></script>

      <!-- Leaflet Popup Modifier -->
      <script src="js/popupMod.js" type="text/javascript"></script>
      <link rel="stylesheet" href="css/popupMod.css">

      <!-- Personal style and script file links -->
      <link rel="stylesheet" href="css/style.css">
      <script src="js/script.js" type="text/javascript" defer></script>

</head>

Using the plugin

When creating a popup, you can select options to decide of the popup will be able to remove its source by adding the option.

var myMarker =  L.marker( [33.270, -116.650] );
myMarker
   .bindPopup( "Center Marker" , {removable: true} )
   .addTo(leafletMap)

You can also choose to make the text within the popup editable:

var myMarker =  L.marker( [33.270, -116.650] );
myMarker
   .bindPopup( "Center Marker" , {editable: true} )
   .addTo(leafletMap)

Or Both:

var myMarker =  L.marker( [33.270, -116.650] );
myMarker
   .bindPopup( "Center Marker" , {removable: true, editable: true} )
   .addTo(leafletMap)

You can of course just apply this to a popup without a marker. However it can not be made removable, as there is no source to remove.

var popup = L.popup({editable: true})
    .setLatLng( [33.270, -116.650] )
    .setContent('This is fully editable')
    .openOn(leafletMap);

Planned improvements:

Currently the removal button says "Remove this marker," but not every popup originates from a marker. Plans to change the word 'marker' to 'circle,' 'polygon,' 'line,' etc., automatically based on the source type in the works.

License

GNU GENERAL PUBLIC LICENSE Version 3

You can’t perform that action at this time.