We Keep Coding

How to change color of first vertex while drawing polygon using Leaflet.Draw?

I am using Leaflet and Leaflet.Draw, and I am letting the user from my code to draw polygon (NOT using the Leaflet Draw Controls).
While the user is drawing the polygon I need to change the color of its first vertex, for example: green, so that user knows that he needs to click on the first point in order to close the polygon and finish drawing.
How can I change color of first vertex while drawing polygon using Leaflet.Draw?
The following image for elaboration, meaning it's fixed with a Paint Software.
P.S. Here is my code
var map = L.map('mapid',
{
minZoom: -1,
maxZoom: 4,
center: [0, 0],
zoom: 1,
crs: L.CRS.Simple
});
var polygonDrawer = new L.Draw.Polygon(map);
map.on('draw:created', function (e) {
var type = e.layerType, layer = e.layer;
layer.editing.enable();
layer.addTo(map);
});
$(document)ready(function(){
polygonDrawer.enable();
});

While I was hacking with the Leaflet.Draw and on the creation of polygon I have come up with the following code:
map.on('draw:drawvertex',
function (e) {
$(".leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon.leaflet-touch-icon.leaflet-zoom-animated.leaflet-interactive:first").css({ 'background-color': 'green' });
});
So, there is a listener you can insert it in your code, draw:drawvertex which means whenever a vertex created I need to do something.
Then, using jQuery you're selecting the first element from this long selector, and set its background color to green or any other color.

This is a way to do it with CSS only:
#root
> main
> div
> div.col-sm-8.m-auto.p-0.flex-column.float-right
> div.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom
> div.leaflet-pane.leaflet-map-pane
> div.leaflet-pane.leaflet-marker-pane
> div:nth-child(2) {
background: green;
}

For me, worked this way (classes are a little bit different. leaflet 1.3.1 and draw 0.4.3)
map.on('draw:drawvertex', function (e) {
$(".leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon.leaflet-zoom-animated.leaflet-interactive:first").css({ 'background-color': 'green' });
});

This is worked for me:
map.on("editable:vertex:dragend", function (e) {
// Set GREEN color for Vertex START (First) Point
$(".leaflet-marker-icon.leaflet-div-icon.leaflet-vertex-icon.leaflet-zoom-animated.leaflet-interactive.leaflet-marker-draggable:nth-child(1)").css({ 'background-color': 'green' });
// Set RED color for Vertex END (Last) Point
$(".leaflet-marker-icon.leaflet-div-icon.leaflet-vertex-icon.leaflet-zoom-animated.leaflet-interactive.leaflet-marker-draggable:nth-child(2)").css({ 'background-color': 'red' });
});

Move handlers not appears when editing polygon layer in leaflet-draw

I have a textarea that I copy a GeoJson into it and the map must show its shape. This is not a problem until I wanted this shape to be editable.
So I used below code to convert it to layer and add to featuregroup so I can edit it using leaflet-draw. But this code works for POINT and LINE but not for POLYGONS. In case of polygon, move handlers that should appears at each side of polygon, not appears.
What could be problem ?
var drawnItems = L.featureGroup().addTo(mymap);
mymap.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
}
}
}));
var str = document.getElementById("ingeojson").value;
var shapeJson = JSON.parse(str);
var shape = L.geoJSON(shapeJson);
var shapeLayer = L.GeoJSON.geometryToLayer(shapeJson);
drawnItems.addLayer(shapeLayer);
shapeLayer.addTo(mymap);
mymap.fitBounds(shapeLayer.getBounds());

I finally solved it. The problem was related to version of leaflet and leaflet-draw I used.
At the time of writing this post, I used leaflet-draw 0.4.7 and leaflet 1.0.2 and the problem is solved .

Transparent background in world in whitestorm js?

I am trying to create a world that does not have a background so that I can add objects to it and then run this world over a background configured in html. Is something like this possible?
Here is a link to the site I am working on. To clarify: I am trying to figure out how to make the black transparent so that the background behind it is visible. Here is the repo. Thanks.

I decided to use CSS for now instead.

Simply use:
const world = new WHS.World({
background: {
opacity: 0; // Opacity is 0. Fully transparent
},
renderer: {
alpha: true // Allow transparency in renderer.
}
});
UPDATE
In v2.x.x use the following approach:
const app = new WHS.App([
// ...
new WHS.app.RenderingModule({
bgOpacity: 0,
renderer: {
alpha: true
}
})
]);

MapBox GL JS marker offset

