Saturday 29 April 2017

javascript - Leaflet distinguishing sublayers within one GeoJSON layer


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?


enter image description here




No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...