Add better labels to main page map.
This commit is contained in:
parent
3758ac21cb
commit
ab595ed3cb
|
@ -18,6 +18,11 @@
|
||||||
border: 1px solid black;
|
border: 1px solid black;
|
||||||
}
|
}
|
||||||
#map { height: 250px; }
|
#map { height: 250px; }
|
||||||
|
.leaflet-tooltip.my-labels {
|
||||||
|
background-color: transparent;
|
||||||
|
border: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -39,7 +44,7 @@
|
||||||
//{{markers|safe}}
|
//{{markers|safe}}
|
||||||
|
|
||||||
// Show station location
|
// 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
|
// Show GeoJSON of markers
|
||||||
var group = L.geoJSON({{geojs|safe}},
|
var group = L.geoJSON({{geojs|safe}},
|
||||||
|
@ -47,9 +52,25 @@
|
||||||
style: function (feature) {
|
style: function (feature) {
|
||||||
return {color: feature.properties.color};
|
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
|
// Zoom to show all
|
||||||
map.fitBounds(group.getBounds().pad(0.3));
|
map.fitBounds(group.getBounds().pad(0.3));
|
||||||
|
|
Loading…
Reference in New Issue
Block a user