topic Re: Adding administrative layer to Oceans basemap using JavaScript in Open Source Mapping Libraries Ques.

Adding administrative layer to Oceans basemap using JavaScript

EninnaLuli1 — Mon, 28 Aug 2023 13:30:52 GMT

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>

Re: Adding administrative layer to Oceans basemap using JavaScript

EninnaLuli1 — Mon, 28 Dec 2015 21:21:46 GMT

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>

Re: Adding administrative layer to Oceans basemap using JavaScript

JohnGravois — Sun, 12 Dec 2021 08:46:59 GMT

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);

Re: Adding administrative layer to Oceans basemap using JavaScript

EninnaLuli1 — Tue, 29 Dec 2015 01:22:20 GMT

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

I added it after the Ocean basemap code.

Re: Adding administrative layer to Oceans basemap using JavaScript

JohnGravois — Tue, 29 Dec 2015 01:26:45 GMT

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

Re: Adding administrative layer to Oceans basemap using JavaScript

EninnaLuli1 — Tue, 29 Dec 2015 02:15:20 GMT

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?

Re: Adding administrative layer to Oceans basemap using JavaScript

JohnGravois — Tue, 29 Dec 2015 05:35:33 GMT

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