I would like to have more than one layer within one existing GeoJSON layer.
I found some example here:
http://www.gistechsolutions.com/leaflet/DEMO/sports/sports.html
which refers to one .json file and afterwards the features are collected from the properties.
I was trying on my code do something more simple, as I want to have the same colour, but only smaller radius of my icon.
My GeoJSON code looks like this:
var sitec = {
"type": "FeatureCollection",
features: [
{
type: "Feature",
"properties": {
"Title": "Sitec IS",
"Head": "7400 Beach Drive",
"Description": "Gavin Sinclair",
"Value":2
},
"geometry": {
"type": "Point",
"coordinates": [
0.16964435577392578,
52.29220753602784
]
}
},
{
"type": "Feature",
"properties": {
"Title": "JHG",
"Head": "Shortstanton sidings",
"Description": "Conor Murphy",
"Value":1,
"URL": "JHG",
"Pict": "image.png"
},
"geometry": {
"type": "Point",
"coordinates": [
0.05458831787109375,
52.29163006501503
]
}
}
]
};
and what I would like to achieve - set the file icon size based on the propeerties.Value but keep it in the same group.
My marker customisation looks like this:
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
and again, I would like to have everything the same, apart from radius, so just in case I set:
var geojsonMarkerOptions3 = {
radius: 2,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
My code looks as follows:
var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' +
feature.properties.Head
feature.properties.Value
label = String(feature.properties.Title)
return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label,
{permanent: true, direction: "center", className: "my-
labels"}).openTooltip();
return L.circleMarker(latlng, geojsonMarkerOptions3);
},
onEachFeature: function (feature, layer) {
layer.bindPopup(""+feature.properties.Title+"
Address: "+feature.properties.Head+"
"+feature.properties.Description+"
Website:"+feature.properties.URL+"
");
}
})
.addTo(map);
Map remains the same and console says nothing.
Does anyone knows how to do it? Or shall I write all this stuff separately, creating sth like completely new layer?
No comments:
Post a Comment