I'm developing a page with a map using Leaflet. I have an issue with generating the vector based on a GeoJSON. The dxf file is converted to a GeoJSON format using QGIS plugin (Bulk vector export as SLD and GeoJSON) The labels are displayed as divIcons on the map. I know that there is a way to convert the labels to svg paths, can someone please advise how to achieve that/how to generate the GeoJSON with label as vectors.

Expected result:

enter image description here

HTML from developer tools:

path class="leaflet-interactive" stroke="#8b4d75" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none" d="M-1247 -1582L-1244 -1584L-1240 -1592L-1239 -1537"></path

Current result:

enter image description here

HTML from developer tools

"div class="vector-label" style="font-size:calc(var(--zoom-factor) * 26.25px);color:RGB(255,255,0,255);-webkit-transform: rotate(-0rad) translate(-50%,-50%);">S127</div"

Part of the GeoJSON I'm using:

{ "type": "Feature", "properties": { "fid": 884, "handle": 8161, "block": -1, "etype": 45, "space": 0, "layer": "1 OPIS KONEPCJA", "olinetype": "continuous", "linetype": "", "color": "255,255,0,255", "ocolor": 2, "color24": -1, "transparency": 0, "lweight": -1, "linewidth": 0.0, "ltscale": 5.0, "visible": 1, "thickness": 0.0, "ext": "(3:0,0,1)", "height": 2.625, "text": "S108", "angle": 0.0, "widthscale": 0.55, "oblique": 0.0, "style": "ROMANS", "textgen": 0, "alignh": 1, "alignv": 0, "interlin": -1.0 }, "geometry": { "type": "Point", "coordinates": [ 6407790.869503580033779, 5618785.125755149871111, 0.0 ] } },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.