I am trying to set style for related layers in a featureGroup using Leaflet API, here is my code:
var highlightStyle = {
color: '#9b1d41',
weight: 3,
opacity: 0.6,
fillOpacity: 0.65,
fillColor: '#9b1d41'
};
$wnd.mapareas.eachLayer(function(layerOnMap) {
layerOnMap.setStyle(highlightStyle);
console.log(layerOnMap);
});
I could see in the log that layer has new set style , but its not visible on map, like color is not changed.
For GeoJSON layers (which are FeatureGroups) you could do like this
new L.GeoJSON(mp, {
style: highlightStyle
});
For standard FeatureGroup
new L.FeatureGroup([mp1, mp2]).setStyle(highlightStyle);
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 have a leaflet map with an overlay made from a geojson file that contains polygons, lines and points. I'd like to be able to use custom markers (let's say the image marker is CustomMarker.png). So far, I have the following code that works perfectly well, the only thing is that it displays standard marker icons :
$.getJSON(url, function(geojson) {
overlay = L.geoJson(geojson, {
style: function(feature) {
return {
fillColor: 'red',
weight: 1,
opacity: 0.5,
color: 'red',
dashArray: 3,
fillOpacity: 0.5,
}
},
onEachFeature: function(feature, layer) {
layer.bindPopup("<strong>" + layer.feature.properties.Titre + "</strong><br/>" + " : nom de la région")
}
}).addTo(map);
I know the solution is at my grasp and that something should be put just above "onEachFeature" but can't figure it out so far.
I currently have an openlayers map that I am putting a draw overlay on top of. The problem is that when I scale the div container holding the map it doesn't actually scale the drawing layer correctly, so the pointer does not align with the mouse location. If I don't do any scaling it lines up correctly. I have also tried setting the html and body to 100% width in addition to the div tag, but that has not worked either.
mouse aligned
mouse not aligned
here is my map typesscript code:
// create the bing maps layer
var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AioGchlm6KiMF-8ws9hq9PEJKSZzGXj8aZ1OrDt-MlN_NY907-YdiaraNT9sCodZ',
imagerySet: 'AerialWithLabels',
maxZoom: 19
})
});
// generate the actual map
var map = new ol.Map({
layers: [raster],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 10
})
});
// holds each of the drawings
var features = new ol.Collection();
// allows the user to draw a polygon on the map
var draw = new ol.interaction.Draw({
features: features,
type: 'Polygon'
});
map.addInteraction(draw);
// adds the polygon to the features collection when the drawing is complete
var featureOverlay = new ol.layer.Vector({
source: new ol.source.Vector({features: features}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 4,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
featureOverlay.setMap(map);
// allows the user to modify the drawings
var modify = new ol.interaction.Modify({
features: features,
/*
deleteCondition: function(event) {
return ol.events.condition.shiftKeyOnly(event) &&
ol.events.condition.singleClick(event);
}
*/
});
map.addInteraction(modify);
and the html code:
<div #map id="map"></div>
and the css:
#map {
height: 100%;
}
it is also probably worth noting that I am doing this inside an ionic 3 project.
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.