Leaflet l.layergroup not displaying second layer (features) - leaflet

I'm trying to make a map of the Rockies that has multiple layers with different geological features. The first layer, with hot springs, works perfectly well--each spring has a corresponding marker and pop-up that displays the spring's name and state.
The problem comes when I try to add a second layer with a different geological feature (canyons and gorges). I have used the code from the "hot springs" layer, but it isn't getting added to the map, even when I select it from the layer control.
I don't think the problem is the geoJSON file. (The points will display properly on the map when I look at the file where it is stored on GitHub, which is the canyonsURL.)
Here is the code for the part that isn't working:
var canyons = new L.LayerGroup();
d3.json(canyonsURL, function(data) {
createFeatures2(data.features);
});
function createFeatures2(canyonsURL) {
function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.Canyon +
"<hr><p>" + feature.properties.State);
}
function style(feature, layer) {
return {
opacity: 0.5,
radius: 5,
weight: 1,
color: "black",
fillColor: "yellow",
fillOpacity: 0.5
}
}
var canyon = d3.json(canyonsURL, {
pointToLayer: function(_geometry, coordinates) {
return L.circleMarker(coordinates);
},
onEachFeature: onEachFeature,
style: style
}).addTo(canyons);
createMap(canyons)
}
I have tried both with and without the final createMap(canyons). I have tried using identical names for functions (instead of adding the 2) to the end.
I'm sure it's right in front of my eyes and I just can't see it. The same code (obviously pointing to a different URL and with slightly different styling) is working fine for the hot springs. What did I mess up on?
EDIT: This is going to get long; sorry. Here is the createMap function:
function createMap() {
var satellite = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © Openelevationmap contributors, CC-BY-SA, Imagery © Mapbox",
maxZoom: 18,
id: "mapbox.satellite",
accessToken: API_KEY
});
var pirates = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © Openelevationmap contributors, CC-BY-SA, Imagery © Mapbox",
maxZoom: 18,
id: "mapbox.pirates",
accessToken: API_KEY
});
var terrain = L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
attribution: "Map data © Openelevationmap contributors, CC-BY-SA, Imagery © Mapbox",
maxZoom: 18,
id: "mapbox.mapbox-terrain-v2",
accessToken: API_KEY
});
var terrain_rgb = L.tileLayer("https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token={accessToken}", {
attribution: "Map data © Openelevationmap contributors, CC-BY-SA, Imagery © Mapbox",
maxZoom: 18,
id: "mapbox.mapbox-terrain-rgb",
accessToken: API_KEY
});
// Define a baseMaps object to hold our base layers
var baseMaps = {
// "Elevation Map": elevationmap,
"Satellite": satellite,
"Terrain": terrain,
"Treasure": pirates,
"Shadow": terrain_rgb
};
// Create overlay object to hold our overlay layer
var overlayMaps = {
"Hot Springs": springs,
"Canyons": canyons
};
// Create our map, giving it the satellite and hotSprings layers to display on load
var myMap = L.map("map", {
center: [
44.2643, -109.7879
],
zoom: 5,
layers: [satellite, springs]
});
// Create a layer control
// Pass in our baseMaps and overlayMaps
// Add the layer control to the map
L.control.layers(baseMaps, overlayMaps, {
collapsed: true,
position: 'bottomright'
}).addTo(myMap);
}
Here is the code that I used to (successfully) add the hot springs:
// Create layers for layergroup
var springs = new L.LayerGroup();
d3.json(springsURL, function(data) {
// Once we get a response, send the data.features object to the createFeatures function
createFeatures(data.features);
});
function createFeatures(springsURL) {
// Define a function we want to run once for each feature in the features array
// Give each feature a popup with name and state of spring
function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.SpringName +
"<hr><p>" + feature.properties.State);
}
function style(feature, layer) {
return {
opacity: 0.5,
radius: 5,
weight: 1,
color: "black",
fillColor: "red",
fillOpacity: 0.5
}
}
var hotSprings = L.geoJSON(springsURL, {
pointToLayer: function(_geometry, coordinates) {
return L.circleMarker(coordinates);
},
onEachFeature: onEachFeature,
style: style
}).addTo(springs);
// Sending our hotSprings layer to the createMap function
createMap(springs);
}

