Change colour of buffers in openlayers - buffer
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>
Related
With GetJSON, I lose the properties
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,
};
}
},
});
Adaptive Cards iOS - How do I add padding around the card edge?
I'm trying to add padding to my adaptive card view so that it's contents are inset from the edge of the card. I'd like to not adjust the padding of any of the internal card elements. I'm trying to use the following host config, which parses without error but seems to have no effect on the card.
Host config JSON:
{
"spacing": {
"small": 3,
"default": 8,
"medium": 20,
"large": 30,
"extraLarge": 40,
"padding": 100
},
"adaptiveCard": {
"allowCustomStyle": true,
"spacing": {
"padding": 100
}
}
}
Resulting card:
As you can see, there is certainly not 100px of padding being added to the card. I've used sample host configs and tweak other settings like colors so I know the config is being applied, but nothing I do seems to affect the card padding. Thanks in advance!
Card JSON:
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Publish Adaptive Card schema"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
"size": "Small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "Matt Hidinger",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "Created {{DATE(2017-02-14T06:08:39Z,SHORT)}}",
"isSubtle": true,
"wrap": true
}
],
"width": "stretch"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Now that we have defined the main rules and features of the format, we need to produce a schema and publish it to GitHub. The schema will be the starting point of our reference documentation.",
"wrap": true
},
{
"type": "FactSet",
"facts": [
{
"title": "Board:",
"value": "Adaptive Card"
},
{
"title": "List:",
"value": "Backlog"
},
{
"title": "Assigned to:",
"value": "Matt Hidinger"
},
{
"title": "Due date:",
"value": "Not set"
}
]
}
]
}
],
"actions": [
{
"type": "Action.ShowCard",
"title": "Set due date",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Date",
"id": "dueDate"
},
{
"type": "Input.Text",
"id": "comment",
"placeholder": "Add a comment",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "OK",
"url": "http://adaptivecards.io"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
},
{
"type": "Action.OpenUrl",
"title": "View",
"url": "http://adaptivecards.io"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
Geojson gets distorted when trying to render in vega
I try to render a geojson in vega.
I found this example which work fine:
How to read geojson with vega
however, when trying to replace the geojson with one of mine, the features get completely distorted.
{"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 500,
"height": 600,
"autosize": "none",
"signals": [
{
"name": "translate0",
"update": "width / 2"
},
{
"name": "translate1",
"update": "height / 2"
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": 1000,
"rotate": [
0,
0,
0
],
"center": [
17,
-3
],
"translate": [
{
"signal": "translate0"
},
{
"signal": "translate1"
}
]
}
],
"data": [
{
"name": "drc",
"url": "https://gist.githubusercontent.com/thomas-maschler/ef9891ef03ed4cf3fb23a4378dab485e/raw/47f3632d2135b9a783eeb76d0091762b70677c0d/drc.geojson",
"format": {
"type": "json",
"property": "features"
}
}
],
"marks": [
{
"type": "shape",
"from": {
"data": "drc"
},
"encode": {
"update": {
"strokeWidth": {
"value": 0.5
},
"stroke": {
"value": "darkblue"
},
"fill": {
"value": "lightblue"
},
"fillOpacity": {
"value": 0.5
}
},
"hover": {
"fill": {
"value": "#66C2A5"
},
"strokeWidth": {
"value": 2
},
"stroke": {
"value": "#FC8D62"
}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
}
]
}
Here is what they are suppose to look like
https://gist.github.com/thomas-maschler/ef9891ef03ed4cf3fb23a4378dab485e
What am I getting wrong?
Thanks,
Thomas
Not sure what happened. It seems your geojson was corrupt, but not really as I eventually could parse it in www.mapshaper.org. I reduced the file to 35% and then it parsed normally:
Vega-lite spec below (compile to Vega code in the editor if needed):
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"width": 700,
"height": 500,
"config": {"view": {"stroke": "transparent"}},
"layer": [
{
"data": {
"url": "https://gist.githubusercontent.com/mattijn/2ce897c2020a6e5b7ae6baf03dffe179/raw/564b6d484657864dcb77d0bb18db00fc7dc7668d/drc.geojson",
"format": {"type": "json", "property": "features"}
},
"mark": {"type": "geoshape", "stroke": "white", "strokeWidth": 1},
"encoding": {"color": {"value": "#bcbcbc"}}
}
]
}
How to read geojson with vega
It sounds super simple, but I can't get how can I use geojson, not topojson, for my polygons.
that's my current attempt:
"data": [
{
"name": "nabs",
"url": "both_boundaries.geojson",
"format": {"type": "json"},
"transform": [
{
"type": "geopath", "projection": "mercator",
"scale": 74, "center": [-73.99,40.72]
}
]
}
]
You have to parse the features using property within your format:
"format": {"type": "json", "property":"features"},
Full example spec:
{"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 500,
"height": 600,
"autosize": "none",
"signals": [
{
"name": "translate0",
"update": "width / 2"
},
{
"name": "translate1",
"update": "height / 2"
}
],
"projections": [
{
"name": "projection",
"size": {"signal": "[width, height]"},
"fit": {"signal": "data('netherlands')"}
}
],
"data": [
{
"name": "netherlands",
"url": "https://raw.githubusercontent.com/mattijn/datasets/master/NL_outline_geo.json",
"format": {
"type": "json",
"property": "features"
}
}
],
"marks": [
{
"type": "shape",
"from": {
"data": "netherlands"
},
"encode": {
"update": {
"strokeWidth": {
"value": 0.5
},
"stroke": {
"value": "darkblue"
},
"fill": {
"value": "lightblue"
},
"fillOpacity": {
"value": 0.5
}
},
"hover": {
"fill": {
"value": "#66C2A5"
},
"strokeWidth": {
"value": 2
},
"stroke": {
"value": "#FC8D62"
}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
}
]
}
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
}