phpvms/resources/js/maps/base_map.js

const leaflet = require('leaflet');

export default (opts) => {

  opts = Object.assign({
    render_elem: 'map',
    center: [29.98139, -95.33374],
    zoom: 5,
    maxZoom: 10,
    layers: [],
    set_marker: false,
  }, opts);

  let feature_groups = [];
  /*var openaip_airspace_labels = new leaflet.TileLayer.WMS(
      "http://{s}.tile.maps.openaip.net/geowebcache/service/wms", {
          maxZoom: 14,
          minZoom: 12,
          layers: 'openaip_approved_airspaces_labels',
          tileSize: 1024,
          detectRetina: true,
          subdomains: '12',
          format: 'image/png',
          transparent: true
      });

  openaip_airspace_labels.addTo(map);*/

  const opencyclemap_phys_osm = new leaflet.TileLayer(
    'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
      maxZoom: 14,
      minZoom: 4,
      format: 'image/png',
      transparent: true
    })

  feature_groups.push(opencyclemap_phys_osm)

  /*const openaip_cached_basemap = new leaflet.TileLayer("http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png", {
      maxZoom: 14,
      minZoom: 4,
      tms: true,
      detectRetina: true,
      subdomains: '12',
      format: 'image/png',
      transparent: true
  });

  feature_groups.push(openaip_cached_basemap);
  */

  const openaip_basemap_phys_osm = leaflet.featureGroup(feature_groups)

  let map = leaflet.map('map', {
    layers: [openaip_basemap_phys_osm],
    center: opts.center,
    zoom: opts.zoom,
    scrollWheelZoom: false,
  })

  const attrib = leaflet.control.attribution({position: 'bottomleft'})
  attrib.addAttribution('<a href="https://www.thunderforest.com" target="_blank" style="">Thunderforest</a>')
  attrib.addAttribution('<a href="https://www.openaip.net" target="_blank" style="">openAIP</a>')
  attrib.addAttribution('<a href="https://www.openstreetmap.org/copyright" target="_blank" style="">OpenStreetMap</a> contributors')
  attrib.addAttribution('<a href="https://www.openweathermap.org" target="_blank" style="">OpenWeatherMap</a>')

  attrib.addTo(map)

  return map
};