[Map Providers] get custom styled maps

[eduzal]

Hello

trying to find out how to get custom styled maps from different map providers,, like google or mapbox. the only custom map option is no longer available, OpenStreetMap.CloudmakerProvider

tks

[tillnagel]

You'd need to create your own provider. Check out e.g. https://github.com/tillnagel/unfolding/blob/master/src/de/fhpotsdam/unfolding/providers/OpenStreetMap.java for an example.

[eduzal]

i kind of created my CustomMapBoxProvider method, just don't know how to implement it. i've replaced the .java files in the src library folder, but it's still no good. i really don't know how to recompile the src file and make it work.

public static class CustomMapBoxProvider extends MapBoxProvider {
        private String api_key;
        private String style_id;

        public CustomMapBoxProvider(String _api_key, String _style_id) {
            api_key = _api_key;
            style_id = _style_id;
        }

        public String[] getTileUrls(Coordinate coordinate) {
            int zoom = (int) coordinate.zoom;
            int col = (int) coordinate.column;
            int row = (int) coordinate.row;

            String url = urlTemplate.replace("{z}", "" + zoom);
            url = url.replace("{x}", "" + col);
            url = url.replace("{y}", "" + row);

            String url = "https://api.mapbox.com/" + style_id +"/tiles/256/"+  getZoomString(coordinate) +"@2x?access_token="+ api_key;

            return new String[] { url };
        }

    }

tks

[tillnagel]

Do you use Processing or a Java IDE?

[tillnagel]

If you simply want to use your custom Mapbox style map, you can do the following:

/**
 * Custom map provider.
 */

import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
import de.fhpotsdam.unfolding.providers.*;

UnfoldingMap map;

void setup() {
  size(800, 600, P2D);

  // NB: You need to replace all UPPERCASE with your own
  map = new UnfoldingMap(this, new MapBox.CustomMapBoxProvider(
    "https://api.mapbox.com/styles/v1/USERNAME/MAPID/tiles/256/{z}/{x}/{y}?access_token=ACCESS_TOKEN"));

  map.zoomAndPanTo(10, new Location(52.5f, 13.4f));
  MapUtils.createDefaultEventDispatcher(this, map);
}

void draw() {
  map.draw();
}

You need to replace all UPPERCASE with your own. In Mapbox Studio go to Share & Develop > Production > Third Party > select CARTO in the dropdown and copy that URL into the Processing sketch above.

[eduzal]

awesome, thanks.

[eduzal]