I added both WFS and WMS layer from GeoServer. I need to have the layer switchers for these layers. But the layers are not visible in layer switchers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Esri Leaflet Geocoder</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link
rel="stylesheet"
href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
/>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet"></script>
<!-- Esri Leaflet Geocoder -->
<link
rel="stylesheet"
href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
/>
<script src="https://unpkg.com/esri-leaflet-geocoder"></script>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"
/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<!-- Make the map fill the entire page -->
<style>
#map {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script>
var map = L.map("map", { drawControl: true }).setView(
[45.5165, -122.6764],
12
);
var mapQuestAttr =
'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — ';
var osmDataAttr =
'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var mopt = {
url: "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg",
options: { attribution: mapQuestAttr + osmDataAttr, subdomains: "1234" }
};
var osm = L.tileLayer(
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{ attribution: osmDataAttr }
);
var mq = L.tileLayer(mopt.url, mopt.options);
osm.addTo(map);
//var baseLayers = {
//"Gould map": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
// subdomains: "1234"
//}),
//'Gao de image': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
// subdomains: "1234"
//}), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
// subdomains: "1234"
//})]),
//'GeoQ Grey base map': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
//};
//L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
//attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
//}).addTo(map);
//var layercontrol = L.control.layers(baseLayers, {}, {
// position: "topleft"
//}).addTo(map)
// create the geocoding control and add it to the map
var searchControl = L.esri.Geocoding.geosearch().addTo(map);
// create an empty layer group to store the results and add it to the map
var results = L.layerGroup().addTo(map);
// listen for the results event and add every result to the map
searchControl.on("results", function(data) {
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
});
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
polygon: false,
marker: false,
circlemarker: false,
rectangle: false,
circle: false
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
drawnItems.addLayer(layer);
});
var rootUrl = "http://localhost:8080/geoserver/ows";
var defaultParameters = {
service: "WFS",
version: "1.0.0",
request: "GetFeature",
typeName: "sf:archsites",
maxFeatures: 200,
outputFormat: "application/json",
format_options: "callback: getJson",
srsName: "EPSG:4326"
};
var parameters = L.Util.extend(defaultParameters);
//console.log(rootUrl + L.Util.getParamString(parameters));
$.ajax({
jsonp: false,
url: rootUrl + L.Util.getParamString(parameters),
dataType: "json",
jsonpCallback: "getJson",
success: handleJson
});
var group = new L.featureGroup().addTo(map);
var geojsonlayer;
function handleJson(data) {
var station = L.tileLayer
.wms(
"http://localhost:8080/geoserver/station/wms?service=WMS&version=1.1.0",
{
layers: "station:station",
format: "image/png",
transparent: true,
attribution: "station"
}
)
.addTo(map);
var sea_intrusion = L.tileLayer
.wms(
"http://localhost:8080/geoserver/sea_intrusion/wms?service=WMS&version=1.1.0",
{
layers: "sea_intrusion:sea_intrusion",
format: "image/png",
transparent: true,
attribution: "sea_intrusion"
}
)
.addTo(map);
// console.log(data);
var geojsonlayer = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
var marker = L.circleMarker(latlng, {
radius: 15,
fillColor: "#008F11",
color: "#008F11",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
//return L.circleMarker(latlng, geojsonMarkerOptions);
//return L.circleMarker(latlng//, geojsonMarkerOptions
//);
//return L.marker(latlng);
marker.bindPopup(
feature.properties.str1 + "<br/>" + feature.properties.cat
);
return marker;
}
}).addTo(group);
map.fitBounds(group.getBounds());
var clusters = L.markerClusterGroup();
clusters.addLayer(group);
map.addLayer(clusters);
}
function getJson(data) {
console.log("callback function fired");
}
var overlays = {
Stations: station,
Salinity: sea_intrusion,
sites: geojsonlayer
};
L.control.layers(overlays).addTo(map);
</script>
</body>
</html>
This is my updated solution.But the layer are not visible in layer control
Esri Leaflet Geocoder
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link
rel="stylesheet"
href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
/>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet"></script>
<!-- Esri Leaflet Geocoder -->
<link
rel="stylesheet"
href="https://unpkg.com/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css"
/>
<script src="https://unpkg.com/esri-leaflet-geocoder"></script>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/MarkerCluster.css"
/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<!-- Make the map fill the entire page -->
<style>
#map {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
var map = L.map("map", { drawControl: true }).setView( [45.5165, -122.6764], 12 );
var mapQuestAttr =
'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> — ';
var osmDataAttr =
'Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
var mopt = {
url: "http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg",
options: { attribution: mapQuestAttr + osmDataAttr, subdomains: "1234" }
};
var osm = L.tileLayer(
"http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{ attribution: osmDataAttr }
);
var mq = L.tileLayer(mopt.url, mopt.options);
osm.addTo(map);
// create the geocoding control and add it to the map
var searchControl = L.esri.Geocoding.geosearch().addTo(map);
// create an empty layer group to store the results and add it to the map
var results = L.layerGroup().addTo(map);
// listen for the results event and add every result to the map
searchControl.on("results", function(data) {
results.clearLayers();
for (var i = data.results.length - 1; i >= 0; i--) {
results.addLayer(L.marker(data.results[i].latlng));
}
});
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
polygon: false,
marker: false,
circlemarker: false,
rectangle: false,
circle: false
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
drawnItems.addLayer(layer);
});
var rootUrl = "http://localhost:8080/geoserver/ows";
var defaultParameters = {
service: "WFS",
version: "1.0.0",
request: "GetFeature",
typeName: "sf:archsites",
maxFeatures: 200,
outputFormat: "application/json",
format_options: "callback: getJson",
srsName: "EPSG:4326"
};
var parameters = L.Util.extend(defaultParameters);
$.ajax({
jsonp: false,
url: rootUrl + L.Util.getParamString(parameters),
dataType: "json",
jsonpCallback: "getJson",
success: handleJson
});
var group = new L.featureGroup();
var geojsonlayer;
var station = L.tileLayer
.wms(
"http://localhost:8080/geoserver/station/wms?service=WMS&version=1.1.0",
{
layers: "station:station",
format: "image/png",
transparent: true,
attribution: "station"
}
)
.addTo(map);
var sea_intrusion = L.tileLayer
.wms(
"http://localhost:8080/geoserver/sea_intrusion/wms?service=WMS&version=1.1.0",
{
layers: "sea_intrusion:sea_intrusion",
format: "image/png",
transparent: true,
attribution: "sea_intrusion"
}
)
.addTo(map);
function handleJson(data) {
geojsonlayer = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
var marker = L.circleMarker(latlng, {
radius: 15,
fillColor: "#008F11",
color: "#008F11",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
marker.bindPopup(
feature.properties.str1 + "<br/>" + feature.properties.cat
);
return marker;
}
}).addTo(group);
map.fitBounds(group.getBounds());
var clusters = L.markerClusterGroup();
clusters.addLayer(group);
map.addLayer(clusters);
}
function getJson(data) {
console.log("callback function fired");
}
var overlays = {
Stations: station,
Salinity: sea_intrusion,
};
L.control.layers(overlays).addTo(map);
</script>