your function createMap(springs); makes no sense. If you add a parameter to the function then you have to read it out. function createMap() { ... } it should be function createMap(layer) { ... }. But that is not necessary for you.
your script should look like this:
var myMap; //the var should init global so you can call it from everywhere
var springs = L.featureGroup(); //Same as L.layerGroup() but with more options.
var canyons = L.featureGroup();
function createMap(){
//...
myMap = L.map("map", { //<-- without "var"
center: [
44.2643, -109.7879
],
zoom: 5,
layers: [satellite, springs, canyons] //<--- Add canyons
});
//...
}
createMap();
var style1 = function style(feature) {
return {
opacity: 0.5,
radius: 5,
weight: 1,
color: "black",
fillColor: "red",
fillOpacity: 0.5
}
}
var style2 = function style(feature) {
return {
opacity: 0.5,
radius: 5,
weight: 1,
color: "yellow",
fillColor: "red",
fillOpacity: 0.5
}
}
function createFeatures(springsURL,stlyecallback, layer) {
// Define a function we want to run once for each feature in the features array
// Give each feature a popup with name and state of spring
function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.SpringName +
"<hr><p>" + feature.properties.State);
}
var hotSprings = L.geoJSON(springsURL, {
pointToLayer: function(_geometry, coordinates) {
return L.circleMarker(coordinates);
},
onEachFeature: onEachFeature,
style: stlyecallback
}).addTo(layer);
}
d3.json(springsURL, function(data) {
createFeatures(data.features, style1, springs);
});
d3.json(springsURL, function(data) {
createFeatures(data.features, style2, canyons);
});
I hope I have no typo...

Related

How do I get nearby places in leaflet map in json format?

