Symbolize line based on attributes - javascript

I am trying to use PolyLineDecorator with Leaflet but I've hit a snag that I can't figure out even forgoing PolyLineDecorator when it comes to symbolizing a path/line based on attribute data.
var polyline = L.polyline([...]).addTo(map);
var decorator = L.polylineDecorator(polyline, {
patterns: [
// defines a pattern of 10px-wide dashes, repeated every 20px on the line
{offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
]
}).addTo(map);
Works great for me however, I have 20 lines in a single GeoJSON file and i'd like to symbolize the lines based on the Name field in the JSON file. I can't seem to find an example anywhere covering this. Can someone point me to any relevant examples or documentation? I feel like there has to be a way vs exporting each line as its own GeoJSON file.
Thanks for any help.

You should use GeoJson onEachFeature() method for this. Let's asume that your geoJson structure is:
var geojsonFeatures = [
{
"type": "Feature",
"properties": {
"name": "Trail 1",
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
},
{
"type": "Feature",
"properties": {
"name": "Trail 2",
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
}
];
You can access feature's name properties by feature.properties.name:
L.geoJson(geojsonFeature, {
onEachFeature: function (feature, layer) {
if (feature.properties.name === '') {
L.polylineDecorator(layer, {
patterns: [
{offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
]
}).addTo(map);
} else {
L.polylineDecorator(layer, {
patterns: [
{offset: 0, repeat: 30, symbol: L.Symbol.dash({pixelSize: 20})}
]
}).addTo(map);
}
})
})

Related

Leaflet not show EPSG:3857 coordinates

I am totally stuck with my WGS 84 / EPSG:3857 coordinates and display them on Leaflet.
I have Geojson with coordinates.
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
"6690861",
"682187"
]
},
"properties": {
"id": "908",
"message": "105",
"date": "",
"place": "",
"shape": ""
}
}
Now i want it display on Leaflet. But nothing show up. I search already 5 hours and find something about Proj4. Also no errors showing up.
My script code:
var map = L.map('map').setView([52.2129919, 5.2793703], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: 'Map data © OpenStreetMap'}).addTo(map);
// GeoJSON layer (UTM15)
proj4.defs('EPSG:3857');
async function addGeoJson() {
const response = await fetch("geojs.php");
const data = await response.json();
L.geoJson(data).addTo(map);
var layerGroup = L.geoJSON(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+feature.properties.message+'</h1><p>Datum: '+feature.properties.date+'</p>');
}
}).addTo(map);
}
addGeoJson();
It's for my the first time i work with this coordinates. With lat/long coordinates was don't have problems. And just started with javascript.
Kind regards,
I might be a bit late, but following the documentation of Proj4, I would say that you need to add the crs to your geojson, like so :
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
"6690861",
"682187"
]
},
"properties": {
"id": "908",
"message": "105",
"date": "",
"place": "",
"shape": ""
},
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3857"
}
}
}
Also, I think it's
L.Proj.geoJson(data).addTo(map);
instead of
L.geoJson(data).addTo(map);
I tried L.geoJson on my code and it didn't show anything contrary to L.Proj.geoJson so it might be your problem here.

setFeatureState not updating a value in Mapbox

I am trying to change the color of a marker which is a circle, that is being painted using the paint property on a layer.
Following this tutorial:
https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/
I have set the circle-color to be dependent of a feature-state:
map.addLayer({
id: "singles",
type: "circle",
source: "users",
filter: ["!has", "point_count"],
paint: {
'circle-radius': {
'base': 10,
'stops': [[5, 20], [15, 500]]
},
'circle-color': ["case",
["boolean", ["feature-state", "hover"], false],
'#ddffc8',
'#ff0000'
],
}
});
Then when somebody hovers over a sidebar, I want to update the feature-state and change the color:
function highlightMarkersOnHoverOnSidebar (markers, map) {
let marks = markers
Array.from(document.querySelectorAll('.sideBarItems')).map( (x, i) => {
x.addEventListener('mouseenter', function(){
map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: true});
}, false)
x.addEventListener('mouseleave', function(){
map.setFeatureState({source: 'users', id: marks.features[i].properties.id}, { hover: false});
}, false)
})
}
However, nothing happens when i hover the sidebar element.. and it doesnt even throw an error.
Is there anything im missing? thanks.
I also run into this issue.
It seems like you need an id at the feature level in your geojson. Not in the properties:
{
"type": "FeatureCollection",
"features": [
{
"id": 4459,
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
8.64543,
50.163105
]
},
"properties": {
"id": "NOT HERE",
"name": "Test",
"foo": "bar",
}
}
]
}
Moving the id to the feature solved the issue.
Are you using featureCollection in geoJson? That caused some problems for me.

How to change the style of a feature collection in leaflet?

