I am rewriting a web application from Mapbox.js to Mapbox GL js.
Using the standard 'mapbox://styles/mapbox/streets-v8' style, where can I find a list of all working marker icons?
Here is my code:
m.map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": ["-75.532965", "35.248018"]
},
"properties": {
"title": "Start",
"marker-symbol": "entrance",
"marker-size": "small",
"marker-color": "#D90008"
}
}
}
});
m.map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-15", //but monument-15 works
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, -1.6],
"text-anchor": "top"
}
});
I read that all Maki icons should be made available for styles that don't have icons as a default:
https://github.com/mapbox/mapbox-gl-styles/issues/241
But most of them don't work.
Also there is the problem with the sizes - for Maki they were -small, -medium and -large, and now I see -11 and -15.
I just need to use some basic marker icons.
We're still sorting out the final implementation details for the default icon set and will document that set thoroughly once it has been decided upon.
Until then, you can see exactly what icons are available for a given style by peeking at the mapbox-gl-styles repo in the sprites folder.
Since that issue was closed, all maki icons are now natively available in mapbox-gl.js. You can see all available at https://www.mapbox.com/maki-icons/. You can also multiply their size using the icon-size paint property, though this may result in pixelation. There are still some hitches, like the icon-color property not yet working, so you'll need to edit, recolor, and republish icons for now. (issue #3605).
Related
I added another quality for showing the video, but there is no choice of another quality in the video player
jwplayer("player2").setup({
image: "https://cdn.jwplayer.com/v2/media/tkM1zvBq/poster.jpg?width=720",
"type": "video/mp4",
"sources": [{
"file": "http://*:1935/vod/volikogu_1080p.mp4/playlist.m3u8",
"label": "1080p"
}, {
"file": "http://*:1935/vod/volikogu_720p.mp4/playlist.m3u8",
"label": "720p"
}, {
"file": "http://*:1935/vod/volikogu_360p.mp4/playlist.m3u8",
"label": "360p"
}],
"label": "H.264 320px"
});
I'm seeing a few things in the above config that could be causing poor behavior in the player. First off, you have type on the top level when it should be on the same level as your source objects in the sources array. It also appears as though type is hls and not video/mp4 (based on the m3u8 extension).
Does the following setup change any behavior for you?
jwplayer("player2").setup({
image: "https://cdn.jwplayer.com/v2/media/tkM1zvBq/poster.jpg?width=720"
"sources": [{
"file": "http://*:1935/vod/volikogu_1080p.mp4/playlist.m3u8",
"label": "1080p",
"type": "hls"
}, {
"file": "http://*:1935/vod/volikogu_720p.mp4/playlist.m3u8",
"label": "720p",
"type": "hls"
}, {
"file": "http://*:1935/vod/volikogu_360p.mp4/playlist.m3u8",
"label": "360p",
"type": "hls"
}]
});
If the type of your files is mp4 then replace "type": "hls" with "type": "mp4" in the above.
You would be best served to have all of your child manifests in one single parent manifest. Do not put multiple m3u8's as different sources. Let the player or the browser change the quality based on a single master manifest. Also, your "label" and "type" attributes are not valid, I would remove them entirely.
I am currently working with image overlays (.gif) in Mapbox GL JS to provide weather radar data. I need to set a loop to show the images in motion - but the image overlays have a "fade-in" effect and I would like that gone. How can I remove this so the images just turn on and off as quickly as possible with no fade-in or out? I cannot find this in the API documentation, but it's possible I missed it somehow.
Edit : To be clear, I am just asking how to remove the fade-effects - not how to loop it or anything else - I can do that later.
My code to add an overlay and source (that produces the default fade-effect) is currently :
topleftmapbox.addSource("source_KEWX_L2_CC", {
"type": "image",
"url": "images/KEWX_L2_CC.gif",
"coordinates": [
[-102, 33],
[-94, 33],
[-94, 26],
[-102, 26]
]
})
topleftmapbox.addLayer({
"id": "overlay_KEWX_L2_CC",
"source": "source_KEWX_L2_CC",
"type": "raster",
"raster-opacity": 0.9,
"layout": {"visibility": "visible"},
}, firstSymbolId)
}
You need to change the raster-fade-duration property:
topleftmapbox.addLayer({
"id": "overlay_KEWX_L2_CC",
"source": "source_KEWX_L2_CC",
"type": "raster",
"paint": {
"raster-opacity": 0.9,
"raster-fade-duration": 0
},
"layout": {"visibility": "visible"},
}, firstSymbolId)
P.S. And yes, I recommend using the canvassource for animation.
I am placing markers by pulling coordinates from a MSSQL database.
I would like to make the markers (circles) a different color (red [#ff0000] or blue [#0000FF] depending on another variable in the database, but all the markers are brown (see source, link below).
here is an example:
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-98.00371, 38.65447]
},
"properties": {
"description": "<strong>UTEP 5560</strong>
<p>Ellsworth Co., Kansas: 38.65447, -98.00371: : JOHNSON, JD</p>",
"marker-size": "small",
"marker-color": "#0000ff",
"marker-symbol": "circle"
}
},....
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-11",
"icon-allow-overlap": true,
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
The full source code can be viewed here: http://webapps.fhsu.edu/ksfaunatest/account.aspx?o=33&t=75
You have to use the mapbox circle layer instead of marker layer, With that you can do data driven styling and give colors based on the 'mytype' property in the geojson
Below is the sample of the circle layer
map.addLayer({
'id': 'mapid',
'type': 'circle',
'source': source,
'paint': {
'circle-radius': 2,
'circle-color': {
property: 'mytype', // geojson property based on which you want too change the color
type: 'categorical',
stops: [
['type1', '#fbb03b'],
['type2', '#223b53'],
['type3', '#e55e5e']
}
});
Visit this link for a live example
The answer above uses the categorical layer property where you can color your circles depending on e.g. the category by using different stops.
I guess you just want to use a color that you define in the geojson feature properties. Then you could use the layers identity property like this:
map.addLayer({
id: 'layerId',
source: 'sourceName',
type: 'circle',
paint: {
'circle-radius': 2,
'circle-color': {
type: 'identity',
property: 'marker-color',
},
},
});
Also see: https://www.mapbox.com/mapbox-gl-js/style-spec/#function-type
The guys from guide4you did a great job making this lib opensource!!
I've succeeded in having a working demo guide4you sample.
How adjustable is the lib?
For instance how can I add layers with GeoJSON instead of KML.
Can the layers be added dynamically (with own javascript) instead of predefined?
Take this as example: https://openlayers.org/en/latest/examples/geojson.html
To be more specific: how can that example work together with guide4you ?
Kind regards,
Sam
To use a GeoJSON layer in guide4you you can just specify the type "GeoJSON" in the layerconfig.
{
"id": "3",
"type": "GeoJSON",
"source": {
"url": "path/to/geojson"
}
}
See also https://github.com/KlausBenndorf/guide4you/blob/master/conf/full/layers.commented.json for some examples
If you like to add a layer on the fly with javascript you can use this api function:
map.get('api').addFeatureLayer({
"id": "3",
"type": "GeoJSON",
"source": {
"url": "path/to/geojson"
},
"visible": true
})
the possible options are the same as in the layer config.
If you like to add only new features you can create a layer with type "Intern" and add the features with openlayers functionalities. The source of a feature layer is a subclass of ol.source.Vector.
In the example below I am assuming that geojsonObject is of the same kind as in the geojson example of openlayers.
var layer = map.get('api').addFeatureLayer({
"id": "3",
"type": "Intern",
"source": {
"features": []
},
"visible": true
});
layer.getSource().addFeatures((new ol.format.GeoJSON()).readFeatures(geojsonObject));
And last but not least you can use a simplified api to define features inside a layerConfig object like this:
{
"id": "3",
"type": "Intern",
"source": {
"features": [{
"id": 6,
"name": "Some feature",
"description: "Some description",
"style": "#defaultStyle",
"geometryWKT": "... any wkt string here ..."
},{
"geometryWKT": "... any wkt string here ..."
}]
}
}
this can be used either in a layerConfig file or in the addFeatureLayer api method.
I am trying to create some custom maps. I am using ol3 because of the drag and drop feature. The idea is to be able to style each feature on the map.
I drag and drop .gpx and .json files exported from JOSM and create a unique overlay for each feature.
I can change the stroke color etc. with a style function on that overlay. That all works great until I do the next drop.
The dropped features seem to appear in some random order getting interspersed with the ones from the previous drop. I need to have some way to tell which features are new from that drop operation so I can style those without affecting the ones I have already styled.
Is there a unique identifier of some kind that I can get from the feature?
Is there a way that I can tag a feature so with a unique id?
I tried feature.getId() but that is undefined at the time that the drag and drop event fires.
You can define your feature(s) in a json format
var geoSource = new ol.source.GeoJSON({
/* #type {olx.source.GeoJSONOptions} */
"projection": "EPSG:3857" //us
, "object": {
"type": "FeatureCollection"
, "crs": { "type": "name", "properties": { "name": "EPSG:4326" } }//'EPSG:3857'//euro 'urn:ogc:def:crs:EPSG::4326'//'urn:ogc:def:crs:OGC:1.3:CRS84'
, "features": [
{
"type": "Feature", "id": "01"
, "geometry": { "type": "Point", "coordinates": [-80.0874386, 26.7816928] }
, "properties": { "myproperty": "West Palm Beach" }
}
, {
"type": "Feature", "id": "02"
, "geometry": { "type": "Point", "coordinates": [-82.0838700, 26.9262480] }
, "properties": { "myproperty": "Punta Gonda" }
}
]
}
});
Then you access the feature by
var ff = geoSource.getFeatureById('02');
alert(ff.getProperties()['myproperty']);
or
if you need to analyse all the features, you can
geoSource.getFeatures().forEach(function (ff) {
alert(ff.getProperties()['myproperty']);
})
Does it help? Good luck.
when creating a feature, you can pass an object with custom properties to the constructor. For example:
var myFeature = new ol.Feature({
geometry: ...,
labelPoint: ..,
name:...,
customProp1: ...,
customProp2: ...,
myCustomID: myRandomIDGenerator()
})