var map = L.map('map').setView([27.7172, 85.3240], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 160,
attribution: '© OpenStreetMap'
}).addTo(map);
var circle = L.circle([27.7172, 85.3240], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
var marker = L.marker([27.7172, 85.3240],
{ alt: 'Kathmandu' }).addTo(map) // "Kyiv" is the accessible name of this marker
.bindPopup('Kathmandu Nepal');

Changing leaflet markers to circleMarkers

I'm trying to Change Leaflet markers to circleMarker on data coming from geoJSON file.
Until now her is how I display data on map:
const geodesic = new L.Geodesic().addTo(map); /* Affiche les ligne géodésiques*/
geodesic.fromGeoJson(waypoints);
function pointFilter(feature) {
if (feature.geometry.type === "Point") return true
}
var points = new L.geoJson(waypoints, {filter: pointFilter}).addTo(map);
My geoJSON file contains LineStrings and Points.
The geodesic lines and standard icon markers are displayed, but I would change them by circleMarker between each lines.
Hope I'm clear enough.
Thanks
Pierre
This is what the code may look like, change it as you see fit.
Here'a a whole example - autocomplete-with-geojson
const geojsonlayer = L.geoJSON(object, {
style: function (feature) {
return {
color: feature.properties.color || "red",
weight: 7,
opacity: 1,
fillOpacity: 0.7,
};
},
pointToLayer: (feature, latlng) => {
if (feature.properties.type === "Point") {
return new L.circleMarker(latlng, {
radius: 20,
});
}
},
onEachFeature: function (feature, layer) {},
});

adding layer on search for leaflet map changes polygon opacity

I have two leaflet maps which are loaded with geojson on the basis of a search button click. This shows some polygons with a style opacity 0.3 so you can see the street names under the polygons.
It works great except that any additional searches and loading of polygons starts to change the opacity of the polygon, making it more solid so you cant read the names of the streets under the polygon.
I try clearing the geojson layer before adding to the map, but the issue persists.
I have created a rough code pen of the issue here:
https://codepen.io/joomkit/pen/xxXgLPJ?editors=1111
Essentially just click the search button to load the layer no need to fill the listener runs a function and gets static data.
I have tried various methods to remove layer. A second click on the search is meant to clear the layer and load a new one. In the example it's just reloading the original data but the opacity is clearly demonstrated.
Main code is also below.
var geoMap2;
var lamap = new L.Map("map2", {
center: new L.LatLng(51.44094723464765, 0.048892332250943187),
// center: new L.LatLng(39.75621,-104.99404),
zoom: 14,
maxZoom: 18
});
var osm2 = L.tileLayer(
"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
{
attribution:
'© OpenStreetMap contributors © CARTO',
subdomains: "abcd",
maxZoom: 18
}
);
lamap.addLayer(osm2);
searchButton.addEventListener("click", function (e) {
let searchQuery = inputSearch.value;
// searchOpenFunding(searchQuery);
setLaMap(data);
});
function setLaMap(data) {
removeLayers();
let geojsonFeatureCollection2 = {
type: "FeatureCollection",
features: setFeatureCollection2(data)
};
geoMap2 = L.geoJSON(geojsonFeatureCollection2, {
style: polyStyleLAMap,
onEachFeature: function myonEachFeatureLaMap(feature, layer) {
layer.myTag = "myGeoJSON";
}
}).addTo(lamap);
lamap.setMaxBounds(lamap.fitBounds(geoMap2.getBounds()));
lamap.setZoom(13);
}
var removeLayers = function () {
lamap.eachLayer(function (layer) {
if (layer.myTag && layer.myTag === "myGeoJSON") {
lamap.removeLayer(layer);
console.log("rem layer from ");
}
});
};
function setFeatureCollection2(data) {
for (const [key, item] of Object.entries(data)) {
// setup lealfet geojson collection from data mapit api is incomplete pe ritem so we build it here
geoJsonFeatures2.push({
type: "Feature",
properties: {
craftentryId: item.id,
areaId: item.mapitAreaId,
lsoacode: item.lsoacode,
localauthority: item.localauthority,
openForFunding: item.openForFunding,
fundableRegion: item.fundableRegion,
title: item.title,
popupContent: ""
},
geometry: item.geojson
});
}
return geoJsonFeatures2;
}
function polyStyleLAMap(feature) {
return {
fillColor: getFillColorLaMap(feature.properties.openForFunding),
weight: 1,
opacity: 1,
color: getBorderColor(feature.properties.openForFunding),
dashArray: "0",
fillOpacity: 0.3
};
}
function getFillColorLaMap(d) {
return d === true ? "#FFFFFF" : d === false ? "#FED976" : "#FED976";
}
function getBorderColor(d) {
return d === true ? "#0e9c12" : d === false ? "#adabab" : "#cccccc";
}
Look here https://codepen.io
The code I modified is:
// 029A, 029C
function setLaMap(data) {
removeLayers();
let geojsonFeatureCollection2 = {
type: "FeatureCollection",
features: setFeatureCollection2(data),
};
console.log(geojsonFeatureCollection2);
const geoMap2 = L.geoJSON(geojsonFeatureCollection2, {
style: polyStyleLAMap,
onEachFeature: function (feature, layer) {
layer.myTag = "myGeoJSON";
},
});
map.addLayer(geoMap2);
map.setMaxBounds(map.fitBounds(geoMap2.getBounds()));
// map.setZoom(13);
}
function removeLayers() {
map.eachLayer((layer) => {
if (layer.myTag && layer.myTag === "myGeoJSON") {
console.log(layer);
map.removeLayer(layer);
}
});
}
You need to keep the geojson layer in a global variable and remove it before over writing with the new layer data.
var geoMap2;
function setLaMap(data){
if(geoMap2) { // if geoMap2 is set remove it
lamap.removeLayer(geoMap2)
}
const geojsonFeatureCollection2 = {
"type": "FeatureCollection",
"features": setFeatureCollection2(data)
}
geoMap2 = L.geoJSON(geojsonFeatureCollection2, {
style: polyStyleLAMap,
onEachFeature: myonEachFeatureLaMap
})
.........

Leaflet.js: click a polygon to remove the the layer and change it to new one

I've been making a Leaflet map for a while and trying to figure out the way to make it so if I click one of the polygon in GeoJSON layer, it will remove the current layer and replace it with another layer.
Likewise, if I click it again, it will remove the new layer and replace it with previous layer.
I've been trying to tinker with different stuff but nothing works. This is one of my recent attempt.
<script type="text/javascript" src="provinces.js"></script>
<script>
var map = L.map('map').setView([-2.5, 119], 5);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap © CartoDB',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
// get color depending on population density value
function getColor(d) {
return d > 5000 ? '#800026' :
d > 2500 ? '#BD0026' :
d > 1000 ? '#E31A1C' :
d > 500 ? '#FC4E2A' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.kode)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#ccc',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function addNewBoundary(e) { // this function doesn't do anything
var newLayerBoundary = new L.geoJson();
newLayerBoundary.addTo(map);
$.ajax({
dataType: "json",
url: "province-details.geojson",
success: function(data) {
$(data.features).each(function(key, data) {
newLayerBoundary.addData(data);
});
}
}).error(function() {});
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: clearLayers // with this it just clears the layers before being clicked
});
}
geojson = L.geoJson(provinces, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
</script>
var layers = [firstLayer,secondLayer]
function switchLayers(){
if(map.haslayer(layers[firstLayer])){
map.addLayer(layers[secondLayer]);
map.removeLayer(layers[firstLayer]);
}else{
if(map.haslayer(layers[secondLayer])){
map.addLayer(layers[firstLayer]);
map.removeLayer(layers[secondLayer]);
}
}

Leaflet: Toggle GeoJSON layers with Checkboxes in custom sidebar

I have a custom sidebar sitting on top of my map. Within the sidebar are checkboxes:
<label><input type="checkbox" name="points" value="addressPoints" /> COUNTY</label>
I would like the map to load with none of the GeoJSON layers pre-loaded and the functionality to toggle a layer on by clicking the checkbox.
Below is the Javascript I am using:
//Create Variable called 'map' and Set Options
var map = L.map('map', {
center: [35.132703, -92.347412], //Faulkner County
zoom: 11,
minZoom: 8,
maxZoom: 18,
keyboard: true,
zoomControl: false,
});
//Add Base Map Tile Layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); //ROADMAP
//L.tileLayer('http://{s}.tiles.mapbox.com/v3/moklick.lh736gg3/{z}/{x}/{y}.png').addTo(map); //SATELLITE
//L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png').addTo(map); //TERRAIN
//L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png').addTo(map); //HEATMAP
//Create Variable for Default Polygon Style
var defaultStyle = {
color: "#3498db",
weight: 2,
opacity: 1,
fillOpacity: 0.4,
fillColor: "#3498db"
};
//Create Variable for Highlighted Polygon Style on Mouseover
var highlightStyle = {
color: "#e74c3c",
weight: 3,
opacity: 1,
fillOpacity: 0.3,
fillColor: "#e74c3c"
};
var onEachFeature = function(feature, layer){
layer.bindPopup("<h4>Voting Precinct:</h4>" + feature.properties.NAME10),
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.NAME10);
};
/*//Add GeoJSON for County Outline
L.geoJson(faulknerCounty, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.popupContent);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.NAME10);
}
}).addTo(map);*/
/*//Add GeoJSON for Voting Precincts
L.geoJson(votingPrecincts, {
style: defaultStyle,
onEachFeature: onEachFeature
}).addTo(map);*/
//Add GeoJSON for JP Districts
L.geoJson(jpDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("<h4>Justice of the Peace District: " + feature.properties.district);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.district);
}
}).addTo(map)
/*//Add GeoJSON for School Districts
L.geoJson(schoolDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("<h4>School District: " + feature.properties.name);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.name);
}
}).addTo(map);*/
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google(),
position: 'topright',
showMarker: false,
retainZoomLevel: false,
}).addTo(map);
Create (but do not .addTo(map)) each geoJSON layer you need...so your init would look likevar schoolDistricts = L.geoJSON(...., then watch for the change event on your checkboxes to add or remove the appropriate layers with map.addLayer(layerToAdd) and map.removeLayer(layerToRemove).