diff --git a/app/static/app/js/classes/Basemaps.js b/app/static/app/js/classes/Basemaps.js new file mode 100644 index 00000000..7dd32594 --- /dev/null +++ b/app/static/app/js/classes/Basemaps.js @@ -0,0 +1,27 @@ +export default [ + { + attribution: "Map data: © Google Maps", + subdomains: ["mt0", "mt1", "mt2", "mt3"], + maxZoom: 21, + minZoom: 0, + label: "Google Maps Hybrid", + url: "//{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}" + }, + { + attribution: + "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community", + maxZoom: 21, + minZoom: 0, + label: "ESRI Satellite", + url: + "//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}" + }, + { + attribution: + '© OpenStreetMap', + maxZoom: 21, + minZoom: 0, + label: "OSM Mapnik", + url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" + } +]; diff --git a/app/static/app/js/components/Map.jsx b/app/static/app/js/components/Map.jsx index 0592301d..4f2a73b3 100644 --- a/app/static/app/js/components/Map.jsx +++ b/app/static/app/js/components/Map.jsx @@ -14,6 +14,7 @@ import ShareButton from './ShareButton'; import AssetDownloads from '../classes/AssetDownloads'; import PropTypes from 'prop-types'; import PluginsAPI from '../classes/plugins/API'; +import Basemaps from '../classes/Basemaps'; import update from 'immutability-helper'; class Map extends React.Component { @@ -194,27 +195,20 @@ class Map extends React.Component { }).addTo(this.map); if (showBackground) { - this.basemaps = { - "Google Maps Hybrid": L.tileLayer('//{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', { - attribution: 'Map data: © Google Maps', - subdomains: ['mt0','mt1','mt2','mt3'], - maxZoom: 21, - minZoom: 0, - label: 'Google Maps Hybrid' - }).addTo(this.map), - "ESRI Satellite": L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { - attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community', - maxZoom: 21, - minZoom: 0, - label: 'ESRI Satellite' // optional label used for tooltip - }), - "OSM Mapnik": L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap', - maxZoom: 21, - minZoom: 0, - label: 'OSM Mapnik' // optional label used for tooltip - }) - }; + this.basemaps = Basemaps.map((src, idx) => { + const { url, ...props } = src; + const layer = L.tileLayer(url, props); + + if (idx === 0) { + layer.addTo(this.map); + } + + return [props.label, layer]; + }).reduce((acc, [k, v]) => { + acc[k] = v; + + return acc; + }); } this.autolayers = Leaflet.control.autolayers({