CODEWITHSUNDEEP
javascripthtmlesri
Toronto23
Toronto23

Reputation: 319

Using Esri ocean basemap in html and javascript code?

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>

Upvotes: 1

Views: 473

Answers (1)

ghybs
ghybs

Reputation: 53270

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

Upvotes: 2

Related Questions