I'm using MapBox GL JS to create a map with a custom marker:
var marker = new mapboxgl.Marker(container)
.setLngLat([
datacenters[country][city].coordinates.lng,
datacenters[country][city].coordinates.lat
])
.addTo(map);
However, I seem to have some kind of offset problem with the marker. The thing is: when zoomed out a bit, the bottom of the marker is not really pointing to the exact location:
When I'm zooming in a bit further it reaches its destination and it's pointing to the exact spot.
I really love MapBox GL, but this particular problem is bugging me and I'd love to know how to solve it. When this is fixed my implementation is far more superior to the original mapping software I was using.

From Mapbox GL JS 0.22.0 you're able to set an offset option to the marker. https://www.mapbox.com/mapbox-gl-js/api/#Marker
For example to offset the marker so that it's anchor is the middle bottom (for your pin marker) you would use:
var marker = new mapboxgl.Marker(container, {
offset: [-width / 2, -height]
})
.setLngLat([
datacenters[country][city].coordinates.lng,
datacenters[country][city].coordinates.lat
])
.addTo(map);

New solution for mapbox-gl.js v1.0.0 - Marker objects now have an anchor option to set the position to align to the marker's Lat/Lng: https://docs.mapbox.com/mapbox-gl-js/api/#marker
var marker = new mapboxgl.Marker(container, {anchor: 'bottom');
This should cover most cases and is more reliable than a pixel offset in my experience.

I've found an solution to my problem. It might be somewhat hacky, but it solves the positioning problem of the marker: I'm using a Popup fill it with a font awesome map marker icon and remove it's "tooltip styled" borders:
Javascript:
map.on('load', function() {
var container = document.createElement('div');
var icon = document.createElement('i');
icon.dataset.city = city;
icon.addEventListener('click', function(e) {
var city = e.target.dataset.city;
var country = e.target.dataset.country
flyTo(datacenters[country][city].coordinates);
});
icon.classList.add('fa', 'fa-map-marker', 'fa-2x');
container.appendChild(icon);
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
})
.setLngLat([
datacenters[country][city].coordinates.lng,
datacenters[country][city].coordinates.lat
])
.setDOMContent(container)
.addTo(map);
});
CSS:
.map div.mapboxgl-popup-content {
background: none;
padding: 0;
}
.map .mapboxgl-popup-tip {
display: none;
}
I just hope someone comes up with a real solution, because this feels kinda dirty to me. But hey: it does the job just fine!

Mapbox Marker now has an element option see this link Mapbox Marker. So instead of appending the icon HTML to the Div element you can simply add into the options when creating a marker. I found this also gets rid of the offset problem. So using the code above you can do this....
var icon = document.createElement('i');
icon.classList.add('fas', 'fa-map-marker-alt');
icon.style.color = 'blue';
new mapboxgl.Marker(container, {anchor: 'center', offset: [0, 0], element: icon})
Also the CSS for the marker can be updated to allow a pointer
.mapboxgl-marker {
border: none;
cursor: pointer;
}

How to style images in highcharts flags?

In my chart, I show the user pictures for their comment date, so the users can read the comments in a tooltip using these icons. It seems like soundcloud charts. I did it using flags type and I set the shape variables as user picture url for each data item.
But I want to add also colorized border for each icons. I know, there is lineWidth and lineColor config in flags type but it doesn't work with images, it works only with default shapes flag, circlepin or squarepin.
I tried to use shape as flag and to add user images as background image, but It doesn't work.

In SVG you can not set border for the images, you need to create rect around the image: http://jsfiddle.net/xuL76rkL/1/
For example you can use load and redraw events to manage those rects, code:
var H = Highcharts;
function drawBorder() {
var chart = this;
H.each(chart.series[1].points, function(p) {
var bbox,
rect,
fontSize = 13, // it's used as default font size offet, even for the images
dim = 32; //width and height for the image
if(p.graphic) {
if(p.rectangle) {
p.rectangle.destroy();
}
bbox = p.graphic.getBBox();
rect = chart.renderer.rect(p.plotX - dim/2, p.plotY - dim/2 - fontSize, dim, dim).attr({
"stroke": "black",
"stroke-width": 2,
"fill": "transparent"
}).add(chart.series[1].markerGroup);
p.rectangle = rect;
}
});
}
$('#container').highcharts('StockChart', {
chart: {
events: {
load: drawBorder,
redraw: drawBorder
}
},
...
});

You can set an image with the shape option:
Example: shape: "url(/assets/my_image.svg)"
Documentation available here: https://api.highcharts.com/highstock/series.flags.shape