I am working with this example of US map http://leafletjs.com/examples/choropleth.html.
I am Highlighting the map of a state using a color. But the problem is there are some markers that were clickable before the addition of this highlighting color now becomes non clickable. How can I make the markers clickable even after keeping the map highlighted? Any solution? By the way I am using the following code to highlight the map:
function getColor(d) {
if(d === "Iowa")
return '#800026';
else
return '#ffffff';
}
function style(feature) {
return {
//fillColor: getColor(feature.properties.name),
weight: 4,
opacity: .1,
color: getColor(feature.properties.name),
dashArray: '3',
fillOpacity: 0.3
};
}
L.geoJson(statesData, {style: style}).addTo(map);
It seems you have the fillColor option commented out. If you remove the // before fillColor it should work.
Related
I'm trying to style a map layer for a leafletJS map and have the following code but it doesn't seem to colour at all:
var vectorTileOptions = {
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
weight: 2,
color: 'yellow',
},
};
var mapLayer = L.vectorGrid.protobuf("/tiles/admin_countries/{z}/{x}/{y}", vectorTileOptions)
It's just comes renders the standard blue, i'm not sure what i'm doing wrong, any suggestions would be great.
This would do it:
.setStyle({fillColor: '#dd0000', color: '#dd0000', weight: 1, opacity: 0.8, fillOpacity: 0.8});
actually, no I think you need to just adjust what you have there:
vectorTileLayerStyles: {
weight: 2,
fillColor: '#9bc2c4'
},
there is a lot about it here: https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#styling-vectorgrids
The answer can be found here, by having a click log e.layer to console you can get the property which is used as the key for the vectorTileOptions and then style as appropriate.
In leaflet, I can visualize the geojson layers using following script;
L.geoJSON('district.json', {
style: myStyle,
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
The above code shows the features on the map and also show the name properties when clicked on map. But what I want is different. I want to hide the feature of the district.json on map, but It should be appear the popup content when I clicked on the feature position. I tried following style;
var myStyle = {
fillColor: rgb(0,0,0,0),
opacity: 0,
strokeOpacity: 0,
}
This will hide the layers, but when I clicked on the map, nothing will popup. Is there any possible styles for this conditions?
You can simply change the value of opacity to 0.01 so that the layer will disappear from the map but there still remaining the popup content.
For this change your myStyle variable in following way;
var myStyle = {
fillColor: rgb(0,0,0,0.01),
opacity: 0.01,
strokeOpacity: 0.01,
}
You could use circle markers as following:
L.geoJSON('district.json', {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {color: 'transparent', fillColor: 'transparent', radius: 20});
},
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
This way, you add a transparent, non-visible circle marker for each feature. You can also try different radius values that will lead to larger or smaller clickable areas.
I'm a bit new to leaflet, but I have spend hours without being able to solve this problem: I want to draw a line with arrows using a gpx file as source. This should be in a layer that can be displayed or not usin overlay.
I manage to style either the arrow or the line, but I did not manage to style both. Here is my code:
Can anyone give me advices on how to style the line ?
Many thanks.
var customLayer = L.geoJson(null, {onEachFeature: function (feature, layer) {
L.polylineDecorator(layer, {
patterns: [
{offset: 25, repeat: 15, symbol: L.Symbol.arrowHead({pixelSize: 10, pathOptions: {stroke: false, color: '#000', fillOpacity: 1, weight: 0}})}
]
}).addTo(customLayer); /// Adds each decorator to the map!!!!
}
}
);
var runLayer = omnivore.gpx('./FerneyGex.gpx', null, customLayer);
controlLayers2.addOverlay(runLayer, 'Ferney - Gex');
I am working with the application which uses leaflet api.
Introduction
I needed to draw different types of fences, using decorators i can somewhat apply good visuals to the polylines but not much.
Problem
I was willing to show twisted wires instead of dashes, dots or plain lines and I know the twisted wire line will be an image but can't find help about applying custom css to polylines.
Script Example
var fence2Icon = L.icon({
iconUrl: 'xxxx.png',
iconSize: [5, 20]
iconAnchor: [5, 18]
});
// Add coordinate to the polyline
var polylineFence2 = new L.Polyline([], { color: 'red' });
function fencePlace2(e) {
// New marker on coordinate, add it to the map
new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
// Add coordinate to the polyline
polylineFence2.addLatLng(e.latlng).addTo(curr);
var decorator = L.polylineDecorator(polylineFence2, {
patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
}]
}).addTo(curr);
}
L.easyButton('fa-flash', function () {
$('.leaflet-container').css('cursor', 'crosshair');
map.on('click', fencePlace2);
polylineFence2 = new L.Polyline([], { color: 'red' });
}).addTo(map);
If someone know anything about polyline or another way please do help.
Thanks for your time:-)
You can add a class in the options of your polyline ...
var polyline = L.polyline(latlngs, { className: 'my_polyline' }).addTo(map);
and add your own settings in the CSS ...
.my_polyline {
stroke: green;
fill: none;
stroke-dasharray: 10,10;
stroke-width: 5;
}
Here is an example: http://jsfiddle.net/FranceImage/9dggfhnc/
You can also access some options directly ...
var polyline = L.polyline(latlngs, { dashArray: '10,10' }).addTo(map);
See Path Options
If you create a polyline you're in fact adding an element to the SVG element which Leaflet uses to draw it's overlays. Styling SVG path elements is different from styling regular HTML elements. There's no such thing as border and background-color etc. It has different properties, if you're interested here's a nice read on the matter:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
You can style Leaflet's path elements when you instanciate them via options or via CSS using the properties (related to styling) described in the documentation here:
http://leafletjs.com/reference.html#path
Via options:
new L.Polyline([...], {
weight: 3,
color: 'red',
opacity: 0.5
}).addTo(map);
Via CSS:
new L.Polyline([...], {
className: 'polyline'
}).addTo(map);
.polyline {
weight: 3,
color: red,
opacity: 0.5
}
However, what you want, using an image simply isn't possible. You can use images as fill for SVG paths, but it would be impossible for your usecase. You'de need to add a pattern definition to the SVG Leaflet is using and then you could use that id as the fill property as outlined in this answer:
https://stackoverflow.com/a/3798797/2019281 but will always fill/tile the image horizontally which won't work if your polyline is vertical.
I'm trying to create a map of bicycle routes which will get color from properties from geojson file. It is based on Interactive Choropleth Map. The problem I have at the moment is highlighting. This part of the code checks in geojson properties the colour of route:
function getColor(d) {
return d == 'red' ? 'red' :
d == 'blue' ? 'blue' :
d == 'green' ? 'green' :
d == 'black' ? 'black' :
d == 'yellow' ? 'yellow' :
'orange';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: getColor(feature.properties.colour),
dashArray: '3',
fillOpacity: 0.7,
};
}
It works ok but when I try to use the same function "get color" on highlighting :
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: getColor(feature.properties.colour),
dashArray: '',
fillOpacity: 0.7
});
It doesn't highlight in the colors from properties of geojson. It's probably some small problem but I'm still learning and I don't understand it. Could someone explain it and point a solution, please? Thanks very much!
Here's a working example (not full working of course as I'm still learning):
http://members.upcpoczta.pl/w.racek/mapa.html
Thanks!
In your highlightFeature method, you have the setStyle method where you're referencing feature which doesn't exist. The feature is defined in e.target.feature. So this would work:
function highlightFeature(e) {
e.target.setStyle({
weight: 5,
color: getColor(e.target.feature.properties.colour),
dashArray: '',
fillOpacity: 0.7
});
}
But since you're not changing the color (and the opacity) you might as well leave those out entirely, which also solves the problem :)