Hi I have a problem with Asymmetrik/ngx-leaflet geojson interpretation.
My geojson is automatically generated with color and opacity corresponding to the map information. Each geojson is a FeatureCollection with multiple Polygons differently styled.
I've tried different options, I've found to set style of the Polygons, but non of them seems to work.
Example geoJson:
{
"type":"FeatureCollection",
"features":[
{
"geometry":{
"type":"Polygon",
"coordinates":[
[...]
]
},
"type":"Feature",
"properties":{
"style":{
"color":"#ff0000",
"weight":0,
"opacity":0.2
}
}
}, ... ]}
I've been trying multiple options that seems to work for people. Also there is nothing on styling inside geojson in the ngx-leaflet docs.
How should I set the styling above to make ngx-leaflet display proper color, stroke and opacity?
ngx-leaflet doesn't do anything to manipulate the layers you add to the map. So, it's up to you to provide the style options when you create the features.
E.g.,
let geoJson = {...};
let options = { "color": "#ff7800", "weight": 5, "opacity": 0.65 };
L.geoJSON(geoJson, options).addTo(map);
This example was taken from here: http://leafletjs.com/examples/geojson/
Related
I am working on a project that utilizes Leaflet with a lot of tailored markers and colored lines/polygons. We are not using a GeoJSON layer in Leaflet.
I would like to export all or a subset of these objects/layers to GeoJSON and then import them back in without losing any detail like color and description.
Using the native toGeoJSON function of Leaflet, I can get GeoJSON data for anything I want on the map. Here is some code that produces GeoJSON for everything on the map:
function exportToGeoJSON() {
var allMarkersObjArray = [];
map.eachLayer(function (layer) {
allMarkersObjArray.push(layer);
});
var layerGroup = L.layerGroup(allMarkersObjArray);
var data = layerGroup.toGeoJSON();
var json = JSON.stringify(data); // Stringify the object
return json;
}
A snippet of the resulting GeoJSON created looks like this:
{
"type":"Feature",
"properties":{},
"geometry":{
"type":"Point",
"coordinates":[-75.668159,36.014897]}
}
We get the basic geometry which is nice but no properties with things like:
"properties": {
"id": 1,
"name": “Marker 1”,
"description": “This is a marker”,
"marker-size": "small",
"marker-color": "#f5a91a",
"marker-symbol": "b"
}
I want to find the best way to create these properties. I could certainly build the code to extract the properties from the Leaflet Marker object as an example but maybe there is a better way.
I have searched for potential plug-ins to do this but nothing is coming up on the radar screen. I would think other folks would like this type of capability.
Anyway, any thought or comments are welcome.
I have a mapbox map with custom coffee mug icons (not maki icons). I want to give the icons a halo conditionally based on a data field of each point. This works, but since the icon is uploaded as a png, it gets treated as a rectangle, even though the image is of a coffee mug which is mostly round. So when you add a halo, it gets added around the perimeter of the bounding rectangle of the icon. Here's a picture of two of these icons, one that has a halo because it meets the "CONDITION" and one that doesn't.
How can I make this halo wrap around the border of the coffee mug icons, like it does for maki icons? Here is the relevant part of my style definition:
layout: {
'icon-image': 'cafe-icon'
},
paint: {
"icon-color": "#1a7a08",
"icon-halo-color": "#e4be8b",
"icon-halo-width": ['case', ['==', ['get', 'CONDITION'], true], 4, 0]
}
Also, here are the mapbox dependencies in my package.json file:
"#mapbox/mapbox-sdk": "^0.12.1",
"mapbox-gl": "^2.1.1",
"#mapbox/mapbox-gl-geocoder": "^4.7.0"
And here is the coffee mug icon I'm using for now:
According to Mapbox-gl-js documentation couple of style properties can only be applied to SDF Enabled Images and one of them is "icon-halo-width" also.
READ HERE
Which says:
Four style specification properties can only be used with SDF-enabled images: icon-color, icon-halo-color, icon-halo-width, and icon-halo-blur.
I downloaded a demo png of "shop-15.png" from this link and applied the icon-halo-width to 10 and style get applied.
Code:
//downloaded
var accessible = "http://localhost:3000/shop-15.png";
map.loadImage(accessible, function (error, image) {
if (error) throw error;
map.addImage('accessible', image, { sdf: true });
map.addLayer({
"id": "iconLayer",
"type": "symbol",
"source": 'maine',
"layout": {
'icon-allow-overlap': true,
"icon-image": "accessible",
"icon-size": 3,
},
"paint": {
"icon-color": "white",
"icon-halo-color": "red",
"icon-halo-width": 10
}
});
});
Screenshot:
How To Create SDF Images?
HERE is the link where I combined few of my research.
Thanks!
In the echarts docs at https://echarts.apache.org/en/option.html#dataZoom-slider.handleIcon the handle icon for data zoom slider has shape options like "circle", "rectangle" etc.
However these shapes doesn't seem to work.
If we specify dataZoom: [{ handleIcon: "circle" }] the handle icon just disappears.
Is the implementation for this API still pending or else?
You misinterpreted the documentation. The method handleIcon expects a string of path but not some shape identifier. Please take a look at the tests where you can found how to use this method.
However, you can define the icons outside of the chart configuration and use inside with identifier:
var icons = {
circle: 'M17.498,11.697c...',
square: 'M17.498,11.697c...'
}
var option = {
//...
dataZoom: [{ handleIcon: icons['circle'] }]
}
I am using mapbox to try and query all features of the mapbox tileset and return them as geojson. From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures. My tileset only shows up at zoom 14 so I am having trouble querying all the features in the dataset at once and then applying a filter. Is this possible? It stills like querySourceFeatures returns an empty array.
function addLayers() {
map.addSource('plutonew-c03oxi', {
'type': 'vector',
'url': 'mapbox://samtpr.4ehwzn0r'
});
map.addLayer({
"id": "parcels_fill",
"type": "fill",
"source": "plutonew-c03oxi",
"source-layer": "plutonew-c03oxi",
'layout': {
'visibility': 'visible'
},
paint: {
'fill-color': 'blue',
'fill-outline-color': 'gray',
"fill-opacity": ["case",
["boolean", ["feature-state", "hover"], false],
0.5,
0
]
}
});
var features = map.querySourceFeatures('plutonew-c03oxi', {filter: ["==", ['get','ZIPCODE'], zipcode_val]});
From what I understand, to query features that are no visible on the screen, you must use querysourcefeatures
You may have misunderstood. querySourceFeatures allows you to query features that are present within the vector tiles currently loaded and displayable within the current viewport and zoom level. Unlike queryRenderedFeatures they don't have to actually be rendered through a visible layer, however.
In this case it sounds like you're hoping to gain access to features that are not available at the current zoom level, which is not possible.
I am trying to use geojson data to place points on a map. When I run my geojson data through a validator, the points appear on the edge of the map above the arctic circle and I'm not sure why. I plan on using this data with a leaflet map and a project built with angularjs. If anyone can add insight about any problems in my geojson code below, or things to look out for while using leaflet and angular, I would appreciate it! Thanks!
Here is my geojson code
{"type":"FeatureCollection",
"features":[
{"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[36.1199, -86.7775]
},
"properties":{
"name":"Kroger"
}
},
{"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[36.0903, -86.7323]
},
"properties":{
"name":"ALDI"
}
},
{"type":"Feature",
"geometry":{
"type":"Point",
"coordinates":[36.1266, -86.8474]
},
"properties":{
"name":"Publix"
}
}
]
}
GeoJSON uses a longitude-latitude (or easting-northing) format for the coordinates (read the relevant bit of the GeoJSON specification), but your points seem to be in latitude-longitude.
I know this is confusing, since Leaflet uses lat-lng instead of lng-lat. Confusion abounds.
Make sure to use longitude-latitude for the coordinates of your GeoJSON and you'll be fine.