web-dev-qa-db-fra.com

Comment personnaliser l'apparence de la fenêtre contextuelle du dépliant?

Je cherche à personnaliser une carte construite à l'aide d'un dépliant et je voudrais personnaliser le Popup (L.popup).

La seule méthode à laquelle je peux penser est de créer une couche contextuelle personnalisée avec ma nouvelle boîte de dialogue et de la repositionner chaque fois que l'utilisateur interagit avec un marqueur, de cette façon la fenêtre contextuelle reste alignée lorsque l'utilisateur fait glisser la carte.

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

Merci

javascriptleaflet
23
ArthurGuy

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

.leaflet-popup-content-wrapper {
}

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

.leaflet-popup-tip-container {
}

Selon votre navigateur, vous pouvez utiliser des outils tels que Firebug pour Firefox ou les outils de développement intégrés dans Chrome/Safari (cliquez avec le bouton droit n'importe où sur la page et cliquez sur Inspecter l'élément, ou utilisez raccourcis ), pour inspecter le popup et trouver des sélecteurs css supplémentaires que vous voudrez peut-être modifier.

Pour étendre sa fonctionnalité, vous devriez commencer par regarder le code source popup . Examinez les sources des autres composants de Leaflet jusqu'à ce que vous ayez une idée de ce qui se passe. Étendez la classe Popup de la manière suivante, puis modifiez ce que vous voulez:

L.CustomPopup = L.Popup.extend({
  // You changes here
});
36
Robert Kajic

Une autre façon de personnaliser les popups est de créer votre classe CSS personnalisée pour les popups comme:

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

puis dans votre carte div, vous pouvez définir le popup personnalisé du marqueur avec la méthode bindPopup et en passant un customOptions 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);

J'espère que ça aide.

14
Adrian C.

Il y a un exemple sur mapbox qui utilise leaflet.js. L'exemple montre comment utiliser info-bulle personnalisée dans la brochure .

<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>
4
MySchizoBuddy