Skip to content

Commit

Permalink
Refactor TheLeafletMap.vue to add nodes layer and handle node click e…
Browse files Browse the repository at this point in the history
…vent
  • Loading branch information
devincowan committed Apr 25, 2024
1 parent 4b4cc54 commit e1dea7e
Showing 1 changed file with 39 additions and 39 deletions.
78 changes: 39 additions & 39 deletions frontend/src/components/TheLeafletMap.vue
Original file line number Diff line number Diff line change
Expand Up @@ -176,40 +176,40 @@ onMounted(() => {
});
// add nodes layer to map
// url = 'https://arcgis.cuahsi.org/arcgis/services/SWOT/world_SWORD_nodes_mercator/MapServer/WMSServer?'
// let sword_nodes = L.tileLayer.wms(url, {
// layers: 0,
// transparent: 'true',
// format: 'image/png',
// minZoom: 12,
// maxZoom: 13,
// }).addTo(leaflet);
// url = 'https://arcgis.cuahsi.org/arcgis/rest/services/SWOT/world_SWORD_nodes_mercator/FeatureServer/0'
// const nodesFeatures = esriLeaflet.featureLayer({
// url: url,
// simplifyFactor: 0.35,
// precision: 5,
// minZoom: 13,
// maxZoom: 18,
// }).addTo(leaflet);
// nodesFeatures.on("click", function (e) {
// const popup = L.popup();
// const content = `
// <h3>${e.layer.feature.properties.river_name}</h3>
// <h4>Node ID: ${e.layer.feature.properties.node_id}</h4>
// <p>
// <ul>
// <li>SWORD Width: ${e.layer.feature.properties.width}</li>
// <li>SWORD WSE: ${e.layer.feature.properties.wse}</li>
// <li>SWORD Sinuosity: ${e.layer.feature.properties.sinuosity}</li>
// <li>SWOT Dist_out: ${e.layer.feature.properties.dist_out}</li>
// </ul>
// </p>
// `;
// popup.setLatLng(e.latlng).setContent(content).openOn(leaflet);
// });
url = 'https://arcgis.cuahsi.org/arcgis/services/SWOT/world_SWORD_nodes_mercator/MapServer/WMSServer?'
let sword_nodes = L.tileLayer.wms(url, {
layers: 0,
transparent: 'true',
format: 'image/png',
minZoom: 12,
maxZoom: 13,
})
url = 'https://arcgis.cuahsi.org/arcgis/rest/services/SWOT/world_SWORD_nodes_mercator/FeatureServer/0'
const nodesFeatures = esriLeaflet.featureLayer({
url: url,
simplifyFactor: 0.35,
precision: 5,
minZoom: 13,
maxZoom: 18,
})
nodesFeatures.on("click", function (e) {
const popup = L.popup();
const content = `
<h3>${e.layer.feature.properties.river_name}</h3>
<h4>Node ID: ${e.layer.feature.properties.node_id}</h4>
<p>
<ul>
<li>SWORD Width: ${e.layer.feature.properties.width}</li>
<li>SWORD WSE: ${e.layer.feature.properties.wse}</li>
<li>SWORD Sinuosity: ${e.layer.feature.properties.sinuosity}</li>
<li>SWOT Dist_out: ${e.layer.feature.properties.dist_out}</li>
</ul>
</p>
`;
popup.setLatLng(e.latlng).setContent(content).openOn(leaflet);
});
// // add USGS gage layer to map
// url = 'http://arcgis.cuahsi.org/arcgis/services/NHD/usgs_gages/MapServer/WmsServer?';
Expand All @@ -225,12 +225,12 @@ onMounted(() => {
// layer toggling
let mixed = {
// "USGS Gages": gages,
"Lakes": lakes,
"Lakes Features": lakesFeatures,
"SWORD Reaches": reaches,
"Reaches Features": reachesFeatures,
// "Lakes": lakes,
"Lakes": lakesFeatures,
// "SWORD Reaches": reaches,
"Reaches": reachesFeatures,
// "SWORD Nodes": sword_nodes,
// "Nodes Features": nodesFeatures,
"Nodes": nodesFeatures,
};
// /*
Expand Down

0 comments on commit e1dea7e

Please sign in to comment.