Adding administrative layer to Oceans basemap using JavaScript

EninnaLuli1 · ‎12-28-2015

I have the following map in my html page. It has an Oceans basemap. I was wondering how I can add administrative layer (countries only) to show on the map?

Would an Esri basemap be compatible with Geoserver layers that I have created?

<!DOCTYPE html>
<html>
  <head>
     <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>


    <!-- Load Esri Leaflet locally, after cloning this repository -->
    <script src="http://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.5/esri-leaflet.js"></script>


    <style>
      html, body,  #map {
        width : 100%;
        height : 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([54.296500, -2.209221], 5);


      L.esri.basemapLayer("Oceans").addTo(map);


      var parks = L.esri.featureLayer({
        url: "http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Portland_Parks/FeatureServer/0",
        style: function () {
          return { color: "#70ca49", weight: 2 };
        }
      }).addTo(map);


      var popupTemplate = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>";


      parks.bindPopup(function(feature){
        return L.Util.template(popupTemplate, feature.properties)
      });
    </script>
  </body>
</html>

JohnGravois · ‎12-28-2015

all of the layer types made accessible from our esri-leaflet plugins are compatible with all of the leaflet layers included in the core library and those made available via other plugins.

as an alternative, it'd also be really straightforward to load a hosted esri service based on world countries

L.esri.featureLayer({
    url: "//services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0"
  }).addTo(map);

View solution in original post

EninnaLuli1 · ‎12-28-2015

I can't seem to edit the original question. Here is my code:

<!DOCTYPE html>

<html>

<head>

<style>

html, body, #map {

width : 100%;

height : 100%;

}

</style>

</head>

<body>

var map = L.map('map').setView([54.684137, -2.245634], 5);

L.esri.basemapLayer("Oceans").addTo(map);

</script>

</body>

</html>

JohnGravois · ‎12-28-2015

all of the layer types made accessible from our esri-leaflet plugins are compatible with all of the leaflet layers included in the core library and those made available via other plugins.

as an alternative, it'd also be really straightforward to load a hosted esri service based on world countries

L.esri.featureLayer({
    url: "//services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0"
  }).addTo(map);

EninnaLuli1 · ‎12-28-2015

I added the world countries service in the code but the countries do not show up.

I added it after the Ocean basemap code.

JohnGravois · ‎12-28-2015

i'm not sure what to tell you, they are drawing for me here.

EninnaLuli1 · ‎12-28-2015

I saw your example. Is there another type of service that defines the names of the countries? Your example also shows the borders of the countries with a thick outline (I am not very fond of it). Is there a service that looks like ArcGIS Online map?

JohnGravois · ‎12-28-2015

please review our documentation and samples and let me know if you have any specific questions.