How to work with Openstreetmap tiles?

Question

JavaScript

I'm using a map from Openstreetmap, but I only need a certain area (i.e. city). I heard about tiles but I don't know how to work with them. Maybe someone has already encountered and will help with links to examples. I use Leaflet.js to work with the map

Answer 1

I asked myself and found the answer
1) Create a directory where the tile files will be stored (there should be 3 directories main / zoom / i / j.png file)
2) Add a new nginx configuration for the tile server
3) at ( http: // address server/zoom/i-tile/j-tile.png) a tile must be available
for example: gps-location.ru:88/14/10596/5217.png
4) In leflet you do
map = new L.Map('map' );
var osmUrl=' http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png ';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});
map.setView(new L.LatLng(51.3, 0.7),9);
map.addLayer(osm);
You can download all the tiles of the city and make a limit on the city and
zoom, you need to download for each zoom and create separate directories for each zoom
for apache
virtual host with the most common configuration
var map = L.map('map',{ minZoom: 12, maxZoom : 17, zoomControl: false }).setView([54.5365,52.8175], 12);
zoom and location restrictions
https://yadi.sk/d/VhrvkJydWxjfr
script for downloading tiles
L.tileLayer(' http://192.168.0.107:8080/pars/tiles/{z}/{x}/{y} .png ', {
attribution: 'These bicycles are for other drivers ©',
noWrap: true
}).addTo(map);
possible even without a virtual host

Answer 2

You can simply (regardless of the library for maps and tiles) simply keep track of the coordinates of the center of the displayed area and shift the map to the desired boundaries if necessary. If the shift is animated, then the user will not be annoyed.