3mapslab / leaflet.streetlabels Goto Github PK

View Code? Open in Web Editor NEW

70.0 5.0 13.0 14.52 MB

Display the street labels following polylines for Leaflet

License: ISC License

JavaScript 100.00%

canvas-textpath street-labels leafletjs javascript collision labels leaflet

leaflet.streetlabels's People

Contributors

Stargazers

Watchers

Forkers

marinemllr jdsantos anshori soiqualang pedhenrique moberley hayashi-shio-lab israelcost fuhidev rajtrivedi2001 un0528 sonrebmax jayli3n

leaflet.streetlabels's Issues

Changing line colours

Hi, I've looked into the code a lot and done some research but I cannot figure it out:

How can I change the colour of the line on the road from blue to, e.g., red? And, how can I change the width/weight of the line?

Thanks

Hello,

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Go to '...'
Click on '....'
Scroll down to '....'
See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional context
Add any other context about the problem here.

Cannot change cursor style from grab to pointer

Hello,

I have a problem to make cursor change style when a user hovers over the streets with labels.

Here is what I tried:
(geo6 is a geoJSON line with a streetlabel)

In my html file:

`1) geo6.on('mouseover', function(){
geo6.setStyle({
cursor: 'pointer'
});
});

geo6.on('mouseover', function(e){
geo6.css('cursor', 'pointer !important');
});
$('.leaflet-interactive).css('cursor', 'pointer')

and

$('.leaflet-interactive).css('cursor', 'pointer !important')

In my css file:

.leaflet-zoom-animated:hover{ cursor: pointer; }
.leaflet-interactive{
cursor: pointer;
}`

You can see my code in action here: http://matje1979.pythonanywhere.com/

I hope you can help me solve this problem.

Greetings!

Damir

Anyone tried this with Vector Tiles?

How does streelabel.js works

Hi All,
Does this js logic actually know the street labels ?? (i.e. does it do a reverse geo coding etc)?

Can't make StreetLabels work with contours

Describe the bug
I can't get this plugin to work with contour lines.

To Reproduce
I have uploaded files to test this here: http://cnyrpdb.org/leaflet_test/testing.zip and I uploaded it here.
testing.zip

The file called leaf02.html is my test. I added contour lines (white dashed lines) to an area of the map and I would like to label them with the elevation. When I uncomment the line renderer: contourLabels, //Contour labels (line 103) the layer control at the upper right of the map is no longer visible, and the CSS I applied to the data I added to the map is no longer interpreted.

The file called test.html is your example with my dataset (contours_geojson.js) added. I edited the map location (line 81) to be at my location. You will see that the contours aren't visible at all, and the layer control isn't visible, but when I go back to your original coordinates, the layer control returns.

I also noted that your example includes no <!DOCTYPE html> or other expected HTML elements. When I added <!DOCTYPE html> the map didn't function properly.

I saw that in your example the linked files are to a URL rather than a relative local path, and when I used these URLs in my test, I noted that the file L.LabelTextCollision.js wasn't needed.

So, generally, I'm confused. Any light you could shed on my issues would be very greatly appreciated! This plugin seems to be exactly what I need.

Many thanks,
Bruce

Streetlabels mixes the offset done by Polyline Offset

Describe the bug
We have a map where we want to display direction flows in the street. We use Polyline offset for that and that works fine.
As soon as we add the streetLabels Renderer it mixes the offset. Negative becomes positive for some.

Screenshots
Left with StreetLabels, right without

Can anyone point me to a possible solution? Or where i should look in the code?

Enabling Street Labels on polygons disables existing popups

Describe the bug
When I enable Streets Labels on a layer of polygon features that has a Lealfet popup, the popup no longer appears after clicking the popup.

To Reproduce
Steps to reproduce the behavior:

Open a map that has a Leaflet popup. Click the layer and the popup window appears over the layer.
Enable Street Labels.
Open the same map as in 1 and notice that the popup window no longer appears when you click the layer.

Expected behavior
I expected that the existing popup window would not be affected by enabling Street Labels.

Screenshots

Screenshot showing the popup window

Screenshot showing Street Labels working

Desktop:

OS: MacOS Ventura 13.1
Browser: Safari 16.2

Additional context

