Why?Did you see this site? http://leafletjs.com/
Do you like the sample, and now, how to implement? There are a great different between Google Maps because LeaFlet use OSM (Open Street Maps) and now is time to create your own server.
"If it's just for your own use, that should be fine, but if you are writing an application for many people to use (with many people needing to download tiles), then that might put too much load on the project's servers and it would probably be better to make your own tiles.
Anyone can do this, using free software, and there are various how-to guides explaining how to do it, like the one at Serving Tiles | switch2osm . Basically you download the OSM database itself, and render your own tiles (in whatever style you like) on your own computer. You can license your map tiles however you like (you can even charge money for them), so long as you display the OSM copyright message, which is a license requirement of using the database."
just little hack ...ignore all this and download this docker...
This is not a GUIDE, but is SANDBOX with all good steps to generate your first Map.
Python 2.x https://www.python.org/downloads/
GIS Server http://postgis.net/
drop table planet_osm_ways;
drop table planet_osm_roads;
drop table planet_osm_rels;
drop table planet_osm_polygon;
drop table planet_osm_point;
drop table planet_osm_nodes;
drop table planet_osm_line;
SELECT ST_AsBinary("way") AS geom,"railway" FROM (select way,highway,
case when tunnel in ('yes','true','1') then 'yes'::text else tunnel end as tunnel,
case when railway='preserved' and service in ('spur','siding','yard') then 'INT-preserved-ssy'::text else railway end as railway
where highway is not null
or (railway is not null and railway!='preserved' and (service is null or service not in ('spur','siding','yard')))
order by z_order
) as roads WHERE "way" && ST_SetSRID('BOX3D(66653.08866467369 6665920.362693647,69099.07356979932 6668366.347598774)'::box3d, 900913)
where aeroway in ('airport','aerodrome','helipad')
or barrier in ('bollard','gate','lift_gate','block')
or highway in ('mini_roundabout','gate')
or man_made in ('lighthouse','power_wind','windmill','mast')
or (power='generator' and ("generator:source"='wind' or power_source='wind'))
or "natural" in ('peak','volcano','spring','tree','cave_entrance')
These tables hold the data which Mapnik uses for rendering:
planet_osm_line: contains all imported ways
planet_osm_point: contains all imported nodes with tags
planet_osm_polygon: contains all imported polygons. Relations seem to be resolved for that.
planet_osm_roads: contains a subset of `planet_osm_line` suitable for rendering at low zoom levels. `planet_osm_line` contains too many elements to render on overview maps. Selection is based on certain tags being set
Notice that relations are not imported directly. Ways which are members of relations are imported in a special manner (see description for planet_osm_line), but there is no easy way to establish a relationship between a relation and its members, or to get tags associated with a relation (unless they have ways as members).
a) Download all fonts and storage on /gis/fonts/DejaVuSans*.*
python -c "import mapnik;print mapnik.fontscollectionpath"
b) Download symbols on /mapnik-v2.2.0/symbols/aerodrome.p.16.png*.*
c)wget --no-check-certificate https://download.geofabrik.de/south-america/suriname-latest.osm.pbf
osm2pgsql -c -d osm -U postgres -H localhost -S default.style suriname-latest.osm.pbf
Teste with QGIS - http://www.qgis.org/en/site/
A little bit about the osm.xml. This file contains all the styling rules for generating the tiles and serves as a template for building your final styling .xml. It defines the icons to use, how to draw the lines and so forth. If you are not happy with the default mapnik styling and want to highlight certain features differently, you can manually edit this xml file and resave it under say osm_custom.xml before you start to build you run the generate_xml.py and use that where we are using osm.xml.
import mapnik2 as mapnik
import sys, os
Zoom level 0: 256 px
Zoom level 1: 512 px
Zoom level 2: 1024 px
Zoom level 3: 2048 px
Zoom level 4: 4096 px
Zoom level 5: 8192 px
Zoom level 6: 16384 px
g) python vim generate_tiles.py
Choose the Bounds: https://www.openstreetmap.org/export#map=5/54.521/-2.197
Are you lost? Try other refers.
nonimatim demo: https://nominatim.openstreetmap.org/
gdal_translate -of JPEG -out size 16384 16384 eso1119a.jpg eso.jpg
gdal_translate -of JPEG -out size «target witdth» «target height» «source file» «target file»
gdal2tiles.py -p raster -z 0-6 -w none saopaulo.png