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) {},
});
Related
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
})
.........
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...
I have a feature layer pull from geoJson and then syncing a table. I'm trying to make it when I zoom in on eachFeature, it filters the table to those features. Below is my script that is not working. I'm getting the error at 'if (map.getBounds().contains(layer.getBounds()))' Can I get some help?
var featureLayer = L.geoJson(null, {
filter: function(feature, layer) {
return feature.geometry.coordinates[0] !== 0 && feature.geometry.coordinates[1] !== 0;
},
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
title: feature.properties["status_title_github"],
riseOnHover: true,
icon: L.icon({
iconUrl: "assets/pictures/markers/cb0d0c.png",
iconSize: [30, 40],
iconAnchor: [15, 32]
})
});
},
onEachFeature: function (feature, layer) {
if (feature.properties) {
layer.on({
click: function (e) {
identifyFeature(L.stamp(layer));
highlightLayer.clearLayers();
highlightLayer.addData(featureLayer.getLayer(L.stamp(layer)).toGeoJSON());
},
mouseover: function (e) {
if (config.hoverProperty) {
$(".info-control").html(feature.properties[config.hoverProperty]);
$(".info-control").show();
}
},
mouseout: function (e) {
$(".info-control").hide();
}
});
if (feature.properties["marker-color"]) {
layer.setIcon(
L.icon({
iconUrl: "assets/pictures/markers/" + feature.properties["marker-color"].replace("#",'').toLowerCase() + ".png",
iconSize: [30, 40],
iconAnchor: [15, 32]
})
);
legendItems[feature.properties.Status] = feature.properties["marker-color"];
}
}
}
});
function syncTable() {
tableFeatures = [];
featureLayer.eachLayer(function (layer) {
layer.feature.properties.leaflet_stamp = L.stamp(layer);
if (map.hasLayer(featureLayer)) {
if (map.getBounds().contains(layer.getBounds())) {
tableFeatures.push(layer.feature.properties);
}
}
});
$("#table").bootstrapTable("load", JSON.parse(JSON.stringify(tableFeatures)));
var featureCount = $("#table").bootstrapTable("getData").length;
if (featureCount == 1) {
$("#feature-count").html($("#table").bootstrapTable("getData").length + " visible feature");
} else {
$("#feature-count").html($("#table").bootstrapTable("getData").length + " visible features");
}
}
Most probably you are trying to getBounds on a marker.
You understand that point features do not cover any area, therefore there should be no reason to try retrieving their "bounds".
Before testing if your map viewport contains the layer bounds, check whether it is a Marker or not, i.e. a point type feature
layer instanceof L.Marker
Or:
getLatLng in layer
Or since your layers come from GeoJSON data and are built through L.geoJSON factory:
layer.feature.geometry.type === "Point"
Then you can check if that layer is visible in your current map view port in a similar way:
map.getBounds().contains(layer.getLatLng())
BTW for other (i.e. non point type) geometries, I think you would probably prefer checking if their bounds intersects the map view port, rather than is completely contained within.
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]);
}
}
There are numerous references to leaflet.label working fine with GeoJSON points, but I've yet to find one example.
Here's what i've tried so far:
//Add labels layer
var labelStyle = {
color: '#CCC',
opacity: 1
};
var labelMarkerOptions = {
opacity: 0,
fillOpacity: 0
};
var labelLayer = L.geoJson(labels, {
pointToLayer: function (feature, latlng) {
return L.Marker(latlng, labelMarkerOptions);
},
onEachFeature: function (feature, layer) {
layer.bindLabel(feature.properties.Name, {noHide:true});
}
});
labelLayer.eachLayer(function(l) {l.showLabel();});
map.addLayer(labelLayer);
layerControl.addOverlay(labelLayer, 'Site Labels');
This adds a layer of my points, but with the default larkers, and no labels. Thanks for any help you can provide.
If you want to show only the label, return L.circleMarker instead of L.Marker:
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, labelMarkerOptions);
},
If you need L.Marker for some other reason, bind the label directly to marker:
pointToLayer: function (feature, latlng) {
return L.Marker(latlng, labelMarkerOptions).bindLabel(feature.properties.Name, {noHide:true});
},