Use generic XYZ tiles, remove Mapbox specific code/docs (#87)

README.md

@@ -46,7 +46,6 @@ Please read our [Contribution Guide](./CONTRIBUTING.md) and check our [Issues Pa
 * `SERVER_ROOT` - points to the API base address
 * `XXXX_EXT` - points to the respective JSONs of the data, for events, sources, and associations
 * `API_DATA` - S3 file address that can be downloaded or integrated into external apps/visualizations
-* `MAPBOX_TOKEN` - used to load the custom styles
 * `DATE_FMT` and `TIME_FMT` - how to consume the events' date/time from the API
 * `store.app.map` - configures the initial map view and the UX limits
 * `store.app.cluster` - configures how clusters/bubbles are grouped into larger clusters, larger `radius` means bigger cluster bubbles

config.js

@@ -8,8 +8,6 @@ const config = {
   SOURCES_EXT: "/timemap/sources.json",
   ASSOCIATIONS_EXT: "/timemap/associations.json",
   API_DATA: "https://bellingcat-embeds.ams3.cdn.digitaloceanspaces.com/production/ukr/timemap/api.json",
-  MAPBOX_TOKEN:
-    "pk.eyJ1IjoiYmVsbGluZ2NhdC1tYXBib3giLCJhIjoiY2tleW0wbWliMDA1cTJ5bzdkbTRraHgwZSJ9.GJQkjPzj8554VhR5SPsfJg",
   // MEDIA_EXT: "/api/media",
   DATE_FMT: "M/D/YYYY",
   TIME_FMT: "HH:mm",
@@ -140,9 +138,9 @@ const config = {
         eventRadius: 9,
       },
       tiles: {
-        current: "bellingcat-mapbox/cl0qnou2y003m15s8ieuyhgsy",
-        default: "bellingcat-mapbox/cl0qnou2y003m15s8ieuyhgsy",
-        satellite: "bellingcat-mapbox/cl1win2vp003914pdhateva6p"
+        current: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
+        default: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
+        satellite: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
       },
     },
     features: {

docs/configuration.md

@@ -17,11 +17,10 @@ The URLs for these endpoints, as well as other configurable settings in your tim
 | FILTER_TREE_EXT | Endpoint for filters, concatenated with SERVER_ROOT | String | Yes |
 | SITES_EXT | Endpoint for sites, concatenated with SERVER_ROOT | String | Yes |
 | MAP_ANCHOR | Geographic coordinates for original map anchor | Array of numbers | No |
-| MAPBOX_TOKEN | Access token for Mapbox satellite imagery | String | No |
 | features.USE_ASSOCIATIONS | Enable / Disable filters | boolean | No |
 | features.USE_SITES | Enable / Disable sites | boolean | No |
 
-In this configuration file you'll need to add your Mapbox token (see [here for more info](https://www.mapbox.com/help/define-access-token/)). Additionally, you'll need to replace the required endpoints by functioning ones. Finally, you'll want to initialize your application set in `MAP_ANCHOR`, as a (lat, long) pair, which determines the specific location at which the application will center itself on start.
+In this configuration file you'll need to replace the required endpoints with functioning ones. Additionally, you'll want to initialize your application set in `MAP_ANCHOR`, as a (lat, long) pair, which determines the specific location at which the application will center itself on start.
 
 ### Data requirements
 

docs/mapbox.md

@@ -1,38 +0,0 @@
-
-# Timemap and custom Mapbox maps
-
-You can use satellite images and maps from [https://www.mapbox.com/](https://www.mapbox.com/) to customise the map in Timemap. 
-
-Sign up for an account at [https://www.mapbox.com/](https://www.mapbox.com/) and use Mapbox's studio to create a custom map. To use the map you need to configure Timemap with the following: 
-
-## Token
-
-To access your Mapbox account Timemap needs an access token that you create under your Mapbox account. 
-
-Sign in to Mapbox and then navigate to: 
-
-Account > Access Tokens 
-
-* Create a Token - add a token and optionally restrict it to the url of your timemap instance.
-* Add it to Timemap - copy the token and then add it to Timemap's `config.js` at the top level:
-
- ```
-  MAPBOX_TOKEN: 'mapbox_token',
- ```
-
-Timemap can now access your account but you need to associate any maps you want to use with that account using Mapbox Studio. Once you have done that you can then reference the Mapbox Map id.
-
-## Mapbox Map Id
-
-To reference a map you have created in Mapbox Studio you need the map's id which is available under 'share' > 
-
-* Style URL (which looks like this: `mapbox://styles/your-mapbox-account-name/x5678-map-id`)
-
-Now go back to `config.js` and under the UI settings add (don't copy the 'mapbox://styles/' bit): 
-
-```
-   ui: {
-      tiles: 'your-mapbox-account-name/x5678-map-id',
-``` 
-
-If you restart your time map instance you should now see the Mapbox map.

index.html

@@ -5,7 +5,6 @@
   <meta charset="utf-8">
   <title>Civilian Harm in Ukraine Timemap - Bellingcat</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css">
   
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

public/index.html

@@ -4,7 +4,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Civilian Harm in Ukraine</title>
-    <link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css" />
     <meta name="Description" CONTENT="This map plots out and highlights incidents that have resulted in potential civilian impact or harm since Russia began its invasion of Ukraine. The incidents detailed have been collected by Bellingcat researchers. Included in the map are instances where civilian areas and infrastructure have been damaged or destroyed, where the presence of civilian injuries are visible and/or there is the presence of immobile civilian bodies. Collection for the incidences contained in this map began on February 24, 2022. Users can explore incidents by date and location. We intend this to be a living project that will continue to be updated as long as the conflict persists. For more detailed information about the entries included in this map, please refer to our methodology and explainer article.">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
     <script defer data-domain="ukraine.bellingcat.com" src="https://plausible.io/js/script.js"></script>

src/components/space/carto/Map.jsx

@@ -31,11 +31,6 @@ import {
   calcClusterSize,
 } from "../../../common/utilities";
 
-// NB: important constants for map, TODO: make statics
-// Note: Base map is OpenStreetMaps by default; can choose another base map
-const supportedMapboxMap = ["streets", "satellite"];
-const defaultToken = "your_token";
-
 class Map extends Component {
   constructor() {
     super();
@@ -126,22 +121,6 @@ class Map extends Component {
     }
   }
 
-  getTileUrl(tile) {
-    if (
-      supportedMapboxMap.indexOf(this.props.ui.tiles) !== -1 &&
-      config.MAPBOX_TOKEN &&
-      config.MAPBOX_TOKEN !== defaultToken
-    ) {
-      return `http://a.tiles.mapbox.com/v4/mapbox.${tile}/{z}/{x}/{y}@2x.png?access_token=${config.MAPBOX_TOKEN}`;
-    } else if (config.MAPBOX_TOKEN && config.MAPBOX_TOKEN !== defaultToken) {
-      return `https://api.mapbox.com/styles/v1/${tile}/tiles/256/{z}/{x}/{y}@2x?access_token=${config.MAPBOX_TOKEN}`;
-      // `http://a.tiles.mapbox.com/styles/v1/${this.props.ui.tiles}/tiles/{z}/{x}/{y}?access_token=${config.MAPBOX_TOKEN}`
-    } else {
-      return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-      // "https://api.maptiler.com/maps/bright/256/{z}/{x}/{y}.png?key="
-    }
-  }
-
   /**
    * Initialize the base tile layer based on the ui state
    */
@@ -150,7 +129,7 @@ class Map extends Component {
       return;
     }
 
-    const url = this.getTileUrl(this.props.ui.tile);
+    const url = this.props.ui.tile;
     /**
      * If a tile layer already exists, we update its url. Otherwise, we create it and add it to the map.
      */
@@ -175,7 +154,7 @@ class Map extends Component {
       .setMaxBounds(mapConfig.maxBounds);
     // This assumes your map is the constant 'map'
     map.attributionControl.addAttribution(
-      `<a href="http://mapbox.com/about/maps" class='mapbox-logo' target="_blank">Mapbox</a>© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>`
+      `Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community`
     );
 
     // Initialize supercluster index