Using Esri ocean basemap in html and javascript code?

Question

I know that I can add OpenStreetMap or Google Maps as basemaps in a web page. However, I am looking for a basemap that enhances the oceans. Is it possible to add an Esri ocean basemap to my html and javascript code? If so, where could I find the code?

EDIT: I have worked up some code. The map doesn't show up when I open it. What is wrong with my code?

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
    <script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
</head>

<body>
<div id="map" style="width: 1330px; height: 630px"></div>

<script>
        var map = L.map('map').setView([54.296500, -2.209221], 5);
        L.esri.basemapLayer('Oceans').addTo(map);

        var popup = L.popup();

</script>
</body>
</html>

Answer 1

You would do it very similarly to your (HTML + JS) map that would have used OSM or Google Maps.

The idea is to use Leaflet mapping library , then load the correct tile source (ESRI Oceans in your case).

You can follow the example directly on ESRI-Leaflet plugin: http://esri.github.io/esri-leaflet/examples/showing-a-basemap.html

The list of available ESRI basemaps is there: http://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html

Note that there are Terms of Use for using ESRI basemaps: https://github.com//Esri/esri-leaflet/wiki/FAQ#what-are-the-terms-of-use-for-esri-map-tiles

Using Esri ocean basemap in html and javascript code?

Question

1 answers

solution1
1 2015-12-28 19:25:23

Using Esri ocean basemap in html and javascript code?

Question

1 answers

solution1 1 2015-12-28 19:25:23

solution1
1 2015-12-28 19:25:23