Skip to content

Commit

Permalink
feature: add feature styling (#1677)
Browse files Browse the repository at this point in the history
* feat: add feature styling

Fixes #1676
Adds the possibility to set the drag and drop control as well as a geojson source to style features based on the "style" attribute of the feature rather than the layer style.
Configured as `"styleByAttribute":true` as options for the drag and drop control or property of a geojson-layer.
False by default

* Update draganddrop.js
  • Loading branch information
jokd authored Feb 22, 2023
1 parent e6aa4be commit a47af1d
Show file tree
Hide file tree
Showing 4 changed files with 669 additions and 3 deletions.
14 changes: 12 additions & 2 deletions src/controls/draganddrop.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Style from '../style';
import { Component, InputFile, Button, Element as El } from '../ui';
import { getStylewindowStyle } from './editor/stylewindow';

const DragAndDrop = function DragAndDrop(options = {}) {
let dragAndDrop;
Expand Down Expand Up @@ -66,10 +67,13 @@ const DragAndDrop = function DragAndDrop(options = {}) {
onAdd(evt) {
viewer = evt.target;
map = viewer.getMap();
const legend = viewer.getControlByName('legend');
if (options.showLegendButton) { legend.addButtonToTools(legendButton, 'addLayerButton'); }
if (options.showLegendButton) {
const legend = viewer.getControlByName('legend');
legend.addButtonToTools(legendButton, 'addLayerButton');
}
const groupName = options.groupName || 'egna-lager';
const groupTitle = options.groupTitle || 'Egna lager';
const styleByAttribute = options.styleByAttribute || false;
const featureStyles = options.featureStyles || {
Point: [{
circle: {
Expand Down Expand Up @@ -145,6 +149,12 @@ const DragAndDrop = function DragAndDrop(options = {}) {
vectorSource = new VectorSource({
features: event.features
});
vectorSource.forEachFeature((feature) => {
if (feature.get('style') && styleByAttribute) {
const featureStyle = getStylewindowStyle(feature, feature.get('style'));
feature.setStyle(featureStyle);
}
});
if (!viewer.getGroup(groupName)) {
viewer.addGroup({ title: groupTitle, name: groupName, expanded: true });
}
Expand Down
93 changes: 93 additions & 0 deletions src/controls/editor/styletemplate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
export default function styleTemplate(palette, swStyle) {
const colorArray = palette;
let fillHtml = '<div id="o-editor-style-fill" class="padding border-bottom"><div class="text-large text-align-center">Fyllning</div><div id="o-editor-style-fillColor"><ul>';
if (!colorArray.includes(swStyle.fillColor)) {
colorArray.push(swStyle.fillColor);
}
if (!colorArray.includes(swStyle.strokeColor)) {
colorArray.push(swStyle.strokeColor);
}
for (let i = 0; i < colorArray.length; i += 1) {
const checked = colorArray[i] === swStyle.fillColor ? ' checked=true' : '';
fillHtml += `<li>
<input type="radio" id="fillColorRadio${i}" name="fillColorRadio" value="${colorArray[i]}"${checked} />
<label for="fillColorRadio${i}"><span style="background:${colorArray[i]}"></span></label>
</li>`;
}

fillHtml += `</ul></div><div class="padding-smaller o-tooltip active">
<input id="o-editor-style-fillOpacitySlider" type="range" min="0.05" max="1" value="${swStyle.fillOpacity}" step="0.05">
<div class="text-align-center">
<span class="text-smaller float-left">5%</span>
<span class="text-smaller">Opacitet</span>
<span class="text-smaller float-right">100%</span>
</div>
</div></div>`;

let strokeHtml = '<div id="o-editor-style-stroke" class="padding border-bottom"><div class="text-large text-align-center">Kantlinje</div><div id="o-editor-style-strokeColor"><ul>';
for (let i = 0; i < colorArray.length; i += 1) {
const checked = colorArray[i] === swStyle.strokeColor ? ' checked=true' : '';
strokeHtml += `<li>
<input type="radio" id="strokeColorRadio${i}" name="strokeColorRadio" value="${colorArray[i]}"${checked} />
<label for="strokeColorRadio${i}"><span style="background:${colorArray[i]}"></span></label>
</li>`;
}

strokeHtml += `</ul></div><div class="padding-smaller o-tooltip active">
<input id="o-editor-style-strokeOpacitySlider" type="range" min="0.05" max="1" value="${swStyle.strokeOpacity}" step="0.05">
<div class="text-align-center">
<span class="text-smaller float-left">5%</span>
<span class="text-smaller">Opacitet</span>
<span class="text-smaller float-right">100%</span>
</div>
</div>
<div class="padding-smaller o-tooltip active">
<input id="o-editor-style-strokeWidthSlider" type="range" min="1" max="10" value="${swStyle.strokeWidth}" step="1">
<div class="text-align-center">
<span class="text-smaller float-left">1px</span>
<span class="text-smaller">Linjebredd</span>
<span class="text-smaller float-right">10px</span>
</div>
</div>
<div class="padding-smaller o-tooltip active">
<select id="o-editor-style-strokeType" class="small no-margin width-full">
<option value="line"${swStyle.strokeType === 'line' ? ' selected' : ''}>Heldragen linje</option>
<option value="dash"${swStyle.strokeType === 'dash' ? ' selected' : ''}>Streckad linje</option>
<option value="point"${swStyle.strokeType === 'point' ? ' selected' : ''}>Punktad linje</option>
<option value="dash-point"${swStyle.strokeType === 'dash-point' ? ' selected' : ''}>Streck-punkt-linje</option>
</select>
</div></div>`;

const pointHtml = `<div id="o-editor-style-point" class="padding border-bottom"><div class="text-large text-align-center">Punkt</div><div class="padding-smaller o-tooltip active">
<input id="o-editor-style-pointSizeSlider" type="range" min="1" max="50" value="${swStyle.pointSize}" step="1">
<div class="text-align-center">
<span class="text-smaller float-left">1px</span>
<span class="text-smaller">Punktstorlek</span>
<span class="text-smaller float-right">50px</span>
</div>
</div>
<div class="padding-smaller o-tooltip active">
<select id="o-editor-style-pointType" class="small no-margin width-full">
<option value="circle"${swStyle.pointType === 'circle' ? ' selected' : ''}>Cirkel</option>
<option value="x"${swStyle.pointType === 'x' ? ' selected' : ''}>Kryss</option>
<option value="cross"${swStyle.pointType === 'cross' ? ' selected' : ''}>Kors</option>
<option value="star"${swStyle.pointType === 'star' ? ' selected' : ''}>Stjärna</option>
<option value="triangle"${swStyle.pointType === 'triangle' ? ' selected' : ''}>Triangel</option>
<option value="square"${swStyle.pointType === 'square' ? ' selected' : ''}>Kvadrat</option>
</select>
</div></div>`;

const textHtml = `<div id="o-editor-style-text" class="padding border-bottom"><div class="text-large text-align-center">Text</div><div class="padding-smaller o-tooltip active">
<input id="o-editor-style-textSizeSlider" type="range" min="8" max="128" value="${swStyle.textSize}" step="1">
<div class="text-align-center">
<span class="text-smaller float-left">8px</span>
<span class="text-smaller">Textstorlek</span>
<span class="text-smaller float-right">128px</span>
</div>
</div>
<div class="padding-smaller o-tooltip active">
<input id="o-editor-style-textString" class="small no-margin width-full" type="text" value="${swStyle.textString}">
</div></div>`;

return textHtml + pointHtml + fillHtml + strokeHtml;
}
Loading

0 comments on commit a47af1d

Please sign in to comment.