I'm trying to filter what features get plotted to the map based on the users email that logs in to the site. So far, I've tried multiple options and keep getting stumped. Here's the code I have currently. Please help.
Here's the error: Uncaught TypeError: Cannot read property '_leaflet_id' of undefined at Object.stamp (leaflet.js:6) at e.addLayer (leaflet.js:6) at e._addLayers (leaflet.js:6) at e.initialize (leaflet.js:6) at new e (leaflet.js:6) at Object.o.map (leaflet.js:6) at app.js:810
var userEmail = $("#email").val();
if (userEmail.includes("fibertel")) {
var featureLayer = L.geoJson(null, {
filter: function(feature, layer) {
if (feature.properties.contractor === "FiberTel") return true;
},
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]
})
);
}
}
}
});
} else if
Related
Im triying to change image marker when user click on a specific one.
the problem here, is when i click on a market img changes, but when i click out side or onother market, nothing happens. (Screen shor below)
Please check here
This if my JS :
var LeafIcon = L.Icon.extend({
options: {
iconSize: [38, 95],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76],
},
});
var greenIcon = new LeafIcon({
iconUrl: project.path.base + "images/map/marker-in.png",
}),
redIcon = new LeafIcon({
iconUrl: project.path.base + "images/map/marker-active.png",
});
var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon })
.on("click", (e, j) => {
e.target.setIcon(redIcon);
console.log("target", e.target)
})
.addTo(map)
.bindPopup($popin.innerHTML);
Remeber the last selection and reset that marker
var greenIcon = new LeafIcon({
iconUrl: project.path.base + "images/map/marker-in.png",
}),
redIcon = new LeafIcon({
iconUrl: project.path.base + "images/map/marker-active.png",
});
var lastMarker;
var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon })
.on("click", (e, j) => {
if(lastMarker){
lastMarker.setIcon(greenIcon);
}
e.target.setIcon(redIcon);
console.log("target", e.target)
lastMarker = e.target;
})
.addTo(map)
.bindPopup($popin.innerHTML);
A different way is to set and reset the marker always when the popup is opend / closed:
var testmarker = L.marker([data.lat, data.lng], { icon: greenIcon })
.on("popupopen", (e) => {
e.target.setIcon(redIcon);
})
.on("popupclose", (e) => {
e.target.setIcon(greenIcon);
})
.addTo(map)
.bindPopup($popin.innerHTML);
I tried to apply pointTolayer in my Leaflet Map it but it still throws the classic icons. There is an error in the Code.
$.getJSON("https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",function(data){
var baseline_person = L.icon({
iconUrl: 'baseline_person.png',
iconSize: [18,18]
});
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data, {
pointTolayer: function(feture, latlng){
return L.marker(latlng,{icon: baseline_person});
}
}).addTo(map);
});
Your L.geoJson should be L.geoJSON and pointTolayer should be pointToLayer respectively.
And then define iconSize and iconAnchor as L.icon params
const customMarker = new L.icon({
iconUrl: "marker.png",
iconSize: [32, 32],
iconAnchor: [10, 41],
});
axios
.get(
"https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson"
)
.then(response => {
L.geoJSON(response.data, {
pointToLayer: (feature, latlng) => {
return L.marker(latlng, { icon: customMarker });
}
}).addTo(map);
});
Demo
I'm using Leaflet, leaflet.geo.csv and leaflet-sidebar to build a map. Map works and shows me markers but only 25 of 200. Not the 25 first but randomly among the 200. And it is always the same ones that appear.
I can't show you my csv (sensitive data) but I have checked it many times, clean it and I think it is fine. My console is empty.
This is a sample of my code :
var map = L.map('map');
var affaires = L.geoCsv(null, {
onEachFeature: function (feature, layer) {
var popup = '';
for (var key in feature.properties) {
var title = affaires.getPropertyTitle(key);
popup += '<p class="title">'+title+'</b><p class="info">'+feature.properties[key]+'</p>';
}
layer.on('click', function () {
sidebar.hide();
sidebar.show();
sidebar.setContent(popup);
});
},
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon:L.icon({
iconUrl: 'marker.png',
shadowUrl: 'shadow.png',
iconSize: [25,38],
shadowSize: [41, 41],
shadowAnchor: [13, 21]
})
});
},
firstLineTitles: true,
fieldSeparator: ','
});
$.ajax ({
type:'GET',
dataType:'text',
url:'mydata.csv',
error: function() {
alert('Pas de données');
},
success: function(csv) {
var markers = new L.Marker();
affaires.addData(csv);
map.addLayer(affaires);
map.fitBounds(affaires.getBounds());
console.log(affaires);
}
});
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap © CartoDB | © lamontagne.fr - Julien Jégo',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
var sidebar = L.control.sidebar('sidebar', {
closeButton: true,
position: 'left'
});
map.addControl(sidebar); ...
A screenshot of my map :
Any suggestion ?
Thanks
I want to draw a map with few routes drawn on it.
I want to have a dropbox with numbers 1,..,n
when an item in the dropbox is chosen, the corresponding route is highlighted on the map.
I have started using "leaflet".
why doesn't my resetStyle() return the lines to their original style?
here is my code:
document.onload = loadMap();
function loadMap() {
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors,CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiZW==========yJ9.3HqHQ4BMRvSPaYe8ToA7YQ'
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
var myLines = [{
"type": "LineString",
"properties": {
"id": "1"
}
"coordinates": [
[-100, 40],
[-105, 45],
[-110, 55]
]
}, {
"type": "LineString",
"properties": {
"id": "2"
}
"coordinates": [
[-105, 40],
[-110, 45],
[-115, 55]
]
}];
var myLayer = L.geoJson().addTo(map);
myLayer.addData(myLines);
geojson = L.geoJson(myLines, {
onEachFeature: onEachFeature
}).addTo(map);
}
function highlightFeature(e) {
var layer = e.target;
layer
layer.setStyle({
weight: 25,
color: '#ff3300',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
layer.setStyle({
weight: 5,
color: '#0000ff',
dashArray: '',
fillOpacity: 0.7
});
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
// click: zoomToFeature
});
}
$('select[name="dropdown"]').change(function() {
var item = $(this).val();
alert("call the do something function on option " + item);
//how to make the chosen line highlighted ??
});
The resetStyle method of L.GeoJSON reset the given layer's style back to the style defined when initializing the L.GeoJSON layer:
Resets the given vector layer's style to the original GeoJSON style, useful for resetting style after hover events.
http://leafletjs.com/reference.html#geojson-resetstyle
Code example:
var geojsonLayer = new L.GeoJSON(geojson, {
style: function () {
return {
color: 'red'
}
},
onEachFeature: function (feature, layer) {
layer.on('mouseover', function () {
this.setStyle({
color: 'green'
});
});
layer.on('mouseout', function () {
geojsonLayer.resetStyle(this);
});
}
}).addTo(map);
Working example on Plunker: http://plnkr.co/edit/iriGMBYiFRizeXizMF06?p=preview
I am trying to add a custom marker picture but it keeps giving me the standard blue marker.
Here's my custom marker definition:
var aMarker = {
lat:location.lat,
lng:location.lng,
message: location.name,
// focus: true,
draggable: false,
getMessageScope: function() { return $scope; },
message: '<button class="icon-left ion-information-circled" ng-click=""></button> '+location.name,
compileMessage: true,
'icon': {
'type': "awesomeMarker", // i use awesomeMarker for font awesome
'icon': spotMarkerIcon, // a variable for my icon
}
};
var spotMarkerIcon = L.icon({
iconUrl: './images/SpotMarker.png'
});
angular.extend($scope,{
defaults: {
tileLayer: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
maxZoom: 16,
zoomControlPosition: 'topright',
path: {
weight: 10,
color: '#800000',
opacity: 1
}
}
});
angular.extend($scope,{
markers : new Array()
});
$scope.markers.push(aMarker);
Have you tried to define the dimensions of the icon like this:
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
EDIT: Here is a working example: http://jsfiddle.net/beLxbfep/