search

cmv / cmv-app

CMV - The Configurable Map Viewer - A community supported open source mapping framework built with the Esri JavaScript API and the Dojo Toolkit
https://demo.cmv.io/
MIT License
325 stars 278 forks source link

Basemap Stamen water color some body try that??? #359

Closed GilbertLasnier closed 9 years ago

GilbertLasnier commented 9 years ago

idea how to do that? http://blogs.esri.com/esri/arcgis/2013/04/01/using-stamen-and-mapbox-tilesets-as-basemaps-in-arcgis-com/ http://jonahsmaps.tumblr.com/post/63650958094/customized-basemaps-and-layers-in-arcgis-online or directly with http://maps.stamen.com/#toner/12/37.7706/-122.3782

    <title>tile.stamen.com: Google Maps</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB2rm0G-ZWIf8PTrv8Ni9h63YAwNT22tnQ&sensor=false"></script>
    <script type="text/javascript" src="../js/tile.stamen.js?v1.3.0"></script>
    <script type="text/javascript">
        function initialize() {
            var options = {
              center: new google.maps.LatLng(37.7, -122.4),
              zoom: 1,
              mapTypeId: "Toner",
              mapTypeControlOptions: {
                  mapTypeIds: ["Toner", "Terrain", "Watercolor"]
              }
            };
            var map = new google.maps.Map(document.getElementById("map"), options);
            map.mapTypes.set("Toner", new google.maps.StamenMapType("toner"));
            map.mapTypes.set("Terrain", new google.maps.StamenMapType("terrain"));
            map.mapTypes.set("Watercolor", new google.maps.StamenMapType("watercolor"));
        }
    </script>
    <style type="text/css">
        #map {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body onload="initialize()">
    <div id="map">
    </div>
</body>

Example with google API

http://maps.stamen.com/test/google.html

tmcgee commented 9 years ago

You should be able to use these Stamen map tiles pretty easily. The approach would be very similar to the Google maps in issue #235 using the url scheme in the first article you linked to.

There are many, many base map options available using this same approach. I'll just leave it at that...

GilbertLasnier commented 9 years ago

Ok I try that way, take. a look on all the basemap i put in the 235 but i dont try the stamen style with the google approch

timdine commented 9 years ago

Stamen and Mapbox as basemaps:

stamenToner: {
            title: 'Toner (maps.stamen.com)',
            basemap: new Basemap({
                id: 'stamenToner',
                layers: [new BasemapLayer({
                    url: "http://${subDomain}.stamen.com/toner/${level}/${col}/${row}.png",
                    copyright: "maps.stamen.com, 2015",
                    id: "stamenToner",
                    subDomains: ["tile"],
                    type:"WebTiledLayer"
                    })]
            })
    },
    stamenTerrain: {
            title: 'Terrain (maps.stamen.com)',
            basemap: new Basemap({
                id: 'stamenTerrain',
                layers: [new BasemapLayer({
                    url: "http://${subDomain}.stamen.com/terrain/${level}/${col}/${row}.png",
                    copyright: "maps.stamen.com, 2015",
                    id: "stamenTerrain",
                    subDomains: ["tile"],
                    type:"WebTiledLayer"
                    })]
            })
    },
    stamenWatercolor: {
            title: 'Watercolor (maps.stamen.com)',
            basemap: new Basemap({
                id: 'stamenWatercolor',
                layers: [new BasemapLayer({
                    url: "http://${subDomain}.stamen.com/watercolor/${level}/${col}/${row}.png",
                    copyright: "maps.stamen.com, 2015",
                    id: "stamenWatercolor",
                    subDomains: ["tile"],
                    type:"WebTiledLayer"
                    })]
            })
    },
    mapboxPirates: {
            title: 'Pirates (mapbox)',
            basemap: new Basemap({
                id: 'mapboxPirates',
                layers: [new BasemapLayer({
                    url: "http://${subDomain}.tiles.mapbox.com/v3/aj.Sketchy2/${level}/${col}/${row}.png",
                    copyright: "mapbox, 2015",
                    id: "mapboxPirates",
                    subDomains: ["a","b","c","d"],
                    type:"WebTiledLayer"
                    })]
            })
    },
    mapboxStreets: {
            title: 'Streets (mapbox)',
            basemap: new Basemap({
                id: 'mapboxStreets',
                layers: [new BasemapLayer({
                    url: "http://${subDomain}.tiles.mapbox.com/v3/examples.map-vyofok3q/${level}/${col}/${row}.png",
                    copyright: "mapbox, 2015",
                    id: "mapboxStreets",
                    subDomains: ["a","b","c","d"],
                    type:"WebTiledLayer"
                    })]
            })
    }