I was looking at the choropleth example.
https://leafletjs.com/examples/choropleth/
This is the data source they use
{
"type": "Feature",
"properties": {
"name": "Alabama",
"density": 94.65
},
"geometry": ...
...
}
My dataset is a feature collection of polygons so it looks like
{
"type": "Feature Collection",
"Features": [
{
"type": "Feature",
"properties": {
"name": "Alabama",
"density": 94.65
},
"geometry": ...
...
},
{
"type": "Feature",
"properties": {
"name": "Ohio",
"density": 99.65
},
"geometry": ...
...
},
}
Anyway so its an array so when i make my style function I use
const finalLayer = L.geoJSON(currentLayer.layer, {
style: {this.styleData(currentLayer.layer)}
});
this.currentProjectLayers.push(finalLayer);
finalLayer.addTo(this.map);
getColor(data) {
return data > 1000000 ? '#800026' :
data > 800000 ? '#BD0026' :
data > 600000 ? '#E31A1C' :
data > 400000 ? '#FC4E2A' :
data > 200000 ? '#FD8D3C' :
'#FEB24C';
}
styleData(feature) {
return {
fillColor: this.getColor(feature.features[0].properties.totalHH),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
Obviously i don't want to use 0 as the index. When I use the index it colors them all according to the index of the one spot. I know how to do a forEach but I don't think that will work. I need to do the style in an onEachFeature i think.... But can I apply the style using OnEachFeature.. how would I do that?
You are probably trying to work around an issue that does not exist.
Although that may not be explicit, Leaflet GeoJSON factory also parses GeoJSON Feature Collection, as if it were directly an array of Features. As such, each of those Features will be modified by the style option, which receives as argument the Feature data:
L.geoJSON(geojsonFeatureCollectionObject, {
style: function (featureObject) {
return {
fill: featureObject.properties.totalHH
};
}
});

How to make MarkerClusterGroup cluster polygons

I am trying to show clusters using markerclustergroups with Polygons. Right now the polygons are shown but the clusters aren't. I have been trying to use center of mass for the polygons because it seems like markerclustergroup doesn't like polygons but that doesn't really work since the animation of markerclustergroup will be set on the centroids and not the actual polygon.
My polygons all vary in amount of coordinates. Some have +10 sets others have 3.
How would I use markerclustergroup for polygons?
Below my code can be seen:
// Create variable to hold map element, give initial settings to map
var map = L.map('map', {
center: [23.70489, 43.90137],
zoom: 5
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
}).addTo(map);
var ojStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
// Hardcoded polygons as GeoJSON
var polygons = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[37.99896240234376, 21.55017532555692],
[39.39422607421876, 21.476073444092435],
[38.88336181640626, 22.56582956966297],
[38.023681640625, 22.611475436593366],
[37.43591308593751, 21.99908185836153],
[37.28485107421876, 21.624239377938288],
[37.28485107421876, 21.624239377938288],
[37.99896240234376, 21.55017532555692]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[38.50708007812501, 21.453068633086783],
[39.20745849609376, 21.37124437061832],
[39.10858154296876, 20.876776727727016],
[38.80920410156251, 20.912700155617568],
[38.49884033203126, 20.94604992010052],
[38.50708007812501, 21.453068633086783]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[50.57830810546875, 25.980268007469803],
[50.77606201171876, 25.956809920555312],
[50.780181884765625, 25.69970044378398],
[50.56457519531251, 25.822144306879686],
[50.56182861328126, 25.945696562830516],
[50.57830810546875, 25.980268007469803]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[54.37408447265626, 24.51963836811676],
[54.29443359375001, 24.40963901896311],
[54.25872802734375, 24.449649897759667],
[54.32739257812501, 24.539627918861232],
[54.37133789062501, 24.559614286039903],
[54.37408447265626, 24.51963836811676]
]
]
}
}, {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[54.40155029296876, 24.463400705082282],
[54.41940307617188, 24.489648077028683],
[54.45785522460938, 24.462150693715266],
[54.43450927734376, 24.43839812102505],
[54.40155029296876, 24.463400705082282]
]
]
}
}]
}
var polygonArray = []
for (i = 0; i < polygons.features.length; i++) {
polygonArray.push(polygons.features[i]);
}
var markers = L.markerClusterGroup().addTo(map);
var geoJsonLayer = L.geoJson(polygonArray);
markers.addLayer(geoJsonLayer);
map.fitBounds(markers.getBounds());
http://js.do/code/165930 - Shows how clustering doesn't work for the polygons
I am looking for a solution like this: http://jsfiddle.net/ve2huzxw/237/
You can do it very much like in this GIS post: Is it possible to cluster polygons in Leaflet?
// Compute a polygon "center", use your favourite algorithm (centroid, etc.)
L.Polygon.addInitHook(function() {
this._latlng = this._bounds.getCenter();
});
// Provide getLatLng and setLatLng methods for
// Leaflet.markercluster to be able to cluster polygons.
L.Polygon.include({
getLatLng: function() {
return this._latlng;
},
setLatLng: function() {} // Dummy method.
});
Updated live example: http://js.do/code/166021

Leaflet - Interactive choropleth map over time

