Develop Reference

MapBox web app map widget, Multiple 'paint' arguments. Adding Opacity and Radius fails

I would like to combine the following two arguments in a mapbox webapp widget.
The first argument is the color of latitude and longitude points:
I also want to have the opacity argument added, so the map dots do not have a center, like this:
But when I try to add both arguments, the opacity argument is ignored.
var coorAddresses = [ [ -75.7040473, 45.418067,"Medium" ], [-75.7040473, 45.418067, "Medium"], [-79.32930440000001, 43.7730495, "Unknown"]]
$.getJSON(coodAddresses, function(data) {
for(var itemIndex in data) {
// push new feature to the collection
featureCollection.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [data[itemIndex][0], data[itemIndex][1]]
},
"properties": {
"size_by": data[itemIndex][2],
"color_by": data[itemIndex][2]
},
});
}
});
map.on('load', function () {
map.addLayer({
"id": "points",
"type": "circle",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": featureCollection
}
},
"paint": {
"circle-color": [
'match',
['get', 'size_by'],
'Easy',
'#e4f400',
'Medium',
'#f48a00',
'Unknown',
'#6af400',
/* other */ '#00e4f4'
],
"circle-radius": [
'match',
['get', 'size_by'],
'Easy',
4,
'Medium',
7,
'Unknown',
2,
/* other */ 1000
],
// "circle-opacity": 0, // color does not show if i uncomment these lines
// "circle-stroke-width": 1, // do not get desired 'hollow' circle unless these lines run
}});

Add some basic markers to a map in mapbox via mapbox gl js

I have a map styled with mapbox studio, however I'm having difficulty adding even a basic marker to it, however text is appearing where the marker should be which suggests that the marker would be there.
So here's the code with that map style:
mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
container: 'map',
style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1",
center: [-30.50, 40],
zoom: 2,
interactive: false
});
And here some markers being added from an example in the api:
map.on('style.load', function () {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "monument"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"marker-color": "#ff00ff"
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
However only the text and not the icons appear.
Question is: how would I add just a normal basic colored marker to this map, not even one of the special icon ones?
Thanks.

Problem here is that the starting point of your style in Mapbox Studio, the template you chose, doesn't have the glyphs/sprites you're referencing in your layer layout. If you switch to the same style they're using in the example you've used:
mapbox://styles/mapbox/streets-v8 you'll see that the markers will appear. It's because they've been added to that style. If you switch back to your style, they're gone again.
Here's a console.log of your style's sprites:
And here's a console.log of Mapbox streets sprites:
As you can see, you have only two while mapbox has dozens (more than on the screenshot). You can use the ones you have by simply using the propertynames: default_marker and secondary_marker:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "default_marker"
}
}
map.addLayer({
"id": "markers",
"source": "markers",
"type": "symbol",
"layout": {
"icon-image": "{marker-symbol}",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
Example on Plunker: http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview
If you need more you've got to add the sprites/glyphs you want to use to your style in Mapbox studio. Unfortunately this has little to do with "programming" since it's related to Mapbox Studio which is a software tool and thus kind of "offtopic" here on stackoverflow.
If you don't even need sprite/glyphs you could also use type: circle and the paint properties to create simple circles:
map.addLayer({
"id": "markers",
"source": "markers",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
Example on Plunker: http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview
More on styles and sprites can be found here:
https://www.mapbox.com/help/define-sprite/
https://www.mapbox.com/developers/api/styles/#Sprites
https://www.mapbox.com/mapbox-gl-style-spec/#sprite

Looping over data in leaflet

I have 1000 geographic data points and I have a US map. I want to create tiny circles at each of these 1000 geo data points. My data is in geojson format.
I am able create a circle at one point at a time. But how do I loop over the dataset to create circles at each point?
This is my circle code:
var circle = L.circle([64.837778, -147.716389], 500, {
color: 'black',
fillColor: '#000',
fillOpacity: 0.8
}).addTo(map);

You should use L.GeoJSON to render your data. It was made for rendering GeoJSON data. It has a pointToLayer function which you can use to render your point to circles, circlemarkers or whatever you desire. As a matter of fact the examples section on the Leaflet website has an exact example of what you are trying to accomplish:
L.geoJson(someGeojsonFeature, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
You can render single features or entire featureCollections with the GeoJSON layer, check out the examples on the site: http://leafletjs.com/examples/geojson.html
EDIT: as per request, an entire example:
First you start of with a GeoJSON featureCollection:
var featureCollection = [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-104.99, 39.73]
}
},{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [-104.96, 39.73]
}
}];
Instanciate GeoJSON layer with the featureCollection:
var geoJsonLayer = L.geoJson(featureCollection, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
});
Add the layer to your map instance:
geoJsonLayer.addTo(map);
Working example on plunker: http://plnkr.co/edit/RzYMrkkly3DdHMnkjvVN?p=preview

Google maps : pan to a center of a geojson route clicking on it

i´m new in google maps and after reading here and there I can´t make this work.
I´m doing a google map where Im showing bike forest routes using geojson ( linestring type, are given by coordinates points).
"type": "Feature",
"properties": {
"name": "larouco",
"color":"red"
},
"geometry": {
"type": "LineString",
"coordinates": [ [ -7.634432, 41.955357, 981.6 ], [ -7.635379, 41.954641, 896.1 ], [ -7.635824, 41.953955, 900.9 ] ................ ] }
All fine at the moment.
I need to pan the map to the center of the road when you clicks it.
map.data.loadGeoJson('http://myroutes.json');
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return {
strokeColor: color,
strokeWeight: 3
};
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
here is where the problems starts
map.data.addListener('click', function(event) {
var center_rute = getCenter(new google.maps.LatLngBounds());
map.panTo(center_container);
//map.setZoom(13);
});
Thinks that LatLngBounds is the way but i´m running in circles...
Thanks,
Jul

You must access the geometry of the feature and create the LatLngBounds on your own by iterating over the points of the path(geometry)

Styling of Leaflet Features doesn't work

I've been trying to add a polygon on a Leaflet map and give it a style. I've been following their tutorials on http://leafletjs.com/examples/geojson.html however with no success.
My code is as following:
var myStyle = {
"color": "#0000FF",
"fill": true,
"opacity": 0.65
};
var myPolygon = [{
"type": "Feature",
"properties": {
"name": "Poly test",
"popupContent": "this is my test!",
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[6.0, 52], // top right
[5.9, 52], // top left
[5.9, 51.5], // bottom left
[6.0, 51.5]
]]
}
}];
// Create a map with standard location
map = L.map('map').setView([52.2, 6.5], 9);
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm = new L.TileLayer(osmUrl, {minZoom: 3, maxZoom: 14});
// Ask the user to get their current location
map.locate({setView : true});
// Add the tilelayer to the map
map.addLayer(osm);
L.geoJson(myPolygon, {
style: myStyle
}).addTo(map);
// Add event listeners
map.on('locationfound', myMarker);
The polygon outerlines are drawn, but with the standard blue color.
Could someone point me to the right solution on how to do this right?
Thanks!

You need fillColor and fillOpacity, see:
http://leafletjs.com/reference.html#path