Develop Reference

leaflet geojson point layer coloring

i have a geojson link with to many points data and i want to coloring some points using values from field_1.
i use this code but dont work dont coloring this point and keep default color style.
any idea where i have wrong ?
var data= new L.GeoJSON.AJAX("url/path/",{
style:function colors(feature) {
switch (feature.properties.field_1){
case 'some value':
return{
color:'#20ff78',
fillOpacity:0.8
};
break;
}
},
onEachFeature:function (feature,layer) {
layer.bindPopup('some text');
}
});
data.addTo(map);
UPDATE
json example :
{"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "MultiPoint", "coordinates": [[15.94, 30.63]]}, "properties": {"f1": 2, "f2": "value", "f3": "other value"}}]}]

HereMaps GeoJSON Polygon click read properties

my question is as follows.
What I have
I have a GeoJSON feature collection with Polygons and custom properties
GeoJSON is loaded into the Here maps
What I want
I want to detect a polygon click and read the custom property value
Example GeoJSON
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"customProp": "heyImACustomProperty"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
16.45477294921875,
43.51619059561274
],
[
16.450481414794922,
43.50772499687011
],
[
16.470909118652344,
43.5019975949657
],
[
16.481552124023438,
43.51021500212034
],
[
16.475543975830078,
43.518306809754804
],
[
16.45477294921875,
43.51619059561274
]
]
]
}
}]
}
Docs on GeoJSON manipulation are not the greatest.
Thanks in advance.

Here is the example code to get the property value of the GeoJSON Polygon on click.
reader = new H.data.geojson.Reader('/path/to/geojson/file.json');
reader.parse();
map.addLayer(reader.getLayer());
reader.getLayer().getProvider().addEventListener("tap", function(e) {
if(e.target instanceof H.map.Polygon) {
console.log('Custom property value: ', e.target.getData().properties.customProp);
}
});
GeoJSON documentation can be found here:
https://developer.here.com/documentation/maps/topics_api/h-data-geojson-reader.html

Not sure why I get this error: mapboxgl.Marker is not a constructor

I am new to Mapboxgl and have been using it to render a map in a mobile application using Cordova. So far the map renders fine, and can zoom as expected. However, when trying to add a custom marker I get Uncaught TypeError: mapboxgl.Marker is not a constructor.
I have tripled check that I have installed the mapbox-gl.js library and double checked the code for typos. This code is already functional on an existing webpage, but now my goal is to try to use it in a mobile app.
I have used the demo code from the mapboxgl custom markers in CodePen and have been successful https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/.
function add_markers(geojson, poi, icon_name) {
// add markers to map
geojson.features.forEach(function (marker) {
var el = document.createElement('span');
el.className = 'map-icon map-icon-map-pin marker '+poi;
el.innerHTML = "<span class='tooltip "+icon(icon_name)+" marker-sub "+poi+"' title=\""+marker.properties.name+"\"></span>";
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
}
The data is mocked from this:
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Foo"
},
"geometry": {
"type": "Point",
"coordinates": [
-66.324462890625,
-16.024695711685304
]
}
},
{
"type": "Feature",
"properties": {
"name": "Bar"
},
"geometry": {
"type": "Point",
"coordinates": [
-61.2158203125,
-15.97189158092897
]
}
},
{
"type": "Feature",
"properties": {
"name": "Baz"
},
"geometry": {
"type": "Point",
"coordinates": [
-63.29223632812499,
-18.28151823530889
]
}
}
]
};
I have also tried to just add a standard marker with no luck(same error):
var marker = new mapboxgl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
Any ideas would be greatly appreciated!

I am sure you must be using the old version of map-boxgl most probably v 0.20.1 ,just change the version in the link to v 0.38.0 like this:
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'>
</script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css'
rel='stylesheet' />

SVG path attribute d to e.g. geoJSON

I've lot of geometries in a SVG. To be able to edit them in an Openlayers vector layer i'd like to convert the svg geometries e.g. to a geoJSON format, so that I can easily add them to the Openlayers layer.
FROM:
path xmlns="http://www.w3.org/2000/svg" id="G0W9Q7bC" d="M29.68 -30.10l-12.94 9.61 220.96 157.25 67.98-166.86-276.00 .00"/>
path xmlns="http://www.w3.org/2000/svg" id="G0W9Q7bA" d="M1223.26 349.19l-167.71 93.84 265.54 117.80-70.46 71.27 145.87 .00 .00-53.18-173.24-229.73"/>
path xmlns="http://www.w3.org/2000/svg" id="G0W9Q7bz_0" d="M1281.16 265.33l .00-111.81 115.34 .00M1396.50 265.33l-115.34 .00"/>
TO:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
568420.74334458,
121173.52026851001
],
[
568420.74334458,
135550.45067237
],
[
598372.6816859602,
135550.45067237
],
[
598372.6816859602,
121173.52026851001
],
[
568420.74334458,
121173.52026851001
]
]
]
}
}
]
}
Is there a js framework which can handle this?

Maybe you don't need to use OpenLayers. You can use d3 to draw a map. d3 also, has a lot of methods that can help you in the conversion.

Parsing error when drawing SVG paths from GeoJSON

I made a world map with D3.js. Everything worked like a charm. I then used the same code for a different geojson file, depicting Sweden only, and got multiple parsing errors. Both json files have the same structure, are well-formatted and so on. The only difference is the coordinates, so I'm suspecting that's were the problem lies. Any ideas?
I'm using QGIS to convert shapefiles to the geojson format. The error I'm getting is: "Error: Problem parsing d='[the path string]'". And the path string contains NaN here and there.
Sweden.json excerpt:
{
"type": "Feature",
"id": 0,
"properties": {
"KNKOD": "0114",
"KNNAMN": "Upplands Väsby",
"LANDAREAKM": 75.4
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
1620218.000425555,
6599561.998826771
],...
Countries.json excerpt
{
"type": "Feature",
"id": 0,
"properties": {
"type": "Country",
"name": "Aruba"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-69.89912109375,
12.452001953124991
],...
Javascript
var canvas = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 1000)
d3.json("sweden/countries.geojson", function (data) {
var group = canvas.selectAll("g")
.data(data.features)
.enter()
.append("g")
var path = d3.geo.path().projection(d3.geo.mercator());
var areas = group.append("path")
.attr("d", path)
})

Your GeoJSON files aren't in the same coordinate system. The coordinates for Sweden look like they're in UTM. When converting to GeoJSON with QGIS, make sure that you're using the same coordinate system for Sweden as you did for the world file -- this should fix the error.