With GetJSON, I lose the properties

With GetJSON, I lose the properties - geojson

With this file "segment.geojson", I draw a red segment of thickness 20 :
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke": "#ff0000",
"stroke-width": 20,
"stroke-opacity": 1
},
"geometry": {
"type": "LineString",
"coordinates": [[-3,48],[7,45]]
}
}
]
}
and with getJSON I display it on my map:
<body>
<div id="viewerDiv"></div>
<script>
window.onload= function() {
var map = L.map("viewerDiv").setView([50,50],5) ;
L.tileLayer(...blabla...).addTo(map);
var segment = '';
$.getJSON("segment.geojson", {dataType: "json"}, function (data) {
segment = new L.GeoJSON(data);
map.fitBounds(segment.getBounds());
})
.done(function () {
segment.addTo(map);
});
}
</script>
</body>
but it is blue and thick 1 !!! Can anyone help me? thank you in advance, JLC
The source is here: https://cavaliers23.fr/iti/ign/test_couleur.html

You are using the wrong definition. You should pass the style as a second argument.
$.getJSON("segment.geojson", { dataType: "json" }, function (data) {
segment = new L.GeoJSON(data, {
style: {
color: "#ff0000",
weight: 20,
opacity: 0.65,
},
});
You can also pass individual styles to features using the properties field
"features": [
{
"type": "Feature",
"properties": {
"color": "blue"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-3, 48],
[7, 45]
]
}
},
{
"type": "Feature",
"properties": {
"color": "red"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-33, 48],
[7, 45]
]
}
}
$.getJSON("segment.geojson", { dataType: "json" }, function (data) {
segment = new L.GeoJSON(data, {
style: (f) => {
switch (f.properties.color) {
case "red":
return {
color: "#ff0000",
weight: 20,
opacity: 0.65,
};
case "blue":
return {
color: "#0000ff",
weight: 20,
opacity: 0.65,
};
}
},
});

Related

Column Labels in Sankey Charts in Highcharts

I've been working on a visualisation using Sankey chart using Highcharts library. It looks like below.
I need help with adding labels to each column as highlighted in the above image. I couldn't find any workaround using formatters since there are no x & y axes available in sankey.
It would be great someone here helps me with doing it.
you can find my jsfiddle here.
EDIT: I was able to plot the x & y axes now, but trying to place the labels exactly below each column. Broken fiddle link updated.
const data = [{
"from": "step1_x",
"to": "step2_x",
"weight": 100
},
{
"from": "step1_x",
"to": "step2_y",
weight: 35
},
{
"from": "step1_x",
"to": "step2_z",
weight: 50
},
{
"from": "step1_y",
"to": "step2_y",
weight: 55
},
{
"from": "step1_y",
"to": "step2_x",
weight: 20
},
{
"from": "step1_y",
"to": "step2_z",
weight: 30
},
{
"from": "step1_z",
"to": "step2_y",
weight: 18
},
{
"from": "step1_z",
"to": "step2_x",
weight: 15
},
{
"from": "step1_z",
"to": "step2_z",
weight: 40
},
{
"from": "step2_x",
"to": "step3_x",
"weight": 50
},
{
"from": "step2_x",
"to": "step3_y",
weight: 55
},
{
"from": "step2_x",
"to": "step3_z",
weight: 30
},
{
"from": "step2_y",
"to": "step3_y",
weight: 90
},
{
"from": "step2_y",
"to": "step3_x",
weight: 40
},
{
"from": "step2_y",
"to": "step3_z",
weight: 51
},
{
"from": "step2_z",
"to": "step3_y",
weight: 30
},
{
"from": "step2_z",
"to": "step3_x",
weight: 40
},
{
"from": "step2_z",
"to": "step3_z",
weight: 90
},
];
const nodes = [{
"id": "step1_x",
"name": "X",
color: 'black'
}, {
"id": "step2_x",
"name": "X",
color: 'black',
},
{
"id": "step3_x",
"name": "X",
color: 'black',
},
{
"id": "step1_y",
"name": "Y",
color: '#f15c80'
}, {
"id": "step2_y",
"name": "Y",
color: '#f15c80'
}, {
"id": "step3_y",
"name": "Y",
color: '#f15c80'
}, {
"id": "step1_z",
"name": "Z",
color: '#f7a35c'
}, {
"id": "step2_z",
"name": "Z",
color: '#f7a35c'
}, {
"id": "step3_z",
"name": "Z",
color: '#f7a35c'
},
];
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
yAxis: {
labels: {
enabled: true,
formatter:function () {
return '1231';
}
}
},
series: [{
data: data,
nodes: nodes,
type: 'sankey',
name: 'Sankey demo series',
nodeWidth: 20
}],
plotOptions: {
sankey: {
dataLabels: {
overflow: 'allow',
crop: true,
enabled: true,
formatter: function () {
return this.point.weight;
}
}
}
}
});