GilbertLasnier commented 9 years ago

You are a champion, wunderfull, I will put your new base Map in my services.... By the way I WILL START TO COLLABORATE. FOR AVIATION BASE MAP FOR ESRI. Also. I have a request for the drag and drop function with the KML It s will be an essentiel function for the ICAO- ESRI Conflictzones project, I know it's not your widget it's Brian but your are able to help him... Many thanks again for that very good interface...

Envoyé de mon iPad

Le 2015-03-27 à 15:35, timdine notifications@github.com<mailto:notifications@github.com> a écrit :

Stamen and Mapbox as basemaps:

stamenToner: { title: 'Toner (maps.stamen.comhttp://maps.stamen.com)', basemap: new Basemap({ id: 'stamenToner', layers: [new BasemapLayer({ url: "http://${subDomain}.stamen.com/toner/${level}/${col}/${row}.png", copyright: "maps.stamen.comhttp://maps.stamen.com, 2015", id: "stamenToner", subDomains: ["tile"], type:"WebTiledLayer" })] }) }, stamenTerrain: { title: 'Terrain (maps.stamen.comhttp://maps.stamen.com)', basemap: new Basemap({ id: 'stamenTerrain', layers: [new BasemapLayer({ url: "http://${subDomain}.stamen.com/terrain/${level}/${col}/${row}.png", copyright: "maps.stamen.comhttp://maps.stamen.com, 2015", id: "stamenTerrain", subDomains: ["tile"], type:"WebTiledLayer" })] }) }, stamenWatercolor: { title: 'Watercolor (maps.stamen.comhttp://maps.stamen.com)', basemap: new Basemap({ id: 'stamenWatercolor', layers: [new BasemapLayer({ url: "http://${subDomain}.stamen.com/watercolor/${level}/${col}/${row}.png", copyright: "maps.stamen.comhttp://maps.stamen.com, 2015", id: "stamenWatercolor", subDomains: ["tile"], type:"WebTiledLayer" })] }) }, mapboxPirates: { title: 'Pirates (mapbox)', basemap: new Basemap({ id: 'mapboxPirates', layers: [new BasemapLayer({ url: "http://${subDomain}.tiles.mapbox.com/v3/aj.Sketchy2/${level}/${col}/${row}.png", copyright: "mapbox, 2015", id: "mapboxPirates", subDomains: ["a","b","c","d"], type:"WebTiledLayer" })] }) }, mapboxStreets: { title: 'Streets (mapbox)', basemap: new Basemap({ id: 'mapboxStreets', layers: [new BasemapLayer({ url: "http://${subDomain}.tiles.mapbox.com/v3/examples.map-vyofok3q/${level}/${col}/${row}.png", copyright: "mapbox, 2015", id: "mapboxStreets", subDomains: ["a","b","c","d"], type:"WebTiledLayer" })] }) }

— Reply to this email directly or view it on GitHubhttps://github.com/cmv/cmv-app/issues/359#issuecomment-87067271.

GilbertLasnier commented 9 years ago

