My create-реагировать-приложение использует Reaction-leaflet для создания Map компонента с OSM плитками. Карта показывает правильно, когда я запускаю код локально, либо npm start , либо npm run build; служить построить . Однако при развертывании сборки на Netlify или bitbucket.io карта отображается серым цветом.
Карта создается следующим образом:
<Map center={position}
zoom={13}
ref={this.mapRef}>
<TileLayer
attribution='&copy <a href="http:osm.org/copyright">OpenStreetMap</a> contributors'
url="https:{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
{........}
</Map>
Сначала я попытался решить проблему, выполнив .invalidateSize () для элемента Map, но это не помогло.
Затем с помощью Chrome Developer Tools Я заметил, что URL-адреса верны, когда код запускается локально:
https://b.tile.openstreetmap.org/13/4663/2370.png
, но неправильно при развертывании:
https://xyz.bitbucket.io/b.tile.openstreetmap.org/13/4663/2370.png
Как я могу это исправить?