Comment personnaliser l'apparence de la popup popup?

Je suis à la recherche à la personnalisation d'une carte construite à l'aide de notice et je voudrais personnaliser le Menu (L. popup).

La seule méthode que je peux penser à est de construire une coutume popup couche avec ma nouvelle boîte de dialogue dans et repositionner ce à chaque fois que l'utilisateur interagit avec un marqueur, de cette façon, le popup reste alignée lorsque l'utilisateur fait glisser la carte.

Quelqu'un est-il au courant de toutes les alternatives existantes ou des façons de le faire?

Grâce

source d'informationauteur ArthurGuy

  1. 29

    Vous devez personnaliser l'apparence à l'aide de css. Les sélecteurs suivants sont probablement intéressant:

    .leaflet-popup-content-wrapper {
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
}

.leaflet-popup-tip-container {
}

    Selon votre navigateur, vous pouvez utiliser des outils comme Firebug pour Firefox ou le construire dans les outils de développement de Chrome/Safari (clic droit n'importe où sur la page et cliquez sur Inspecter l'élément, ou l'utilisation raccourcis), pour inspecter le message et de trouver d'autres sélecteurs css que vous souhaitez modifier.

    Pour étendre ses fonctionnalités, vous devriez commencer par regarder les popup code source. Regarder les sources des autres Dépliant des composants jusqu'à ce que vous obtenez une certaine idée de ce qui se passe. Étendre le Popup de classe de la manière suivante, et puis changer tout ce que vous voulez: 

    L.CustomPopup = L.Popup.extend({
  //You changes here
});
  2. 3

    Il est un exemple de plus à mapbox qui utilise leaflet.js.
    L'exemple montre comment utiliser info-bulle personnalisée dans la fiche.

    <style>
/*
 * These CSS rules affect the tooltips within maps with the custom-popup
 * class. See the full CSS for all customizable options:
 * https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
*/
.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
  }
.custom-popup .leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,0.5);
  }
.custom-popup .leaflet-popup-tip-container {
  width:30px;
  height:15px;
  }
.custom-popup .leaflet-popup-tip {
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:15px solid #2c3e50;
  }
</style>

<div class='custom-popup' id='map'></div>
  3. 2

    Une autre façon de personnaliser popup est par la création de votre css personnalisé en classe de popup comme:

    <style>
/* css to customize Leaflet default styles  */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
    background: #e0e0e0;
    color: #234c5e;
}
</style>

    et dans vous carte div vous pouvez définir le marqueur contextuel personnalisé avec le bindPopup méthode et le passage d'un customOptions de l'objet où vous mentionnez le css class name: 

    //create popup contents
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>";

//specify popup options 
var customOptions =
    {
    'maxWidth': '400',
    'width': '200',
    'className' : 'popupCustom'
    }


var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map);

//bind the custom popup 
marker.bindPopup(customPopup,customOptions);

    Espère que cela aide.