Я использую Mapbox и хочу чтобы данные geojson брались из внешнего источника?

Использую Mapbox, нужно чтобы данные geojson брались со внешнего источника, вот как это выгляди сейчас:
<style>
	#map-index { 
		position:absolute;
		z-index:-1;
		left:0;
		top:0;
		bottom:0;
		width:100%;
	}
	.marker {
		display: block;
		border: none;
		border-radius: 50%;
		max-width: 40px;
  	height: auto;
		cursor: pointer;
		padding: 0;
	}
</style>

<div id='map-index'></div>
 
<script>
mapboxgl.accessToken = 'YourAccessToken';

var map = new mapboxgl.Map({
container: 'map-index',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-65.017, -16.457],
zoom: 5
});
 
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"iconImage": 'url(https://res.cloudinary.com/lnky-rocket/image/upload/c_thumb,dpr_3.0,h_100,w_100/v1563358704/rvlbxdokciwuobx2qe4e.jpg)'
},
"geometry": {
"type": "Point",
"coordinates": [
-66.324462890625,
-16.024695711685304
]
}
},
{
"type": "Feature",
"properties": {
"iconImage": 'url(https://res.cloudinary.com/lnky-rocket/image/upload/c_thumb,dpr_3.0,h_100,w_100/v1563358704/rvlbxdokciwuobx2qe4e.jpg)'
},
"geometry": {
"type": "Point",
"coordinates": [
-63.29223632812499,
-18.28151823530889
]
}
}
]
};

// 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 = marker.properties.iconImage;
el.style.backgroundSize = '40px 40px';
el.style.width = '40px';
el.style.height = '40px';
 
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
 
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
</script>


Нужно что-то вроде этого чтобы данные брались из внешнего источника
var geojson = {
  data: 'https://gist.githubusercontent.com/ipatovanton/fdc632474dcb331445335d8550b0125d/raw/05d65bf6d688103e0211b2539121cda108ebe5c9/random.geojson';
}
  • Вопрос задан
  • 222 просмотра
Пригласить эксперта
Ответы на вопрос 1
freeExec
@freeExec
Участник OpenStreetMap
Создаёте источник с адресом своего geojson
map.addSource(sourceId, {
                type: "geojson",
                data: 'https://mysite.org/mygejsonfile.geojson'
            });

А затем создаёте слой где источником данных будет этот ваш только что созданный источник.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы