I want to show a colored (for ex: red) round marker in Mapboxgl. Suppose if I have multiple occurrences of the same latitude and longitude then color should be changed to blue(for ex) and its count.
Consider there is only once occurrence of a LatLong then I need to show a red colored round marker. If there are 3 occurrences then I need to show blue colored round marker with 3.
Tried the following code,
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<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' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'my access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-77.04, 38.907],
zoom: 11.15
});
map.on('load', function () {
// Add a layer showing the places.
map.addLayer({
"id": "places",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"description": "<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>",
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [-77.038659, 38.931567]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Mad Men Season Five Finale Watch Party</strong><p>Head to Lounge 201 (201 Massachusetts Avenue NE) Sunday for a Mad Men Season Five Finale Watch Party, complete with 60s costume contest, Mad Men trivia, and retro food and drink. 8:00-11:00 p.m. $10 general admission, $20 admission and two hour open bar.</p>",
"icon": "theatre"
},
"geometry": {
"type": "Point",
"coordinates": [-77.003168, 38.894651]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Big Backyard Beach Bash and Wine Fest</strong><p>EatBar (2761 Washington Boulevard Arlington VA) is throwing a Big Backyard Beach Bash and Wine Fest on Saturday, serving up conch fritters, fish tacos and crab sliders, and Red Apron hot dogs. 12:00-3:00 p.m. $25.grill hot dogs.</p>",
"icon": "bar"
},
"geometry": {
"type": "Point",
"coordinates": [-77.090372, 38.881189]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Ballston Arts & Crafts Market</strong><p>The Ballston Arts & Crafts Market sets up shop next to the Ballston metro this Saturday for the first of five dates this summer. Nearly 35 artists and crafters will be on hand selling their wares. 10:00-4:00 p.m.</p>",
"icon": "art-gallery"
},
"geometry": {
"type": "Point",
"coordinates": [-77.111561, 38.882342]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Seersucker Bike Ride and Social</strong><p>Feeling dandy? Get fancy, grab your bike, and take part in this year's Seersucker Social bike ride from Dandies and Quaintrelles. After the ride enjoy a lawn party at Hillwood with jazz, cocktails, paper hat-making, and more. 11:00-7:00 p.m.</p>",
"icon": "bicycle"
},
"geometry": {
"type": "Point",
"coordinates": [-77.052477, 38.943951]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Capital Pride Parade</strong><p>The annual Capital Pride Parade makes its way through Dupont this Saturday. 4:30 p.m. Free.</p>",
"icon": "star"
},
"geometry": {
"type": "Point",
"coordinates": [-77.043444, 38.909664]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Muhsinah</strong><p>Jazz-influenced hip hop artist Muhsinah plays the Black Cat (1811 14th Street NW) tonight with Exit Clov and Gods’illa. 9:00 p.m. $12.</p>",
"icon": "music"
},
"geometry": {
"type": "Point",
"coordinates": [-77.031706, 38.914581]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>A Little Night Music</strong><p>The Arlington Players' production of Stephen Sondheim's <em>A Little Night Music</em> comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.</p>",
"icon": "music"
},
"geometry": {
"type": "Point",
"coordinates": [-77.020945, 38.878241]
}
}, {
"type": "Feature",
"properties": {
"description": "<strong>Truckeroo</strong><p>Truckeroo brings dozens of food trucks, live music, and games to half and M Street SE (across from Navy Yard Metro Station) today from 11:00 a.m. to 11:00 p.m.</p>",
"icon": "music"
},
"geometry": {
"type": "Point",
"coordinates": [-77.007481, 38.876516]
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
"icon-allow-overlap": true
}
});
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'places', function (e) {
new mapboxgl.Popup()
.setLngLat(e.features[0].geometry.coordinates)
.setHTML(e.features[0].properties.description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'places', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'places', function () {
map.getCanvas().style.cursor = '';
});
});
</script>
</body>
Related
I am using mapbow with leaflet to display a map.
I want to add a div under each marker (like belo) but i didn't know how to make it.
I looked almost on all the doc of mapbox markers but I did not find it.
There is maybe a trick to add an HTML element for each marker with a specific information that will be shown when use rlaod
This is a screenshot of what am looking for :
And this is what i have :
Here is my code :
L.mapbox.accessToken = 'pk.MY_TOKEN';
var map = L.mapbox.map('map')
.setView([48, 2.5], 5)
.addLayer(L.mapbox.styleLayer('mapbox://styles/meruem92/cla6ktb2n001v16nw5ludpq67'));
var myLayer = L.mapbox.featureLayer().addTo(map);
let template = `
<h1>Yo sekai !</h1>
<img src="images/disney.jpg" alt="" />
`
var geoJson = {
type: 'FeatureCollection',
features: [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.3484063461432183, 48.857478354732855]
},
"properties": {
"tooltip": "totltip 1",
"title": "Paris",
"description": template,
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-3.721208820629982, 40.72384968227116]
},
"properties": {
"tooltip": "totltip 2",
"title": "Mapbox",
"description": "Spain, España",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 3",
"title": "Lincoln Park",
"description": "A northside park that is home to the Lincoln Park Zoo",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.637596, 41.940403],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 4",
"title": "Burnham Park",
"description": "A lakefront park on Chicago's south side",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.603735, 41.829985],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Millennium Park",
"description": "A downtown park known for its art installations and unique architecture",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.622554, 41.882534],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Grant Park",
"description": "A downtown park that is the site of many of Chicago's favorite festivals and events",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.619185, 41.876367],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Humboldt Park",
"description": "A small park on Chicago's northwest side",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.70199, 41.905423],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Douglas Park",
"description": "A small park near in Chicago's North Lawndale neighborhood",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.699329, 41.860092],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Calumet Park",
"description": "A park on the Illinois-Indiana border featuring a historic fieldhouse",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.530221, 41.715515],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Jackson Park",
"description": "A lakeside park that was the site of the 1893 World's Fair",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.580389, 41.783185],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Columbus Park",
"description": "A small park in Chicago's Austin neighborhood",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
},
"geometry": {
"coordinates": [-87.769775, 41.873683],
"type": "Point"
}
}
]
};
// Add custom popup html to each marker.
myLayer.on('layeradd', function(e) {
var marker = e.layer;
// marker.bindTooltip("my tooltip text").openTooltip();
var feature = marker.feature;
var images = feature.properties.images
var slideshowContent = '';
for(var i = 0; i < images.length; i++) {
var img = images[i];
slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
'<img src="' + img[0] + '" />' +
'<div class="caption">' + img[1] + '</div>' +
'</div>';
}
// Create custom popup content
var popupContent =
'<div id="' + feature.properties.id + '" class="popup">' +
'<h2>' + feature.properties.title + '</h2>' +
'<div class="slideshow">' +
slideshowContent +
'</div>' +
'<div class="cycle">' +
'« Previous' +
'Next »' +
'</div>'
'</div>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
minWidth: 320
});
marker.setIcon(L.icon(feature.properties.icon));
for (var i = 0, l = geoJson.features.length; i < l; i++) {
marker.bindTooltip("You clicked marker: " + i).openTooltip();
console.dir(marker._tooltip._content)
}
});
// Add features to the map
myLayer.setGeoJSON(geoJson);
$('#map').on('click', '.popup .cycle a', function() {
var $slideshow = $('.slideshow'),
$newSlide;
if ($(this).hasClass('prev')) {
$newSlide = $slideshow.find('.active').prev();
if ($newSlide.index() < 0) {
$newSlide = $('.image').last();
}
} else {
$newSlide = $slideshow.find('.active').next();
if ($newSlide.index() < 0) {
$newSlide = $('.image').first();
}
}
$slideshow.find('.active').removeClass('active').hide();
$newSlide.addClass('active').show();
return false;
});
body {
background-color: teal;
margin: 0;
}
#map {
height: 100vh;
width: 800px;
margin: auto;
/* margin: 50px auto; */
}
.leaflet-popup-content-wrapper img,
.mapboxgl-popup-content img {
width: 100%;
}
.marker {
background-image: url("images/marker-figma.svg");
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
object-fit: cover;
width: 20px;
height: 20px;
/* border-radius: 50%; */
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: "Open Sans", sans-serif;
}
/* //Popup style */
.popup {
text-align: center;
}
.popup .slideshow .image {
display: none;
}
.popup .slideshow .image.active {
display: block;
}
.popup .slideshow img {
width: 100%;
}
.popup .slideshow .caption {
background: #eee;
padding: 10px;
}
.popup .cycle {
padding: 10px 0 20px;
}
.popup .cycle a.prev {
float: left;
}
.popup .cycle a.next {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<!-- <link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.9.2/dist/leaflet.css"
/> -->
<!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' /> -->
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<title>Map project js</title>
</head>
<body>
<div id="map"></div>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<!-- <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script> -->
<!-- <script src="https://unpkg.com/leaflet#1.9.2/dist/leaflet.js"></script> -->
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<script src="main2.js"></script>
</body>
</html>
I found it :
for (var i = 0; i < tooltip.length; i++) {
marker.bindTooltip(tooltip).openTooltip();
console.dir(tooltip);
}
i added this loop under marker.setIcon
I'm loading an image with the following code:
map.on('load', function () {
map.loadImage('....png', function(error, image) {
if (error) throw error;
map.addImage('b7', image);
map.addLayer({
"id": "b7",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
}
},
"layout": {
"icon-image": "b7",
"icon-size": 0.2
}
});
});
How can i set the visibility to none, at a certain zoom level?
It looks like that you cant use map.setLayoutProperty on an loadImage. In the console, it says: Error: The layer 'b7' does not exist in the map's style and cannot be styled.
Whey i try something like:
map.setLayoutProperty( 'b7', 'visibility', 'none' );
Any ideas?
Two suggestions on how to solve this:
First, make sure your image name and layer name are different. It could be that the function is looking for b7 layer but it finds an image named b7 first (or vice versa). Either way this should be changed as it creates conflicting variables.
Second, if that doesn't work try adding your source separately instead of inside the layer.
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.981906, 41.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
And then add the layer with the source.
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
You can now call the setLayoutProperty on a zoomstart listener. Add a conditional if you want it only at a specific zoom level using map.getZoom(); You need to be setting the visibility for the layer here, not the image.
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})
Snippet is below, let me know if you encounter any problems.
map.on('load', function() {
map.loadImage('myImage.png', function(error, image) {
if (error) throw error;
map.addImage('myImage', image);
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.981906, 40.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
});
});
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})
I am trying to colour each polygon dynamically based on a computation. Is there a way possible using mapbox?
The computation is triggered when a value is selected from the dropdown, then each polygon's colour needs to be updated.
Below is the geojson source that I am adding to the map.
{
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"id": 1,
"type": "Feature",
"properties": {
"title": "Candolim"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[73.68255615234375, 15.72088240269937], [73.707275390625, 15.670643235196232], [73.97232055664062, 15.640229310707543], [73.97232055664062, 15.685187424880764], [73.95721435546875, 15.698408515946419], [73.94760131835938, 15.74071024249738], [73.8885498046875, 15.753927728167556], [73.88717651367188, 15.769787575567598], [73.86245727539062, 15.798860741939269], [73.82675170898438, 15.742032029750966], [73.68255615234375, 15.72088240269937]]]
}
},
{
"id": 2,
"type": "Feature",
"properties": {
"title": "Morjim"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[73.970947265625, 15.640229310707543], [73.70864868164062, 15.666676458207187], [73.73062133789062, 15.60584290961007], [73.76907348632812, 15.496032414238634], [73.79791259765625, 15.45765111021037], [74.17556762695312, 15.653453312049928], [74.11239624023438, 15.650808580175482], [74.08355712890625, 15.627004454829198], [74.03823852539062, 15.620391706641964], [74.02313232421875, 15.60584290961007], [73.99566650390625, 15.609810865724066], [73.98056030273438, 15.623036831528264], [73.970947265625, 15.640229310707543]]]
}
},
{
"id": 3,
"type": "Feature",
"properties": {
"title": "Panaji"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[73.79928588867188, 15.458974721921672], [73.78280639648438, 15.411319377980993], [74.256591796875, 15.257689080778698], [74.29229736328125, 15.277561419418248], [74.33486938476562, 15.292133271452533], [74.31838989257811, 15.326571801420842], [74.32113647460938, 15.37027407332405], [74.2840576171875, 15.391459757417053], [74.27444458007812, 15.420586551727165], [74.27993774414062, 15.441767110328934], [74.24835205078124, 15.485445179478607], [74.27993774414062, 15.534406591252042], [74.25384521484375, 15.566159129772904], [74.26071166992188, 15.613778745064309], [74.24972534179688, 15.625681922266882], [74.24423217773438, 15.665354182093287], [74.2236328125, 15.65609800971696], [74.2071533203125, 15.658742673171389], [74.1961669921875, 15.669320984759295], [74.190673828125, 15.681220930466825], [74.17144775390625, 15.675932151334584], [74.17694091796875, 15.654775665159686], [73.79928588867188, 15.458974721921672]]]
}
}
]
}
}
You can achieve this using setPaintProperty and a "match" expression after the value is selected:
map.setPaintProperty('myLayer', 'fill-color', [
'match',
['get', 'title'],
layer.value, '#fbb03b',
/* other */ '#ccc'
]);
See this jsfiddle.
Is there a way to extrude the height of mapbox Point on the map?
Having the following example:
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [14.422063225409431,50.08273361716846]
},
"properties": {
"height": 12,
"base_height": 10,
"title": "Mapbox DC",
"marker-symbol": "spaceti-maintenance"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [14.421896271941648,50.08259946060207]
},
"properties": {
"height": 12,
"base_height": 10,
"title": "Mapbox SF",
"marker-symbol": "spaceti-maintenance"
}
}]
}
});
map.addLayer({
"id": "markers",
"source": "markers",
//"type": "symbol",
"type":"fill-extrusion",
// "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": {
// See the Mapbox Style Spec for details on property functions
// https://www.mapbox.com/mapbox-gl-style-spec/#types-function
"fill-extrusion-color": "#424242",
"fill-extrusion-height": {
// Get fill-extrusion-height from the source "height" property.
"property": "height",
"type": "identity"
},
"fill-extrusion-base": {
// Get fill-extrusion-base from the source "base_height" property.
"property": "base_height",
"type": "identity"
},
// Make extrusions slightly opaque for see through indoor walls.
"fill-extrusion-opacity": 0.90
}
});
am I able to use both layout and paint properties of the layer assuming that I want to have marker with custom icon + extrusion height? I am building indoor navigation with multiple floor, that is the reason.
It's not possible at this time to extrude points, however, you can convert these to (small) circles and extrude them based on your values. Looks like some similar requests for point cloud support is here:
https://github.com/mapbox/mapbox-gl-js/issues/3450 so you may be able to follow the progress should it makes its way into new releases.
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?
The GeoJSON layer type of Mapbox GL JS follows the GeoJSON specification, which requires that coordinates be in longitude, latitude order. Your examples have them reversed. Flipping them shows the markers, which have the correct icons.
"geometry": {
"type": "Point",
"coordinates": [-0.12, 51.52]
}