Add better labels to main page map.
This commit is contained in:
		@@ -18,6 +18,11 @@
 | 
			
		||||
        border: 1px solid black;
 | 
			
		||||
      }
 | 
			
		||||
      #map { height: 250px; }
 | 
			
		||||
      .leaflet-tooltip.my-labels {
 | 
			
		||||
        background-color: transparent;
 | 
			
		||||
        border: transparent;
 | 
			
		||||
        box-shadow: none;
 | 
			
		||||
        }
 | 
			
		||||
    </style>
 | 
			
		||||
</head>
 | 
			
		||||
<body>
 | 
			
		||||
@@ -39,7 +44,7 @@
 | 
			
		||||
            //{{markers|safe}}
 | 
			
		||||
 | 
			
		||||
            // Show station location
 | 
			
		||||
            var station = L.marker([{{station_lat}}, {{station_lon}}]).addTo(map).bindTooltip('{{station_call}}', permanent=true).openTooltip();
 | 
			
		||||
            var station = L.marker([{{station_lat}}, {{station_lon}}]).addTo(map).bindTooltip('{{station_call}}', {permanent: true}).openTooltip();
 | 
			
		||||
            
 | 
			
		||||
            // Show GeoJSON of markers
 | 
			
		||||
            var group = L.geoJSON({{geojs|safe}},
 | 
			
		||||
@@ -47,9 +52,25 @@
 | 
			
		||||
                        style: function (feature) {
 | 
			
		||||
                            return {color: feature.properties.color};
 | 
			
		||||
                        }
 | 
			
		||||
                    }).bindTooltip(function (layer) {
 | 
			
		||||
                return 'Object '+layer.feature.properties.object_name+' from '+layer.feature.properties.from;
 | 
			
		||||
                }, permanent=true).addTo(map);
 | 
			
		||||
                    });
 | 
			
		||||
 | 
			
		||||
            // group.bindTooltip(function (layer) {
 | 
			
		||||
            //                           return 'Object '+layer.feature.properties.object_name+' from '+layer.feature.properties.from;
 | 
			
		||||
            //                           }, {permanent: false}).openTooltip().addTo(map);
 | 
			
		||||
            // Hacked together from https://gis.stackexchange.com/a/246919
 | 
			
		||||
            var pointLayer = L.geoJSON(null, {
 | 
			
		||||
                                pointToLayer: function(feature,latlng){
 | 
			
		||||
                                  //(true condition) ? "true" : "false"
 | 
			
		||||
                                  label = (feature.properties.object_name === null) ? String(feature.properties.from) : String(feature.properties.object_name)
 | 
			
		||||
                                  //label = String('Object '+feature.properties.object_name+' from '+feature.properties.from) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute'
 | 
			
		||||
                                  return new L.CircleMarker(latlng, {
 | 
			
		||||
                                    radius: 1,
 | 
			
		||||
                                  }).bindTooltip(label, {permanent: true, opacity: 0.7, className: "my-labels"}).openTooltip();
 | 
			
		||||
                                  }
 | 
			
		||||
                                });
 | 
			
		||||
            pointLayer.addData({{geojs|safe}});
 | 
			
		||||
            map.addLayer(pointLayer);
 | 
			
		||||
            
 | 
			
		||||
 | 
			
		||||
            // Zoom to show all
 | 
			
		||||
            map.fitBounds(group.getBounds().pad(0.3));
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user