We Keep Coding

How to use a geojson file with javascript in order to create polygones with leaflet?

I am trying to create a map with the limitations of the departments as polygons with leaflet. I have the geojson file on my computer. For that, I intend to use the polygon function of leaflet as follows;
var polygon = L.polygon(departementsmetropole.geojson).addTo(map);
</script>
As you can see, I don't know how to use it. My goal is to extract the coordinates of the files in order to put them in the function. The file being the fronteers of the departments, I can't add them manually because each department has around 5000 points of coordinates.
I am a beginner so, as you can see above, I tried to put the file directly where it should go by the coordinates, but it didn't work. I also tried to use the get method without success.

In official documentation you will get all necessary.
In addition, you have the following jsfiddle example https://jsfiddle.net/ToniBCN/8nft2yhm/
// center of the map
var center = [55.8, -4.2];
// Create the map
var map = L.map('map').setView(center, 3);
// a GeoJSON multipolygon
var mp = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-3.9, 56],
[-3.9, 55.6],
[-4.6, 55.6],
[-4.6, 56],
[-3.9, 56]
],
[
[-4.42136131224148, 55.9201880414654],
[-4.44608055051929, 55.8994054388937],
[-4.49963890012121, 55.8816929539651],
[-4.44196067747298, 55.8362196009829],
[-4.35269676146979, 55.8045881227693],
[-4.35818992553152, 55.7636605341908],
[-4.22772727906531, 55.7350629547249],
[-4.07391868533672, 55.7582517890959],
[-4.00937400761133, 55.7984131283508],
[-4.04095970096631, 55.868595920571],
[-4.14532981813928, 55.8947855700627],
[-4.27991233765179, 55.9148010288061],
[-4.29776512085243, 55.9586449375958],
[-4.42136131224148, 55.9201880414654]
]
]
},
"properties": {
"name": "MultiPolygon",
"style": {
color: "orange",
opacity: 1,
fillColor: "gray",
fillOpacity: 0.3
}
}
};
var mp2 = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-4.42136131224148, 55.9201880414654],
[-4.44608055051929, 55.8994054388937],
[-4.49963890012121, 55.8816929539651],
[-4.44196067747298, 55.8362196009829],
[-4.35269676146979, 55.8045881227693],
[-4.35818992553152, 55.7636605341908],
[-4.22772727906531, 55.7350629547249],
[-4.07391868533672, 55.7582517890959],
[-4.00937400761133, 55.7984131283508],
[-4.04095970096631, 55.868595920571],
[-4.14532981813928, 55.8947855700627],
[-4.27991233765179, 55.9148010288061],
[-4.29776512085243, 55.9586449375958],
[-4.42136131224148, 55.9201880414654]
]
]
},
"properties": {
"name": "MultiPolygon2",
"style": {
color: "red",
opacity: 1,
fillColor: "green",
fillOpacity: 0.3
}
}
};
new L.GeoJSON(mp, {
style: function(feature) {
return feature.properties.style
}
}).addTo(map);
new L.GeoJSON(mp2, {
style: function(feature) {
return feature.properties.style
}
}).addTo(map);
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);

How can I style polygons with parameters inside the FeatureCollection properties on Leaflet?

I have a GeoJSON file that has both the FeatureCollection and the Feature types inside it. Basically my code is the following (working sample here):
L.geoJSON(myJSON, { style: style }).addTo(mymap);
function style(featureObject) {
return {
fillColor: getColor(featureObject.properties.name),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
function getColor(name) {
return name === "name1" ? "#CF8562" :
name === "name2" ? "#FFEDA0" :
"#000000";
}
And a small sample of the structure of my GeoJSON is the following:
[
{
"type": "FeatureCollection",
"properties": {
"name" : "name1"
},
"features": [
{
"type": "Feature",
"properties": {
"randomParameter" : "text"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-46.6479847244904,
-23.553060554172923
],
[
-46.6479847244904,
-23.553060554172923
],
[
-46.64805562776844,
-23.55318890961171
],
[
-46.64826795788915,
-23.552928264599316
],
[
-46.6479847244904,
-23.553060554172923
]
]
]
}
}]
},
{
"type": "FeatureCollection",
"properties": {
"name" : "name2"
},
"features": [
{
"type": "Feature",
"properties": {
"randomParameter" : "text2"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-46.648050596629034,
-23.55393832474017
],
[
-46.64758222900779,
-23.554141824100373
],
[
-46.64767437978837,
-23.554322319586415
],
[
-46.64814729501603,
-23.55411425749883
],
[
-46.648050596629034,
-23.55393832474017
]
]
]
}
}]
}
]
This code is not going to work properly because it doesn't recognize the featureObject.properties.name value. This value exists only inside the FeatureCollection and not the Feature type in my GeoJSON. So, I'm not capable of coloring the polygons according to the data that I have inside the GeoJSON.
I'd like to edit the style of all elements under a FeatureCollection type. However, when I print the object arriving on the style function, I see that it only sees the elements with the Feature type. I've read answers like this one telling that we can edit the style of the FeatureCollection type but I didn't manage to make it work.
I'd like to solve this problem without having to change my GeoJSON structure or changing the properties inside FeatureCollection to Feature. Is it possible? Can I make the style function change the style of everything under the FeatureCollection type instead of the Feature type in my GeoJSON?