You can add the labels by using renderer.text method. Example below:
const labels = ['column 1', 'column 2', 'column 3'];
Highcharts.chart('container', {
chart: {
spacingBottom: 50,
events: {
render: function() {
const positions = [30, this.chartWidth / 2, this.chartWidth - 30];
if (this.customLabels) {
this.customLabels.forEach((customLabel, i) => {
customLabel.attr({
x: positions[i],
y: this.chartHeight - 20
});
});
} else {
this.customLabels = [];
labels.forEach((label, i) => {
this.customLabels.push(
this.renderer.text(labels[i])
.attr({
x: positions[i],
y: this.chartHeight - 20,
align: 'center'
})
.css({
fontSize: '12px'
})
.add()
);
});
}
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/tq79c21e/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

Change colour of buffers in openlayers

I have the following JS code to create a 1 mile buffer in Openlayers using JSTS. However, I'd like to add 2 or 3 buffers but change the colour from the default for easier viewing.
So far, I've tried this as this styling as changed the fill/stroke of my points before
var source = new ol.source.Vector();
fetch('http://18.207.139.64:8080/geoserver/egm715/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=egm715:Mid_Ulster1&' +
'outputFormat=application/json&srsname=EPSG:3857').then(function(response) {
return response.json();
}).then(function(json) {
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
var parser = new jsts.io.OL3Parser();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres
var buffered = jstsGeom.buffer(1609);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
});
var buffer1 = new ol.layer.Vector({
source: source,
title: 'Mid Ulster Buffer - 1 mile',
visible: false,
style: new ol.style.Style(
{
image: new ol.style.Circle(
{
stroke: new ol.style.Stroke(
{
color: [0, 102, 77],
width: 2
}
),
fill: new ol.style.Fill(
{
color: [230, 255, 255, 0.6]
}
)
}
)
}
)
});
However, the default colour remains - is there any way I can change it?

As #Mike indicated in his comment: "The image option in ol.style.Style is used to style point features with an icon or regular shapes such as a circle. Your buffered geometry is a polygon, and is styled by stroke and fill options of ol.style.Style"
Change the style:
style: new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: [0, 102, 77],
width: 2
}),
fill: new ol.style.Fill({
color: [230, 255, 255, 0.6]
})
})
})
To remove the image: new ol.styld.Circle, something like:
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
code snippet
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSTS Integration</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.5.0/build/ol.js"></script>
<script src="https://unpkg.com/jsts#2.3.0/dist/jsts.min.js"></script>
<style>
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var json = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "FoodOutlets-MidUlst1.1",
"geometry": {
"type": "Point",
"coordinates": [-760868.77651775, 7266893.59283424]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.2",
"geometry": {
"type": "Point",
"coordinates": [-745762.5639359, 7273034.00676835]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.3",
"geometry": {
"type": "Point",
"coordinates": [-746154.82706286, 7273335.72201827]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.4",
"geometry": {
"type": "Point",
"coordinates": [-744607.30629421, 7255093.16775183]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.5",
"geometry": {
"type": "Point",
"coordinates": [-745202.69041239, 7255413.35399374]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.6",
"geometry": {
"type": "Point",
"coordinates": [-753889.58828371, 7266121.43420011]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.7",
"geometry": {
"type": "Point",
"coordinates": [-753078.05077876, 7267405.03419487]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.8",
"geometry": {
"type": "Point",
"coordinates": [-797828.64640079, 7249092.54222032]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.9",
"geometry": {
"type": "Point",
"coordinates": [-753881.35356931, 7266025.39133859]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.10",
"geometry": {
"type": "Point",
"coordinates": [-742327.05477715, 7302434.75328766]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.11",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.12",
"geometry": {
"type": "Point",
"coordinates": [-742442.85453496, 7302225.99299248]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.13",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.14",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.15",
"geometry": {
"type": "Point",
"coordinates": [-750678.90941561, 7293250.62728349]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.16",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.17",
"geometry": {
"type": "Point",
"coordinates": [-743083.01564625, 7280176.20812626]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.18",
"geometry": {
"type": "Point",
"coordinates": [-750837.75665786, 7294119.26420537]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.19",
"geometry": {
"type": "Point",
"coordinates": [-750757.26468702, 7294103.95069428]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.20",
"geometry": {
"type": "Point",
"coordinates": [-750790.13706862, 7294411.61511293]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.21",
"geometry": {
"type": "Point",
"coordinates": [-751029.88000637, 7293128.14558216]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.22",
"geometry": {
"type": "Point",
"coordinates": [-729059.04788702, 7288230.5536544]
},
"geometry_name": "the_geom",
"properties": {}
}, {
"type": "Feature",
"id": "FoodOutlets-MidUlst1.23",
"geometry": {
"type": "Point",
"coordinates": [-771157.83824017, 7283468.51757007]
},
"geometry_name": "the_geom",
"properties": {}
}, ],
"totalFeatures": 140,
"numberMatched": 140,
"numberReturned": 140,
"timeStamp": "2021-03-02T05:15:46.157Z",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3857"
}
}
};
var format = new ol.format.GeoJSON();
var features = format.readFeatures(json, {
featureProjection: 'EPSG:3857'
});
var source = new ol.source.Vector(); // VectorSource();
var parser = new jsts.io.OL3Parser();
parser.inject(
ol.geom.Point,
ol.geom.LineString,
ol.geom.LinearRing,
ol.geom.Polygon,
ol.geom.MultiPoint,
ol.geom.MultiLineString,
ol.geom.MultiPolygon
);
for (var i = 0; i < features.length; i++) {
var feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
var jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 1 mile =1609 metres adjusted for the projection
var buffered = jstsGeom.buffer(1609 / ol.proj.getPointResolution('EPSG:3857', 1, ol.extent.getCenter(feature.getGeometry().getExtent())));
// create a buffer of 40 meters around each line
// var buffered = jstsGeom.buffer(1000);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
var vectorLayer = new ol.layer.Vector({ // VectorLayer({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.3)',
}),
}),
});
var rasterLayer = new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([126.979293, 37.528787]),
zoom: 15,
}),
});
map.getView().fit(source.getExtent());
</script>
</body>
</html>

Highcharts custom formatting/coloring of category labels

I need to be able to apply background coloring (and text coloring to maintain contrast) to category labels.
I couldn't find an easy way to set each category label independently and came up with a working solution but now the width of my label column is too wide and applying marginLeft doesn't work.
First is there an easier way to achieve what I want or a solution to the width.
Here's the result:
and fiddle can be found here
Highcharts.ganttChart('container', {
chart: {
// marginLeft: 400,
events: {
load: function() {
for (var tickPos in this.yAxis[0].ticks) {
console.log(tickPos);
var ch = this.yAxis[0].chart;
var tick = this.yAxis[0].ticks[tickPos];
var label = tick.label;
if (typeof label !== "undefined") {
var text = label.textStr;
var obj = JSON.parse(text);
var element = label.element;
element.textContent = obj.name;
if (typeof obj.background !== "undefined") {
element.style["background-color"] = obj.background;
}
if (typeof obj.color !== "undefined") {
element.style["color"] = obj.color;
}
}
}
}
}
},
title: {
text: 'Highcharts Gantt Chart'
},
subtitle: {
text: 'With linked to split'
},
xAxis: {
minPadding: 0.05,
maxPadding: 0.05
},
"yAxis": [{
"scrollbar": {
"enabled": true
},
labels: {
useHTML: true
},
"uniqueNames": true
}],
tooltip: {
outside: true
},
rangeSelector: {
enabled: true,
selected: 5
},
time: {
useUTC: true
},
plotOptions: {
column: {
grouping: true
}
},
"series": [{
"name": "main",
"tooltip": {
"headerFormat": null
},
"data": [{
"name": '{"name": "Color prep and printing", "background":"green", "color":"white"}',
"id": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1577836800000,
"end": 1582934400000,
"color": {
"patternIndex": 0
}
}, {
"name": '{"name": "Send to color house", "background":"blue", "color":"white"}',
"id": "_dqkmv8WXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1577836800000,
"end": 1580428800000,
"duration": 30
}, {
"name": '{"name": "Generate proofs", "background":"teal", "color":"white"}',
"id": "_dq3hkMWXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1578614400000,
"end": 1579651200000,
"duration": 12,
"dependency": [{
"to": "_dqkmv8WXEeeTdKTuQU2hRA"
}]
}, {
"name": '{"name": "Print and ship", "background":"crimson"}',
"id": "_drLDlcWXEeeTdKTuQU2hRA",
"parent": "_dqbcsMWXEeeTdKTuQU2hRA",
"start": 1581292800000,
"end": 1582934400000,
"duration": 19,
"dependency": [{
"to": "_dq3hkMWXEeeTdKTuQU2hRA"
}]
}],
"dataLabels": [{}, {
"enabled": true,
"align": "right",
"format": "{point.duration}"
}]
}],
});

To increase the width, you can set width style:
yAxis: {
labels: {
useHTML: true,
style: {
width: '300px',
textOverflow: 'ellipsis'
}
},
...
},
Live demo: https://jsfiddle.net/BlackLabel/nkz9xmh0/
API Reference: https://api.highcharts.com/gantt/yAxis.labels.style

Highcharts export module giving error

I am trying to get image from Highchart export module, and it is giving image with
chart input data error, syntax error : Unexpected EOF.
Please see code in this js fiddle.
http://jsfiddle.net/GopinathGD/3xy8aeb7/
$(function () {
$("#b").click(testPOST);
var exportUrl = 'http://export.highcharts.com/';
function testPOST() {
var dataStr= {
"colors": [
"#C00000"
],
"chart": {
"type": "bar"
},
"title": {
"text": "Current Analysis Competitive Index",
"style": {
"fontWeight": "bold",
"color": "rgba(164, 0, 31, 0.96)"
}
},
"subtitle": {
"text": "Source: © 2017 Current Analysis, Inc."
},
"xAxis": {
"tickWidth": 1,
"minPadding": 0,
"maxPadding": 0,
"categories": [
"Overall",
"Vision/Strategy",
"Momentum & Stability",
"Innovation",
"Product Portfolio",
"Go-to-Market",
"Service & Support"
],
"title": {
"text": null
},
"labels": {
"style": {
"color": "#000000",
"fontWeight": "bold",
"fontSize": "12px"
}
}
},
"yAxis": {
"min": 0,
"max": 10,
"tickInterval": 1,
"tickmarkPlacement": "off",
"categories": [
"",
"Vulnerable",
"",
"Competitive",
"",
"Strong",
"",
"Very Strong",
"",
"Leader",
""
],
"title": {
"text": "",
"align": "high"
},
"labels": {
"style": {
"color": "#000000",
"fontWeight": "bold",
"fontSize": "12px"
}
}
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": false
},
"pointpadding": 0,
"groupPadding": 0
},
"series": {
"animation": false,
"pointWidth": 9,
"pointPadding": 0,
"groupPadding": 0.1
}
},
"legend": {
"margin": 30
},
"series": [
{
"name": "BlackBerry - Consumer Platforms and Devices",
"data": [
3,
3,
3,
3,
2,
6,
6
]
}
]
};
var optionsStr = JSON.stringify(dataStr),
dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400');
if (window.XDomainRequest) {
var xdr = new XDomainRequest();
xdr.open("post", exportUrl+ '?' + dataString);
xdr.onload = function () {
console.log(xdr.responseText);
$('#container').html('<img src="' + exporturl + xdr.responseText + '"/>');
};
xdr.send();
} else {
$.ajax({
type: 'POST',
data: dataString,
url: exportUrl,
success: function (data) {
console.log('get the file from relative url: ', data);
$('#container').html('<img src="' + exportUrl + data + '"/>');
},
error: function (err) {
debugger;
console.log('error', err.statusText)
}
});
}
}
});
<script src="http://code.highcharts.com/highcharts.js"></script>
Run Code

The reason is two ampersands used in the xAxis.categories.
"categories": [
"Momentum & Stability",
...
"Service & Support"
],
Change ampersands to %26
"categories": [
"Overall",
"Vision/Strategy",
"Momentum %26 Stability",
"Innovation",
"Product Portfolio",
"Go-to-Market",
"Service %26 Support"
],
create a callback which encodes ampersands (callback is called on the server):
function callback () {
const categories = this.xAxis[0].categories.map(decodeURIComponent)
this.xAxis[0].setCategories(categories)
}
Append the callback to dataString:
dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400&callback=' + callback.toString());
example: http://jsfiddle.net/erayy8jn/

Show and Hide Features of layers openlayers 3

I am trying to hide Feature of a layer from jason where I define the feature by category. I tried Jonatas Walker method but my code is different not working http://jsfiddle.net/jonataswalker/z10de36z/ but my code is different so not working
Below is my json
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Missing Person",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.45755, 51.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.12755, 52.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 1",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-1.12755, 52.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 3",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-2.12755, 53.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 7",
"src": "resources/icon.png",
"category": "cat1"
},
"geometry": {
"type": "Point",
"coordinates": [-0.1287, 53.507222]
}
},
{
"type": "Feature",
"properties": {
"name": "Wanted 9",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-3.12755, 50.907222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 8",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-3.12755, 51.907222]
}
},
{
"type": "Feature",
"properties": {
"name": "Missing 18",
"src": "resources/Blue_pointer.png",
"category": "cat2"
},
"geometry": {
"type": "Point",
"coordinates": [-4.12755, 51.907222]
}
}
]
}
Openlayer code
var styleFunction1 = function(feature) {
var styles = {
'Point': [
new ol.style.Style({
image: new ol.style.Icon({
src: feature.get('src'),
anchor: [0.5, 1]
})
})],
'LineString': [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'gray',
width: 5
})
})]
};
return styles[feature.getGeometry().getType()];
};
vector = new ol.layer.Vector({
source: new ol.source.Vector({
projection : 'EPSG:4326',
format: new ol.format.GeoJSON(),
url: 'resources/multipoint.geojson'
}),
style: styleFunction1
});
map = new ol.Map({
target: target,
layers: [bingMapsRoad,myPetrolPlan,vector],
view: new ol.View({
center: ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857'),
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
zoom: 6
}),
controls: ol.control.defaults({ attribution: false }),
loadTilesWhileInteracting: true
});
To Hide I am trying something like
hideVectorLayer: function () {
var abc = ConnectWebMap;
var featureCount = vector.getSource().getFeatures();
var featureCat = feature.get('category');
console.log(featureCat);
featureCount.forEach(function(feature) {
if(feature){
if(featureCat == 'cat1'){
console.log('a');
}
}
});
}

You can remove from the VectorSource using removeFeature method

you can make another layer ( a temporary one ) where you copy the features from the desired category and display it while setting the visibility of your main layer to false:
var tmp=new ol.layer.vector({ source : new ol.source.Vector()});
hideVectorLayer: function () {
var abc = ConnectWebMap;
var featureCount = vector.getSource().getFeatures();
var featureCat = feature.get('category');
console.log(featureCat);
featureCount.forEach(function(feature) {
if(feature){
if(featureCat == 'cat1'){
tmp.getSource().getFeatures().push(feature);
}
}
});
tmp.setStyle(vector.getStyle()); // set the same style to the tmp layer
map.addLayer(tmp);// add it to the map
vector.setVisible(false); // set the vector layer visibility to false
}

Develop Reference

ios ruby-on-rails asp.net-mvc docker delphi jenkins grails google-sheets machine-learning dart

With GetJSON, I lose the properties - geojson

Related

Column Labels in Sankey Charts in Highcharts

Change colour of buffers in openlayers

Highcharts custom formatting/coloring of category labels

Highcharts export module giving error

Show and Hide Features of layers openlayers 3

Categories

Resources