Моя цель — создать карту «до» и «после», которая показывает ряд координатных маркеров на карте «после».
Когда код выполняется, я вижу это сообщение об ошибке в консоли: Style is not done loading
Конечная цель — увидеть курсор, который позволит пользователям проводить по горизонтали и видеть, как карты меняются (с до на после).
Вот мой код до сих пор, любая помощь будет иметь большое значение!
$(document).ready(function() {
var request_one = $.ajax({
url: "https://geohack-framework-gbhojraj.c9users.io/ny",
dataType: 'json'
})
var request_two = $.ajax({
url: "https://geohack-framework-gbhojraj.c9users.io/man",
dataType: 'json'
});
$.when(request_one, request_two).done(function(response_one, response_two) {
console.log(response_one, response_two);
//create map of ny state
var nyGeo = response_one[0];
var manGeo = response_two[0];
(function() {
mapboxgl.accessToken = 'pk.eyJ1IjoiamdhcmNlcyIsImEiOiJjaXY4amM0ZHQwMDlqMnlzOWk2MnVocjNzIn0.Pos1M9ZQgxMGnQ_H-bV7dA';
//manhattan map
var manCenter = manGeo.features[0].geometry.coordinates[0][0][0];
console.log('man center is', manCenter);
var beforeMap = new mapboxgl.Map({
container: 'before',
style: 'mapbox://styles/mapbox/light-v9',
center: manCenter,
zoom: 5
});
console.log('man geo is ', manGeo);
//ny state map
var nyCenter = nyGeo.features[0].geometry.coordinates[0][0];
console.log('the ny center is ', nyCenter);
var afterMap = new mapboxgl.Map({
container: 'after',
style: 'mapbox://styles/mapbox/dark-v9',
center: nyCenter,
zoom: 9
});
console.log('ny geo homie', nyGeo);
afterMap.on('load', function() {
afterMap.addSource("points", {
"type": "geojson",
"data": nyGeo
})
});
afterMap.addLayer({
"id": "points",
"type": "symbol",
"source": "points",
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
var map = new mapboxgl.Compare(beforeMap, afterMap, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});
}());
})
});