You can first loop through all FeatureCollections and copy the properties to the childs:
https://jsfiddle.net/falkedesign/9yvb46o5/
function copyProps(geojson, props){
var features = L.Util.isArray(geojson) ? geojson : geojson.features,
i, len, feature;
if(props && geojson.properties){
geojson.properties = Object.assign({},props,geojson.properties); // merge properties, if the feature has the same property as the parent, it will not overwritten
}
if (features) {
for (i = 0, len = features.length; i < len; i++) {
feature = features[i];
if (feature.geometries || feature.geometry || feature.features || feature.coordinates) {
copyProps(feature, geojson.properties);
}
}
}
}
copyProps(myJSON);
var layersObj = L.geoJSON(myJSON, { style: style }).addTo(mymap);

Mapbox is not loading on all pages?

Mapbox is being used across the site, however, isn't loading on two specific pages?
There are three maps, all of which display fine on this page. And here is a working example of the page I am looking to replicate elsewhere, only with a different map. However, on this page the map doesn't load?
This is the javascript I'm using, each map has a different var, stroud, gloucester and brimscombe.
mapboxgl.accessToken = 'validtokenhere';
// STROUD
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"message": "Visit our Stroud clinic",
"iconSize": [30, 40]
},
"geometry": {
"type": "Point",
"coordinates": [
-2.248550,
51.741290
]
}
},
]
};
var stroud = new mapboxgl.Map({
container: 'stroud',
style: 'mapbox://styles/mapbox/light-v9',
center: [-2.248550,51.741290],
zoom: 13
});
// disable map zoom when using scroll
stroud.scrollZoom.disable();
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(/assets/img/marker.png)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(stroud);
});
// GLOUCESTER
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"message": "Visit our Gloucester clinic",
"iconSize": [30, 40]
},
"geometry": {
"type": "Point",
"coordinates": [
-2.248140,
51.870560
]
}
},
]
};
var gloucester = new mapboxgl.Map({
container: 'gloucester',
style: 'mapbox://styles/mapbox/light-v9',
center: [-2.248140,51.870560],
zoom: 13
});
// disable map zoom when using scroll
gloucester.scrollZoom.disable();
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(/assets/img/marker.png)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(gloucester);
});
// BRIMSCOMBE
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"message": "Visit our Brimscombe clinic",
"iconSize": [30, 40]
},
"geometry": {
"type": "Point",
"coordinates": [
-2.063020,
51.892550
]
}
},
]
};
var brimscombe = new mapboxgl.Map({
container: 'brimscombe',
style: 'mapbox://styles/mapbox/light-v9',
center: [-2.063020,51.892550],
zoom: 13
});
// disable map zoom when using scroll
brimscombe.scrollZoom.disable();
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(/assets/img/marker.png)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(brimscombe);
});
and then each container is
<section class="location-map-image">
<div id="stroud" class="map" style="width: 100%; height: 263px;"></div>
</section>
obviously the div id changes to match the location I wish to display.
I am expecting to see Gloucester and Brimscombe load like Stroud does?
Console log is showing
Error: Container 'stroud' not found. map.js:337:22
r map.js:337
<anonymous> app-min.js:12508
So it appears that the script gets stuck when it cannot find the div id stroud. What should I be doing when I only want to show gloucester or brimscombe?

