mapbox-gl-js
JavaScript/WebGL vector maps library
Is there a way to use Mapbox GL (asking about both JS and native) in an offline setting? With MBTiles, you could use either the MBTiles file or extract the raster images. I'm wondering if there's anything similar that would allow Mapbox GL to load the data from a local source as opposed to requiring a web connection to Mapbox's servers. Not talking about just caching data for when the user is offline but actually making a map that runs purely offline all the time. Thanks.
Source: (StackOverflow)
How to restrict the area of map by using southwest and northeast latitude and longitude in mapBox android?
Source: (StackOverflow)
I've followed both the example at Mapbox site and this instruction on GitHub but can't get markers to show on my map:
http://codepen.io/znak/pen/waPPRj (using Mapbox style and sprites)
http://codepen.io/znak/pen/PqOEyV (using custom style and sprites)
var center = [51.5, -0.1];
var map = new mapboxgl.Map({
container: 'map',
center: center,
zoom: 8,
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/mapbox-streets-v7.json'
});
// Markers
map.on('style.load', function() {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.48, -0.08]
},
"properties": {
"title": "Lorem",
"marker-symbol": "default_marker"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.52, -0.12]
},
"properties": {
"title": "Ipsum",
"marker-symbol": "secondary_marker"
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"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"
},
"paint": {
"text-size": 14
}
});
});
All styles, JSON and PNG files with markers seem to load properly.
Any ideas?
Source: (StackOverflow)
I'm trying to get the position of a marker on a mapbox map in order to show a div in that position.
This is the code I tried but it does not do anything:
var a = $(geojson[0].features[1]).offset();
alert(a.top);
Source: (StackOverflow)
I'm trying to incorporate markers on a map using Mapbox GL on my rails app.
In my controller file i have:
@boatramps = Boatramp.all.limit(6)
@geojson = {"type" => "FeatureCollection", "features" => []}
@boatramps.each do |boatramp|
@geojson["features"] << {
geometry: {
type: 'Point',
coordinates: [boatramp.long, boatramp.lat]
},
properties: {
title: boatramp.id,
:'marker-symbol' => 'monument'
}
}
end
respond_to do |format|
format.html
format.json{render json: @geojson}
end
for my ajax call I have
style.layers.push({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-12",
"text-field": "{title}",
"text-font": "Open Sans Semibold, Arial Unicode MS Bold",
"text-offset": [0, 0.6],
"text-anchor": "top"
},
"paint": {
"text-size": 12
}
});
$.ajax({
type: 'GET',
url: '/virginia',
dataType: 'json',
success: function(response){
console.log(response)
var markers = new mapboxgl.GeoJSONSource({ data: response});
map.addSource('markers', markers);
},
error: function(){
}
})
When I have 5 markers the call works fine and i get the boatramp id to show.(Also having issues with the "icon image" to show) As soon as I increase the limit to 6 or more. I get an error:
Uncaught TypeError: Cannot read property 'leaf' of undefined
As I zoom in and out on the map it executes the same error. Additionally, once I Have a considerable amount of objects 40 +, some of them don't show. Any ideas?
Source: (StackOverflow)
This question comes close but misses the mark.
Do embedded GeoJSON styles work with Mapbox GL?
I would like to load and categorise the colour of each linestring based on a property set in the geojson. This example comes very close https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/
Where setting the style via properties works for markers via the layout.
I cannot seem to use this same technique in the paint section of the map.addlayers. I also seemed to have trouble trying to parse integers in the same way the text is parsed in the example.
Two things I am not clear on doing.
1. changing a linestring colour via a geojson property on load
2. changing the linestring colour after loading the geojson into my map.
Cheers.
Source: (StackOverflow)
When adding a geoJSON line to a map using Mapbox GL JS it crashes even though I'm fairly certain I've used valid geoJSON.
An example is http://jsfiddle.net/mpmckenna8/4eknty7s/4/ but it doesn't always crash quickly.
Although if coordinates are changed to make the geometry a little more complex the session will crash even faster. http://jsfiddle.net/mpmckenna8/f3j7oaLn/1/
mapboxgl.util.getJSON('https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v5.json', function (err, style) {
if (err) throw err;
style.layers.push({
"id": "bounding",
"source": "bounding",
"type": "line",
"render": {
"type":"line",
"line-join":"round"
},
"style":{
"line-color":"red",
"width":{
"stops": [[2, 1], [11, 1], [13, 2], [15, 5]]
},
"line-opacity":0.5
}});
var map = new mapboxgl.Map({
container: 'map',
style: style,
center: [spots.Guinea[1], spots.Guinea[0]],
zoom: 3
});
//setTimeout(zoomin, 500)
var bounds = new mapboxgl.LatLngBounds([
[
-3.75732421875,
3.381823735328289
],
[ -17.8417, 14.0726]
]);
var geoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[ bounds.getNorthEast().lng, bounds.getNorthEast().lat], [bounds.getSouthEast().lng, bounds.getSouthEast().lat], [bounds.getSouthWest().lng, bounds.getSouthWest().lat],[bounds.getNorthWest().lng, bounds.getNorthWest().lat]
]
},
"properties": {
"title": "bounding",
"id":"bounding"
}
}
]};
var NeastLat = parseInt(bounds.getNorthEast().lat);
var northlng = bounds.getNorthWest();
console.log((NeastLat))
var geoWork = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-20, 28], [-20, 34], [14,4],[14,21],[-20, 21]
]
},
"properties": {
"title": "bounding",
"id":"bounding"
}
}
]};
console.log()
var bounding = new mapboxgl.GeoJSONSource({ data: geoWork });
map.addSource("bounding", bounding);
})
Yet when I added a bunch of fairly complex geojson from a file it worked just fine. http://mpmckenna8.github.io/sfbike/labs.html#11/37.7630/-122.4940
I feel like maybe I'm doing something wrong adding the new style. Here's the example from the docs just adding points. https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/
Any advice as to what's crashing the jsfiddle examples would be appreciated.
Source: (StackOverflow)
Is it possible to utilize the built-in properties attribute of a GeoJSON data source to automatically style a Mapbox GL map without having to pre-specify a style?
I have a use case where I dynamically load in GeoJSON LineString data that needs to be a particular color and it already has style data built in:
{"properties": {"color": "#ffff33"...
Right now, I have a rather inelegant setup where the relevant color is parsed out, translated into a style, and added to the map upon every load:
$scope.patternPropToStyle = function(props) {
var id = 'pattern' + props.pid;
var style = {
"id": id,
"type": "line",
"source": id,
"render": {
"$type": "LineString",
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": props.color,
"line-width": 8
}
}
$scope._mapStyle.layers.push(style);
$scope._map.setStyle($scope._mapStyle);
}
I feel like there has to be a better way to do this.
Source: (StackOverflow)
I'm making an animated map showing a series of points using Mapbox.js. Ideally, I want to smoothly switch focus between points by combining zoom and pan like this example created in d3.js. I wonder if there is anyway to control the pan & zoom animation speed (mainly to slow it down). In the code below, I've tried both setView() and panTo() functions and the transition is too fast. Any suggestion will be highly appreciated, thanks!
L.mapbox.accessToken = "#Token Here";
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([34.01, -118.48], 5, {
pan: { animate: true },
zoom: { animate: true }
});
map.setView([33.98, -118.42], 5);
Source: (StackOverflow)
I'm trying to center a text label over a feature polygon in mapbox-gl-js. Is this possible? It looks like the only option related to the placement of a label is the "symbol-placement" layout property (https://www.mapbox.com/mapbox-gl-style-spec/#symbol):
symbol-placement
Optional enum. One of point, line. Defaults to point.
Label placement relative to its geometry. line can only be used on LineStrings and Polygons.
Using "point" places the label at the bottom right corner of the feature:
Ideas?
Source: (StackOverflow)
Does anyone know if there is a way to determine the min/max elevation of the area within the map bounds view when using mapbox://mapbox.mapbox-terrain-v2?
Source: (StackOverflow)
I'm getting this error **Uncaught TypeError: Cannot read property 'sources' of undefined** (mapbox-gl.js:4) when trying to load a tile as a mapbox-gl source.
<div id='map' style='height:500px;width:700px;'>
</div>
<script>
var accessToken='<my access token>'
mapboxgl.accessToken = accessToken;
var map = new mapboxgl.Map({
container: 'map',
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v4.json', //stylesheet location
center: [-34.6, -58.4],
zoom: 11
});
var sourceObj = new mapboxgl.Source({
type: 'vector',
url: 'mapbox://<some map id>'
});
map.addSource('test',sourceObj);
</script>
If I don't load any source, everything works well. This happens with the 0.2.1 and 0.2.2 versions of the API. I tried with different tiles and I get the same problem.
Any clue?
Thanks in advance
Source: (StackOverflow)
How can I add a data source hosted Mapbox into a mapbox-gl-js project?
It used to be like this: http://bit.ly/1LcwekS way back in V.2.1
var sourceObj = new mapboxgl.Source({
type: 'vector',
url: 'mapbox://foo-bar.ci58c127'
});
but mapboxgl.Source is no longer supported in mapboxgl.Source version 8.0
Source: (StackOverflow)