I have data of, say, density over 30 districts from 2000 to 2010.
I'd like to make an interactive choropleth map for each year and then either use a slider (ideally) or a radio button to select between years.
I can get interactivity on the first year, but NOT on the layers for other years.
You can see a working example here, but let me put some details below:
For simplicity, consider just two years. blocks1995 has the non-overlapping polygons BlockA and BlockB (the two districts) and blocks1996 has the same blocks. They have a property called density that produces the choropleth:
var blocks1995 = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
},
"features": [{
"type": "Feature",
"properties": { "time": 1995, "density": 3.1, "nameB": "BlockA" },
"geometry": {
"type": "Polygon",
"coordinates": [[[50.0, 29.0],[50.0, 29.99],[50.51, 29.99],[50.0, 29.0]]]
}
}, {
"type": "Feature",
"properties": { "time": 1995, "density": 1.1, "nameB": "BlockB" },
"geometry": {
"type": "Polygon",
"coordinates": [[[50.01, 30.0],[50.52, 30.0],[50.52, 30.5]]]
}
}]
};
var blocks1996 = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
},
"features": [{
"type": "Feature",
"properties": {"year": 1996, "density": 2.2, "name": "BlockA" },
"geometry": {
"type": "Polygon",
"coordinates": [[[50.0, 29.0],[50.0, 29.99],[50.51, 29.99]]]
}
}, {
"type": "Feature",
"properties": {"year": 1996,"density": 1.2,"name": "BlockB"},
"geometry": {
"type": "Polygon",
"coordinates": [[[50.01, 30.0],[50.52, 30.0],[50.52, 30.5]]]
}
}]
};
I've tried adding them to an OverlayLayer
var blocks1995Layer = L.layerGroup([ L.geoJson(blocks1995)]),
blocks1996Layer = L.layerGroup([ L.geoJson(blocks1996)]);
var overlayMaps = {
"Blocks 1995": blocks1995Layer,
"Blocks 1996": blocks1996Layer
};
var map = new L.map('map', {layers:[blocks1995Layer]})
.setView([29, 50], 7);
I put the boilerplate interactivity code found in this Leaflet interactive choropleth tutorial and then I add back to the map:
geojson = L.geoJson(blocks1995, {
style: density_style,
onEachFeature: addToFeature
}).addTo(map);
L.control.layers(null, overlayMaps).addTo(map);
The problem is I'm adding interactivity to blocks1995 only, but I haven't been able to add it to overlayMaps.
I'm OK using a Leaflet plug-in (I tried TimeSlider but also couldn't figure it out).
Another possibility is to combine the two block1995and block1996 variables into one with an extra feature year or time is that makes things easier. The idea would be for Leaflet to query by time (say, when a slider moves) and produce the interactive choropleth per year.
Thanks!
Basically, you're not adding layers to control properly. Currently, you're doing this
var blocks1995Layer = L.layerGroup([ L.geoJson(blocks1995)]),
blocks1996Layer = L.layerGroup([ L.geoJson(blocks1996)]);
var overlayMaps = {
"Blocks 1995": blocks1995Layer,
"Blocks 1996": blocks1996Layer
};
geojson = L.geoJson(blocks1995, {
style: density_style,
onEachFeature: addToFeature
}).addTo(map);
Instead, try this
geojson = L.geoJson(blocks1995, {
style: density_style,
onEachFeature: addToFeature
}).addTo(map);
geojson1 = L.geoJson(blocks1996, {
style: density_style,
onEachFeature: addToFeature
}).addTo(map);
var overlayMaps = {
"Blocks 1995": geojson,
"Blocks 1996": geojson1
};
Here is a working example
Here is another example where I've implemented radio buttons instead of checkboxes using this plugin
Edited
As per your comment, I've created a example using this leaflet time slider plugin. Here is the part of the code.
//I've created 5 geojson layers, in order the slider to look appropriate.
geojson = L.geoJson(blocks1995, {
style: density_style,
onEachFeature: addToFeature,
time: "1995" //this is for labeling, you may alter this value if required
});
geojson1 = L.geoJson(blocks1996, {
style: density_style,
onEachFeature: addToFeature,
time: "1996"
});
geojson2 = L.geoJson(blocks1997, {
style: density_style,
onEachFeature: addToFeature,
time: "1997"
});
geojson3 = L.geoJson(blocks1998, {
style: density_style,
onEachFeature: addToFeature,
time: "1998"
});
geojson4 = L.geoJson(blocks1999, {
style: density_style,
onEachFeature: addToFeature,
time: "1999"
});
//now add each geojson layer to a single layer group, as the slider take only one layer
var layerGroup = L.layerGroup([geojson, geojson1, geojson2, geojson3, geojson4 ]);
//initiate slider, follow = 1 means, show one feature at a time
var sliderControl = L.control.sliderControl({layer:layerGroup, follow: 1});
map.addControl(sliderControl);//add slider to map
sliderControl.startSlider();//starting slider
Here is the working example

Categories