TL:DR; There is no HTML element for the map to render in
The error you're seeing is because there is no div tag on this page with the id of stroud or brimscombe, so Mapbox doesn't know where to render the map.
If you go to the stroud clinic page, you'll notice that you get errors for briscombe and gloucester, because neither of those divs exist.
EDIT:
If you want to not see the errors, there are a few different ways you could do it, but I'd do it something like this:
// Checking if the element stroud exists
if (!!document.getElementById('stroud')) {
// If it does, run the stroud code
}
You can repeat that pattern for your other two as well. No need to provide an else unless you want to.

Set filter by partial string in mapbox-gl

My first question here, sorry in advance for any mistake...
I'm developing a mapbox web for my own pleasure, featuring photos taked by myself in a map. Info is loaded in JSON files, with this structure:
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-8.5375900268555,42.881175994873]
},
"properties": {
"title": "Graffiti",
"description": "",
"image": {
"imageSize": [1024, 768], "imageLandscape": 1, "imageUrl": "imgs/gsa_2016_files/20160805173018_OLY_PEP3_P8052307.jpg" },
"icon": {
"iconSize": [96, 73],
"iconUrl": "imgs/gsa_2016_files/thumb_20160805173018_OLY_PEP3_P8052307.jpg"
},
"extended_info": {
"tags": "graffitis,nomada",
"place": "europa,españa,galicia,santiago de compostela"
},
"time": "2016:08:05 17:30:18",
"year": 2016,
"month": 8,
"day": 5
}
}
I work with different JSON files for each map, which are loaded this way:
var map = new mapboxgl.Map({ blah, blah... });
var layerIds = [ '2016' ];
var layerColors = [ 'rgba(255,0,0,1)' ];
function add_sources_to_map()
{
for (var i = 0; i < layerIds.length; i++) {
var id = layerIds[i];
var layerId = layerIdPrefix + id;
var geoJsonFile = 'jsons/'+ id + '.geoJSON';
map.addSource(layerId, { type: 'geojson', data: geoJsonFile });
}
}
Later on I use a function to filter elements by year:
function filterByYear(year) {
var filterFullYear = [ '==', 'year', year];
// Aplica os filtros nas capas
for (var i = 0; i < layerIds.length; i++) {
var id = layerIds[i];
map.setFilter(id, filterFullYear);
}
}
But I would like to do some more filtering, by part of tags or place content. For example, anyone with a "tag" which contains "nomada", or any "place" with "europe". I have tried to do it but failed miserably, although my knowledge of mapbox-gl or even js is limited. Can this be done? Should I change my JSON structure? Can anybody point me to some help?
TIA!

This is not supported in Mapbox-GL-JS. The issue is being tracked here: https://github.com/mapbox/mapbox-gl-js/issues/4698

Mapbox-gl-js directions plugin returns directions only for the last call made in case of simultaneous calls

I am trying to retrieve directions for multiple routes using mapbox-gl-js Directions API plugin (https://github.com/mapbox/mapbox-gl-js).
The following code requests the directions and draws them on Map.
var mapBoxDrawDrivingPath = function(routeArray, day)
{
var colorArray = ['#4286f4' , '#7312bc' , '#11bc2e' , '#80bc11', '#bc2411'];
//var stringDay = day.toString(16);
var rand = Math.floor((Math.random() * 5));
var lineColor = colorArray[rand] ;
console.log("Day : " + day + " " + lineColor);
console.log(routeArray[0]);
var MapBoxDir = new MapboxDirections({accessToken: mapboxgl.accessToken });
map.panTo(routeArray[0]);
MapBoxDir.setOrigin(routeArray[0]);
MapBoxDir.setDestination(routeArray[routeArray.length -1]);
MapBoxDir.on('route', function(e) {
//the following function is altered to return "lng,lat" instead of "lat,lng"
var routeGeometry = polyLineDecode(e.route[0].geometry);
map.addLayer(
{
"id": "route"+day,
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": routeGeometry
//routeGeometry
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": lineColor,
"line-width": 4
}
});
});
}
The above function is called multiple times with different set of coordinates. Since the result of directions is a non-blocking behavior on callback, the function "mapBoxDrawDrivingPath" is called one after the other without waiting for result from previous call.
I assumed it would return respective directions for each enqueued call but it returns the directions of the last inputs in all of its callback returns.
What am I doing wrong here ?