Many thanks to you Timdine i make many other base map like you teach me, I have problem with Map quest...is in the list bellow http://{subDomain}.mqcdn.com/tiles/1.0.0/vx/map/{level}/{col}/{row}.png because the subDomains="{MQ_SUBDOMAINS}" and I don't know how to rewrite that like you??? and also Bing map is missing, I read the other issue about bring the Bing map for a new Base map and i am not sure if its a success? MapQuest doesn't work all the other one are OK, Many thanks to you... CloudmadePale: { title: 'Cloudmade Pale Dawn', basemap: new Basemap({ id: 'CloudmadePale', layers: [new BasemapLayer({

                        url: "http://{subDomain}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/998/256/{level}/{col}/{row}.png",
                        copyright: "Cloudmade Pale Dawn, 2015",
                        id: "CloudmadePale",
                        subDomains: ["a","b","c"],
                        type:"WebTiledLayer"
                        })]
                })

        },
        OpenCyclemap: {
                title: 'OpenCyclemap',
                basemap: new Basemap({
                    id: 'OpenCyclemap',
                    layers: [new BasemapLayer({

                        url: "http://{subDomain}.tile.opencyclemap.org/cycle/{level}/{col}/{row}.png",
                        copyright: "Cloudmade Pale Dawn, 2015",
                        id: "OpenCyclemap",
                        subDomains: ["a","b","c"],
                        type:"WebTiledLayer"
                        })]
                })
        },
        CloudmadeMidnight: {
                title: 'Cloudmade Midnight Commander',
                basemap: new Basemap({
                    id: 'CloudmadeMidnight',
                    layers: [new BasemapLayer({

                        url: "http://{subDomain}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/999/256/{level}/{col}/{row}.png",
                        copyright: "Cloudmade Midnight Commander",
                        id: "CloudmadeMidnight",
                        subDomains: ["a","b","c"],
                        type:"WebTiledLayer"
                        })]
                })

        },
        AppleOSM: {
                title: 'Apple OSM',
                basemap: new Basemap({
                    id: 'AppleOSM',
                    layers: [new BasemapLayer({

                        url: "http://gsp2.apple.com/tile?api=1&style=slideshow&layers=default&lang=en_GB&z={level}&x={col}&y={row}&v=9",
                        copyright: "Apple OSM",
                        id: "AppleOSM",

                        type:"WebTiledLayer"
                        })]
                })
        },
        MapQuest: {
                title: 'MapQuest',
                basemap: new Basemap({
                    id: 'MapQuest',
                    layers: [new BasemapLayer({

                        url: "http://{subDomain}.mqcdn.com/tiles/1.0.0/vx/map/{level}/{col}/{row}.png",
                        copyright: "MapQuest",
                        id: "MapQuest",
                        subDomains: ["MQ_SUBDOMAINS"],
                        type:"WebTiledLayer"
                        })]
                })
        },
tmcgee commented 9 years ago

@GilbertLasnier: From the MapQuest developer documentation, the subdomains should be:

subDomains: ['otile1','otile2','otile3','otile4']
GilbertLasnier commented 9 years ago

Thanks I try THAT tomorow your very fast...

Envoyé de mon iPad

Le 2015-03-30 à 14:41, Tim McGee notifications@github.com<mailto:notifications@github.com> a écrit :

@GilbertLasnierhttps://github.com/GilbertLasnier: From the MapQuest developer documentationhttp://developer.mapquest.com/web/products/open/map, the subdomains should be:

subDomains: ['otile1','otile2','otile3','otile4']

— Reply to this email directly or view it on GitHubhttps://github.com/cmv/cmv-app/issues/359#issuecomment-87785814.

GilbertLasnier commented 9 years ago

Its work perfection merci!

Envoyé de mon iPad

Le 2015-03-30 à 14:41, Tim McGee notifications@github.com<mailto:notifications@github.com> a écrit :

@GilbertLasnierhttps://github.com/GilbertLasnier: From the MapQuest developer documentationhttp://developer.mapquest.com/web/products/open/map, the subdomains should be:

subDomains: ['otile1','otile2','otile3','otile4']

— Reply to this email directly or view it on GitHubhttps://github.com/cmv/cmv-app/issues/359#issuecomment-87785814.