Develop Reference

Is there any way to update my mapbox gl source?

Hello i have a problem when i try to update my mapbox source on click.
I have already to sources (cells , heatmap), I try to add a new sources with these code
this.map.addSource("points", {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Point",
coordinates: [-77.0323, 38.9131],
},
properties: {
title: "Mapbox DC",
"marker-symbol": "monument",
},
},
});
I also try delele sources (cells , heatmap), add then a dd a new sources.
this.map.removeLayer("heatmap");
this.map.removeSource("heatmap");
this.map.removeLayer("cells");
this.map.removeSource("cells");
this.map.addSource("points", {
type: "geojson",
data: {
type: "Feature",
geometry: {
type: "Point",
coordinates: [-77.0323, 38.9131],
},
properties: {
title: "Mapbox DC",
"marker-symbol": "monument",
},
},
});
I don't get any error in the browser console from mapbox but i cant see the new sources.
Thanks a lot !

I find the solution i have wrong coordinates ( i have lat,lot but we want lot,lat) –

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

Zoom in not working on Highmaps

I took a Highmaps example from the demo section and zooming in was working fine. Then I replaced the data object with my own data and changed the world map with my own GeoJSON data.
Now the zoom doesn't work anymore.
Please see this JSFiddle.
I managed to simplify the code up to this point:
var geoJson = { ... }
var data = [...]
// Initiate the chart
$('#container').highcharts('Map', {
mapNavigation: {
enabled: true,
navigationButtons: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series: [{
data: data,
mapData: geoJson,
joinBy: ['name', 'name'],
}]
});
What can I do to make the zoom work?

This must be a bug, it works if you change your coordinate data. jsFiddle:
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "a"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[3125, 6250],
[5625, 6250],
[5624, 8750],
[3125, 8750],
[3125, 6250]
]
]
}
}, {
"type": "Feature",
"properties": {
"name": "b"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[6875, 6250],
[9375, 6250],
[9375, 8750],
[6875, 8750],
[6875, 6250]
]
]
}
}]
};
// Initiate the chart
$('#container').highcharts('Map', {
mapNavigation: {
enabled: true,
},
series: [{
mapData: geoJson
}]
});
I suggest filing an issue on GitHub, and we'll look into it in detail.

Simplest GeoJSON map script

I have used Polymaps in the past but can anyone point me to some really simple script that generates a map from geojson without extra bloat and library dependencies?
I have a country.json file with geojson and want to render the map without d3, openLayers, or other libraries.

It's not a standalone script, but a library, but I've used OpenLayers in the past. Pretty simple to use and works with GeoJson.
The examples on their website are pretty useful too. From their GeoJson example:
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
var featurecollection = {
"type": "FeatureCollection",
"features": [
{"geometry": {
"type": "GeometryCollection",
"geometries": [
{
"type": "LineString",
"coordinates":
[[11.0878902207, 45.1602390564],
[15.01953125, 48.1298828125]]
},
{
"type": "Polygon",
"coordinates":
[[[11.0878902207, 45.1602390564],
[14.931640625, 40.9228515625],
[0.8251953125, 41.0986328125],
[7.63671875, 48.96484375],
[11.0878902207, 45.1602390564]]]
},
{
"type":"Point",
"coordinates":[15.87646484375, 44.1748046875]
}
]
},
"type": "Feature",
"properties": {}}
]
};
var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector();
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(featurecollection));