My code (I've tried this with interactive set to true and with interactive set to false):

var zoneClassRenderer = new L.StreetLabels({
		collisionFlg: false,
		propertyName: 'zone_class',
		showLabelIf: function (layer) {
			return typeof layer.properties.zone_class != "undefined";
		},
		interactive: true,
		fontStyle: {
			dynamicFontSize: false,
			fontSize: 12,
			fontSizeUnit: "px",
			lineWidth: 4.0,
			fillStyle: "black",
			strokeStyle: "white",
		},
	});

Two labels on polygon

There are appears two labels on polygon because of L.Polygon inherit from L.Polyline. So, layer instanceof L.Polygon - is true and layer instanceof L.Polyline - is true

See on lines 116-121:
if (layer instanceof L.Polygon || layer instanceof L.CircleMarker) {
// Draw label for Polygon
}
if(layer instanceof L.Polyline){
// Draw label for Polyline
}

Please, correct as:
if (layer instanceof L.Polygon || layer instanceof L.CircleMarker) {
// Draw label for Polygon
}else if(layer instanceof L.Polyline){
// Draw label for Polyline
}

Install via npm

First off, cool plugin!

Can you make it installable via npm? Thx.

Folium - Leaflet.streetlabels

Anyone try this with folium? Any ideas on how this can be done on a geojson linestring using folium?

Sticking out corners of stroked text

I use option strokeStyle: "white" and lineWidth: 1.0 to make the labels more visible on the map, but here is a problem with sticking out corners

I think It would be better use ctx.lineJoin="round";

You can add it on the line 168 after this lines:
ctx.fillStyle = this.options.fontStyle.fillStyle;
ctx.strokeStyle = this.options.fontStyle.strokeStyle;

Mouseover event does not work on geoJSON lines after installing leaflet-streetlabels

Hello,

I have installed leaflet-streetlabels and it works great, except that the mouse events that were previously working don't work anymore. When I hover over streets marked by geoJSON lines, nothing happens. It seems impossible to set the cursor to pointer when hovering over those lines. On the other hand, when I hover over pins, everything works as before. By inspecting the web page I noticed that the 'path' tags that represented geoJSON lines have disappeared from the html and are replaced by 'canvas' tags, and that tags that represent pins are still there. I also noticed that when I delete 'renderer : streetLabelsRenderer' from the code mouse events start working again. How can this problem be fixed?

Here is my code:

` <script>
var streetLabelsRenderer = new L.StreetLabels({
collisionFlg : true,
propertyName : 'name',
showLabelIf: function(layer) {
return true; //layer.properties.type == "primary";
},
fontStyle: {
dynamicFontSize: false,
fontSize: 12,
fontSizeUnit: "px",
lineWidth: 6.0,
fillStyle: "black",
strokeStyle: "white",
},
});

var geojson6 = {"type": "FeatureCollection","features": [{"type": "Feature","properties": {"name":"Petrakijina"},"geometry": {"type": "LineString","coordinates": [[18.424646258354187,43.860395155979084],[18.424606025218964,43.860387420163335],[18.424662351608276,43.860395155979084],[18.424667716026306,43.86039805690976],[18.424673080444336,43.86040095784028],[18.42457115650177,43.86037968434653],[18.4241433,43.8603084],[18.4238952,43.8602654],[18.42345,43.8602493],[18.4232477,43.860242],[18.4229471,43.8602312],[18.4229471,43.8602312],[18.4229127,43.8603619],[18.4228033,43.8607764],[18.422771394252777,43.860884444287336]]}}]};

var map = L.map('map', {
renderer : streetLabelsRenderer,
preferCanvas: false
// layers: [baseLayer, geo6]
}).setView([43.8622, 18.4231], 16);

L.tileLayer('https://{s}.tile.jawg.io/jawg-light/{z}/{x}/{y}{r}.png?access-token=lGN0EXNLjilOP6RW67TT7e0uo6ZEBlyQe2xiVsaqGogzdK7pQ5JJfr9XgeOlsc56', {
	attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
}).addTo(map);

var geo6 = L.geoJSON(geojson6, {
style: function(feature){
return {
weight: 8,
opacity: 1,
color: '#ffff00'
}
}
}).addTo(map);

geo6.on('mouseover', function(){
alert("Ovo radi");
geo6.setStyle({
color: 'red',
opacity: 0.8
cursor: 'pointer'
});
});

    geo6.on('mouseout', function(){
        geo6.setStyle({
            // color: 'rgb(51, 136, 255)',
            opacity: 1,
        });
    });

    geo6.on('click', function(e){
        // alert('You clicked the Petrakijina street.');
        var popup = L.popup().setContent(`This is the Petrakijina street`);
        popup.setLatLng(e.latlng).openOn(map);
    });`

</script>

So, the 'click' event works, but mouseover, and mouseout events are somehow not recognized.
I would be grateful if you would explain to me what is going on here and help me solve the problem.

Cheers,
Damir

Label upside down

Hi,

Is there a simple way to have the label always from a left to right direction?

At this stage depending on feature line direction it can be flipped over.

Thanks

Louis

3mapslab / leaflet.streetlabels Goto Github PK

leaflet.streetlabels's People

Contributors

Stargazers

Watchers

Forkers

leaflet.streetlabels's Issues

Recommend Projects

Recommend Topics

Recommend Org