haoliangyu / ngx-leaflet-starter

A soup of Angular and Leaflet
http://haoliangyu.github.io/ngx-leaflet-starter/
MIT License
209 stars 58 forks source link

Is it possible to create a custom map type? #6

Closed Sireini closed 8 years ago

Sireini commented 8 years ago

Is it also possible to create a custom tiled map? It would be great than for sure this is the best !

haoliangyu commented 8 years ago

In the public_src/services/map.service.ts, I declare the base map layers with

this.baseMaps = {
    OpenStreetMap: new L.TileLayer("http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
    }),
    Esri: new L.TileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
      attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
    }),
    CartoDB: new L.TileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
    })
};

You may have noticed that the creation of L.TileLayer is the same as the original L.TileLayer. If you would like to use other custom tile map, just change the url to your own source.

Sireini commented 8 years ago

Do you know how to create custom tiled image from a jpg?

haoliangyu commented 8 years ago

There is many way to display .jpg images with Leaflet. If you would like to generate tiles from a .jpg image, here is an example using python: gdal2tiles-leaflet. I will close this issue as the topic is beyond the concern of the project. If you have any further question, feel free to contact me with haoliang.yu@outlook.com.