2017-03-06 1 views
0

J'utilise actuellement une brochure pour créer une carte et je me demandais s'il était possible de centrer le texte dans un popup?Texte du centre dans une fenêtre contextuelle sur le marqueur

Here is an example of what a marker currently looks like, as you can see, the writing below starts from the left and I was hoping there's a way to centre the second line.

C'est le code que je l'utilise actuellement pour elle:

map <- leaflet(nodes) %>% addTiles() %>% setView(-0.219067099999961, 51.5122826, zoom=15) %>% addAwesomeMarkers(~lng, ~lat, icon=icons, popup = paste(nodes$group, "<br>", nodes$label)) 

Répondre

1

Créer une classe css et appliquer au popup texte

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Demo</title> 
 
    <style> 
 
    #map { 
 
     height: 600px; 
 
     border: 1px solid #ccc; 
 
    } 
 

 
\t .myCss{ 
 
\t text-align:center; 
 
\t } 
 
\t </style> 
 
\t <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
 
\t <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" /> 
 
\t <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" /> 
 
\t <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' /> 
 

 

 
</head> 
 

 
<body> 
 
<div id="map"></div> 
 

 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script> 
 
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script> 
 
<script> 
 
    var addressPoints = [ 
 
     [-31.953512, 115.857048, "<p class='myCss'><b>Morgan Stanley<br> Funder</b><p>"], 
 
     [-37.8210819833, 175.2213903167, "<p class='myCss'><b>Morgan Stanley<br> Funder</b><p>"], 
 
     [-34.206841, 142.136490, "<p class='myCss'><b>Morgan Stanley<br> Funder</b><p>"], 
 
     [-37.8211946833, 175.2213655333, "<p class='myCss'><b>Morgan Stanley<br> Funder</b><p>"] 
 
    ]; 
 
</script> 
 
<script type="text/javascript"> 
 
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {}); 
 
     latlng = L.latLng(-25.2744, 133.7751); 
 

 
    var map = L.map('map', {center: latlng, 
 
     zoom: 4, 
 
     layers: [tiles], 
 
     fullscreenControl: { 
 
      pseudoFullscreen: false 
 
     } 
 
    }); 
 

 
    var markers = L.markerClusterGroup(); 
 

 
    for (var i = 0; i < addressPoints.length; i++) { 
 
     var a = addressPoints[i]; 
 
     var title = a[2]; 
 
     var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }); 
 
     marker.bindPopup(title); 
 
     markers.addLayer(marker); 
 
    } 
 
    map.addLayer(markers); 
 

 
</script> 
 

 
</body> 
 
</html>

+0

Si elle travaillé, [veuillez marquer la réponse comme acceptée .] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) Merci! –