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>
