I'm working with some Mapbox GL JS code that creates a blue dot, and I'm working if I can tweak it to paint a black ring with a transparent centre instead (Kind of like an "O")?
My code below is:
paint: {
'circle-radius': 14,
'circle-color': '#004cf0',
}
If someone could point me in the right direction it'd be greatly appreciated.
Like this:
paint: {
'circle-radius': 14,
'circle-color': 'transparent',
'circle-stroke-color': 'black',
'circle-stroke-width': 2,
}
Related
I have a mapbox map with custom coffee mug icons (not maki icons). I want to give the icons a halo conditionally based on a data field of each point. This works, but since the icon is uploaded as a png, it gets treated as a rectangle, even though the image is of a coffee mug which is mostly round. So when you add a halo, it gets added around the perimeter of the bounding rectangle of the icon. Here's a picture of two of these icons, one that has a halo because it meets the "CONDITION" and one that doesn't.
How can I make this halo wrap around the border of the coffee mug icons, like it does for maki icons? Here is the relevant part of my style definition:
layout: {
'icon-image': 'cafe-icon'
},
paint: {
"icon-color": "#1a7a08",
"icon-halo-color": "#e4be8b",
"icon-halo-width": ['case', ['==', ['get', 'CONDITION'], true], 4, 0]
}
Also, here are the mapbox dependencies in my package.json file:
"#mapbox/mapbox-sdk": "^0.12.1",
"mapbox-gl": "^2.1.1",
"#mapbox/mapbox-gl-geocoder": "^4.7.0"
And here is the coffee mug icon I'm using for now:
According to Mapbox-gl-js documentation couple of style properties can only be applied to SDF Enabled Images and one of them is "icon-halo-width" also.
READ HERE
Which says:
Four style specification properties can only be used with SDF-enabled images: icon-color, icon-halo-color, icon-halo-width, and icon-halo-blur.
I downloaded a demo png of "shop-15.png" from this link and applied the icon-halo-width to 10 and style get applied.
Code:
//downloaded
var accessible = "http://localhost:3000/shop-15.png";
map.loadImage(accessible, function (error, image) {
if (error) throw error;
map.addImage('accessible', image, { sdf: true });
map.addLayer({
"id": "iconLayer",
"type": "symbol",
"source": 'maine',
"layout": {
'icon-allow-overlap': true,
"icon-image": "accessible",
"icon-size": 3,
},
"paint": {
"icon-color": "white",
"icon-halo-color": "red",
"icon-halo-width": 10
}
});
});
Screenshot:
How To Create SDF Images?
HERE is the link where I combined few of my research.
Thanks!
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 have a simple polygon on a map and I would just like to adjust the border color width. (geoJSON is external) I was unable to find this in the API manual.
This is a link to my example (and source).
Currently my code for styling the polygon is:
'paint': {
'fill-color': 'rgba(60, 120, 40, 0.4)',
'fill-outline-color': 'rgba(20, 100, 25, 1)'
}
What should I add to give the border more width? Are there other style options for simple polygons that I am missing? (Since I can't find the documentation on this.)
I am posting an image below of my issue - basically the border is well defined in the left side of the image, but if the user changes the view angle it becomes hard to see because the width is too small.
Due to technical reasons for the fill style, you can not specify a border width greater than 1. Use the additional layer with the line style:
map.addLayer({
'id': 'states-layer-outline',
'type': 'line',
'source': {
'type': 'geojson',
'data': 'test.js'
},
'paint': {
'line-color': 'rgba(255, 0, 0, 1)',
'line-width': 4
}
});
[ https://jsfiddle.net/tny37kbu/ ]
I see that some maps styles use a layer called "water outline." You can see this layer in this pic as the blue outline next to the water.
I am using the light-v9 style from mapbox and am wondering how to "import" this layer onto my map so that I can have water outlines, too.
Here is how I set my map:
var map = new mapboxgl.Map({
container: this.mapContainer,
style: 'mapbox://styles/mapbox/light-v9',
interactive: true,
maxZoom: 16,
});
And this is how I make a couple style changes:
map.on('load', function () {
map.setPaintProperty('background','background-color', 'rgb(246, 246, 246)')
map.setPaintProperty('parks','fill-color', 'rgb(217, 232, 222)')
map.setPaintProperty('water','fill-color', 'rgb(224, 230, 230)')
...
})
It looks like that layer comes from the Mapbox Streets v7 vector tiles. If you would like to create a new line layer from that source, you would want to query the map's source for the water layer, then use it to create a line layer. For example:
map.addLayer({
'id': 'water-line-layer',
'source': 'composite',
'source-layer': 'water',
'type': 'line',
'minzoom': 15,
'paint': {
'line-color': '#000000',
'line-width': 10
}
}
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.