I am using leaflet to plot a series of polylines. For each polyline, I have want a custom pop up which presents an image. I have managed to achieve this functionality for a single polyline and now wish to generate this functionality for a series of polylines, read from a json file.
var map = L.map('map', {scrollWheelZoom:false}).setView([25.198696, 55.269794], 15);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var random_icon = L.icon({
iconUrl: 'https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/256x256/media-shuffle.png',
iconSize: [38, 95], // size of the icon
popupAnchor: [0,-15]
});
var customPopup = "test image<br/><img src='http://i.imgur.com/NpZuKvK.png' alt='maptime logo gif' width='350px'/>";
var customOptions =
{
'maxWidth': '500',
'className' : 'custom'
}
var pointA = new L.LatLng(25.146619, 55.225746);
var pointB = new L.LatLng(25.198696, 55.269794);
var pointList = [pointA,pointB];
L.polyline(pointList,{icon: random_icon,color:'red','weight':10}).bindPopup(customPopup,customOptions).addTo(map);
This presents a polyline which when clicked on, presents the image from imgur.
I have now created a geojson file which I've added here.
How do I got about a.loading this geojson file b. iterating through it and creating the following var's : customPopup with the url from the geojson, the pointList and points from the geojson file and finally render the polyline?
I agree with ghybs, the answer is in the documentation of Leaflet.
First, you need to get the GeoJson content by an Ajax request or whatever you want. Then, simply use L.geoJson options. Here is more or less what you need (it uses JQuery) :
function genPopup(url, name){
return name + '<br/><img src="' + url + '" alt="maptime logo gif" width="350px"/>';
}
$.get('https://gist.github.com/gac55/52ab01944be1e39e154cd2a5709de737', function (data){
var jsondata = $.parseJSON(data);
L.geoJson(jsondata, {
color: 'red',
weight: 10,
onEachFeature: function(feature, layer){
var furl = feature.properties.url;
var fname = feature.properties.name;
layer.bindPopup(
genPopup(furl, fname),
customOptions
);
}
}).addTo(map);
});
Related
I am trying to use leaflet's edit function on polygons that I loaded from my database. When I click on leaflet's edit button I get the error
Cannot read property 'enable' of undefined
This thread describes a similar problem, and user ddproxy said
"Since FeatureGroup extends LayerGroup You can walk through the layers
presented and add them individually to the FeatureGroup used for
Leaflet.draw"
I am confused what he means by "walk through", I thought I was adding a layer group, so i'm not sure what I would be walking through. Does this have to do with the fact that i'm adding the polygons as a geoJSON object? Adding the polygons to the map, binding their popups, and assigning them custom colors works perfectly FYI.
The following is the relevant code:
<script>
window.addEventListener("load", function(event){
//other stuff
loadHazards();
});
//next 6 lines siply add map to page
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
var osmAttrib = '© OpenStreetMap contributors'
var osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib})
var map = new L.Map('map', { center: new L.LatLng(39.255467, -76.711964), zoom: 16 })
osm.addTo(map);
var drawnItems = L.featureGroup().addTo(map);
var Hazards = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map)
},
{
'drawlayer': drawnItems,
"Hazards" : Hazards,
"Tickets": Tickets
},
{
position: 'topleft', collapsed: false
}
).addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: Hazards,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
},
rectangle:false,
circle:false,
circlemarker:false
}
}));
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
</script>
And the loadHazards() function:
function loadHazards(){
$.ajax({
type: 'GET',
url:'/loadPolygonFromDatabase',
success : function(polygons){
polygons = JSON.parse(polygons);
var toAdd = [];
for (i in polygons){
var item = {
"type" : "Feature",
"properties":{
"category":"",
"description":"",
"ID":""
},
"geometry" : {
"type":"Polygon",
"coordinates":[],
}
};
item["geometry"]["coordinates"][0] = polygons[i]["coordinates"];
item["properties"]["category"] = polygons[i]["category"];
item["properties"]["description"] = polygons[i]["description"];
item["properties"]["ID"] = polygons[i]["ID"];
toAdd.push(item);
}
//Add information to popup
var layerGroup = L.geoJSON(toAdd, {
onEachFeature: function (feature, layer) {
layer.bindPopup( '<h1>' + feature.properties.category + '</h1>'
+ '<p>' + feature.properties.description + '</p>');
layer.id = feature.properties.ID;
},
style: function(feature){
switch (feature.properties.category) {
case 'Rabid_Beavers': return {color: "#663326"};
case 'Fire': return {color: "#ff0000"};
case 'Flood': return {color: "#0000ff"};
}
}
}).addTo(Hazards);
}
});
}
Thanks in advance!
As mentioned by #ghybs Leaflet.Draw doesn't support Groups or MultiPolygons. I needed the same functionality so a few years ago I created Leaflet-Geoman (previously named leaflet.pm) which supports holes, MultiPolygons, GeoJSON and LayerGroups:
https://github.com/geoman-io/leaflet-geoman
Hope it helps.
Unfortunately Leaflet.draw plugin does not handle nested Layer Groups (same for Feature Groups / GeoJSON Layer Groups).
That is the meaning of the Leaflet.draw #398 issue you reference: they advise looping through the child layers of your Layer/Feature/GeoJSON Layer Group (e.g. with their eachLayer method). If the child layer is a non-group layer, then add it to your editable Feature Group. If it is another nested group, then loop through its own child layers again.
See the code proposed in that post:
https://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet
var geoJsonGroup = L.geoJson(myGeoJSON);
addNonGroupLayers(geoJsonGroup, drawnItems);
// Would benefit from https://github.com/Leaflet/Leaflet/issues/4461
function addNonGroupLayers(sourceLayer, targetGroup) {
if (sourceLayer instanceof L.LayerGroup) {
sourceLayer.eachLayer(function(layer) {
addNonGroupLayers(layer, targetGroup);
});
} else {
targetGroup.addLayer(sourceLayer);
}
}
In your very case, you can also refactor your code with 2 other solutions:
Instead of building your layerGroup (which is actually a Leaflet GeoJSON Layer Group) first and then add it into your Hazards Feature Group, make the latter a GeoJSON Layer Group from the beginning, and addData for each of your single Features (item):
var Hazards = L.geoJSON(null, yourOptions).addTo(map);
for (i in polygons) {
var item = {
"type" : "Feature",
// etc.
};
// toAdd.push(item);
Hazards.addData(item); // Directly add the GeoJSON Feature object
}
Instead of building a GeoJSON Feature Object (item) and parse it into a Leaflet GeoJSON Layer, you can directly build a Leaflet Polygon and add it into your Hazards Layer/Feature Group:
for (i in polygons) {
var coords = polygons[i]["coordinates"];
var style = getStyle(polygons[i]["category"]);
var popup = ""; // fill it as you wish
// Directly build a Leaflet layer instead of an intermediary GeoJSON Feature
var itemLayer = L.polygon(coords, style).bindPopup(popup);
itemLayer.id = polygons[i]["ID"];
itemLayer.addTo(Hazards);
}
function getStyle(category) {
switch (category) {
case 'Rabid_Beavers': return {color: "#663326"};
case 'Fire': return {color: "#ff0000"};
case 'Flood': return {color: "#0000ff"};
}
}
I am trying to use leaflet's edit function on polygons that I loaded from my database. When I click on leaflet's edit button I get the error
Cannot read property 'enable' of undefined
This thread describes a similar problem, and user ddproxy said
"Since FeatureGroup extends LayerGroup You can walk through the layers
presented and add them individually to the FeatureGroup used for
Leaflet.draw"
I am confused what he means by "walk through", I thought I was adding a layer group, so i'm not sure what I would be walking through. Does this have to do with the fact that i'm adding the polygons as a geoJSON object? Adding the polygons to the map, binding their popups, and assigning them custom colors works perfectly FYI.
The following is the relevant code:
<script>
window.addEventListener("load", function(event){
//other stuff
loadHazards();
});
//next 6 lines siply add map to page
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
var osmAttrib = '© OpenStreetMap contributors'
var osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib})
var map = new L.Map('map', { center: new L.LatLng(39.255467, -76.711964), zoom: 16 })
osm.addTo(map);
var drawnItems = L.featureGroup().addTo(map);
var Hazards = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map)
},
{
'drawlayer': drawnItems,
"Hazards" : Hazards,
"Tickets": Tickets
},
{
position: 'topleft', collapsed: false
}
).addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: Hazards,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
},
rectangle:false,
circle:false,
circlemarker:false
}
}));
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
</script>
And the loadHazards() function:
function loadHazards(){
$.ajax({
type: 'GET',
url:'/loadPolygonFromDatabase',
success : function(polygons){
polygons = JSON.parse(polygons);
var toAdd = [];
for (i in polygons){
var item = {
"type" : "Feature",
"properties":{
"category":"",
"description":"",
"ID":""
},
"geometry" : {
"type":"Polygon",
"coordinates":[],
}
};
item["geometry"]["coordinates"][0] = polygons[i]["coordinates"];
item["properties"]["category"] = polygons[i]["category"];
item["properties"]["description"] = polygons[i]["description"];
item["properties"]["ID"] = polygons[i]["ID"];
toAdd.push(item);
}
//Add information to popup
var layerGroup = L.geoJSON(toAdd, {
onEachFeature: function (feature, layer) {
layer.bindPopup( '<h1>' + feature.properties.category + '</h1>'
+ '<p>' + feature.properties.description + '</p>');
layer.id = feature.properties.ID;
},
style: function(feature){
switch (feature.properties.category) {
case 'Rabid_Beavers': return {color: "#663326"};
case 'Fire': return {color: "#ff0000"};
case 'Flood': return {color: "#0000ff"};
}
}
}).addTo(Hazards);
}
});
}
Thanks in advance!
As mentioned by #ghybs Leaflet.Draw doesn't support Groups or MultiPolygons. I needed the same functionality so a few years ago I created Leaflet-Geoman (previously named leaflet.pm) which supports holes, MultiPolygons, GeoJSON and LayerGroups:
https://github.com/geoman-io/leaflet-geoman
Hope it helps.
Unfortunately Leaflet.draw plugin does not handle nested Layer Groups (same for Feature Groups / GeoJSON Layer Groups).
That is the meaning of the Leaflet.draw #398 issue you reference: they advise looping through the child layers of your Layer/Feature/GeoJSON Layer Group (e.g. with their eachLayer method). If the child layer is a non-group layer, then add it to your editable Feature Group. If it is another nested group, then loop through its own child layers again.
See the code proposed in that post:
https://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet
var geoJsonGroup = L.geoJson(myGeoJSON);
addNonGroupLayers(geoJsonGroup, drawnItems);
// Would benefit from https://github.com/Leaflet/Leaflet/issues/4461
function addNonGroupLayers(sourceLayer, targetGroup) {
if (sourceLayer instanceof L.LayerGroup) {
sourceLayer.eachLayer(function(layer) {
addNonGroupLayers(layer, targetGroup);
});
} else {
targetGroup.addLayer(sourceLayer);
}
}
In your very case, you can also refactor your code with 2 other solutions:
Instead of building your layerGroup (which is actually a Leaflet GeoJSON Layer Group) first and then add it into your Hazards Feature Group, make the latter a GeoJSON Layer Group from the beginning, and addData for each of your single Features (item):
var Hazards = L.geoJSON(null, yourOptions).addTo(map);
for (i in polygons) {
var item = {
"type" : "Feature",
// etc.
};
// toAdd.push(item);
Hazards.addData(item); // Directly add the GeoJSON Feature object
}
Instead of building a GeoJSON Feature Object (item) and parse it into a Leaflet GeoJSON Layer, you can directly build a Leaflet Polygon and add it into your Hazards Layer/Feature Group:
for (i in polygons) {
var coords = polygons[i]["coordinates"];
var style = getStyle(polygons[i]["category"]);
var popup = ""; // fill it as you wish
// Directly build a Leaflet layer instead of an intermediary GeoJSON Feature
var itemLayer = L.polygon(coords, style).bindPopup(popup);
itemLayer.id = polygons[i]["ID"];
itemLayer.addTo(Hazards);
}
function getStyle(category) {
switch (category) {
case 'Rabid_Beavers': return {color: "#663326"};
case 'Fire': return {color: "#ff0000"};
case 'Flood': return {color: "#0000ff"};
}
}
I can't seem to get CircleMarkers to show their associated popups in Leaflet. Here's what I am doing:
var markerGroup;
fetch("<FILE_NAME_REMOVED>").then(function(response){
return response.text();
}).then(function(text){
var lines = text.split("\n");
var markerArray = [];
for (var i=1; i<lines.length; i++) {
var parts = lines[i].split(",");
if (typeof parts[2] !='undefined') {
marker = new L.CircleMarker([parts[3],parts[2]], {
radius: 4,
color: 'red',
opacity: 0.95,
weight: 1.2,
dashArray: "2,3",
fillOpacity: 0.2
}).bindPopup("I am at " + parts[0] + "," + parts[1]);
markerArray.push(marker);
};
}
markerGroup = L.featureGroup(markerArray).addTo(map);
map.fitBounds(markerGroup.getBounds());
}).catch(function(err){
console.log(err);
});
The popups are just not showing up - in fact when I click on the circles the map just zooms in. If I replace L.CircleMarker with just L.Marker though it works fine, but I actually need circles.
I even tried adding an on click function to the markers, still nothing.
Could someone please help? I am using leaflet 1.3.4.
EDIT:
I didn't mention (because I did't think it mattered) that the markers are added last to the map but the map has a geoJson layer as well. I've noticed (by accident) that the popups do show up just fine over the area of the map not covered by the geoJson layer. This is strange to me because the geojson layer is set to back from the beginning:
var datalayer;
$.getJSON("<FILE_NAME_REMOVED>",function(data){
datalayer = L.geoJson(data ,{
onEachFeature: function(feature, featureLayer) {
featureLayer.setStyle({fillColor: 'white'});
featureLayer.setStyle({weight:1});
featureLayer.setStyle({fillOpacity:0.1});
featureLayer.bringToBack();
}
}).addTo(map);
map.fitBounds(datalayer.getBounds());
});
I'm trying to change the default marker for one of my KML layers. I'm using leaflet-omnivore for this.
This is the code I already have. The markers are not changing to the image and the layer control is only displaying the text, even though the img bit is in the code.
Marker Code:
var redIcon = L.icon({
iconUrl: 'icon.png',
iconSize: [20, 24],
iconAnchor: [12, 55],
popupAnchor: [-3, -76]
});
var nissanLayer = omnivore.kml('icons.kml')
.on('ready', function() {
map.fitBounds(customLayer.getBounds());
//change the icons for each point on the map
// After the 'ready' event fires, the GeoJSON contents are accessible
// and you can iterate through layers to bind custom popups.
customLayer.eachLayer(function(layer) {
// See the `.bindPopup` documentation for full details. This
// dataset has a property called `name`: your dataset might not,
// so inspect it and customize to taste.
layer.icon
layer.bindPopup('<img src="icon.png" height="24"><br><h3>'+layer.feature.properties.name+'</h3>');
});
})
.addTo(map);
var marker = new L.Marker(customLayer, {icon:redIcon});
map.addLayer(marker);
You seem to have overlooked the setIcon() method of L.Marker. I'd also check that a L.Layer is in fact a L.Marker before calling any L.Marker functionality, just for code sanity. e.g.:
var redIcon = L.icon({ /* ... */ });
var omnivoreLayer = omnivore.kml('icons.kml')
.on('ready', function() {
omnivoreLayer.eachLayer(function(layer) {
if (layer instanceof L.Marker) {
layer.setIcon(redIcon);
}
});
})
.addTo(map);
However, the Leaflet-Omnivore documentation says that the better way to apply custom styling to an Omnivore layer is to create a L.GeoJSON instance with the desired filters and styling, and then pass that to the Omnivore factory method. I suggest you read the Leaflet tutorial on GeoJSON to become familiar with this.
So instead of relying on a on('ready') event handler (which would change the markers after they are created), this would save a tiny bit of time by creating the markers directly with the desired style:
var omnivoreStyleHelper = L.geoJSON(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: redIcon});
}
});
var omnivoreLayer = omnivore.kml('icons.kml', null, omnivoreStyleHelper);
I haven't used leaflet that much but I did a small project where I set the icons to an image.
var redIcon = L.icon({
iconUrl: 'red-x.png',
iconSize: [25, 25], // size of the icon
iconAnchor: [12, 55], // point of the icon which will correspond to
marker's location
popupAnchor: [-3, -76] // point from which the popup should open
relative to the iconAnchor
});
var marker = new L.Marker(markerLocation, {icon:redIcon});
mymap.addLayer(marker);
Not sure how helpful this is really.
Links got a guide to follow which might be more use https://leafletjs.com/examples/custom-icons/
I need instead of a basic view in leaflet (it's a map of the world), the satellite view, but I still need to be able to switch between them? How does this work, can anyone explain this to me?
Installed modules:
https://www.drupal.org/project/gmap
https://www.drupal.org/project/leaflet_more_maps
Without using any external plugin :
gpxpod.map = new L.Map('map', {
zoomControl: true
});
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttribution = 'Map data © 2013 <a href="http://openstreetmap'+
'.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
var esriAerialUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services'+
'/World_Imagery/MapServer/tile/{z}/{y}/{x}';
var esriAerialAttrib = 'Tiles © Esri — Source: Esri, i-cubed, '+
'USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the'+
' GIS User Community';
var esriAerial = new L.TileLayer(esriAerialUrl,
{maxZoom: 18, attribution: esriAerialAttrib});
var gUrl = 'http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}';
var gAttribution = 'google';
var googlesat = new L.TileLayer(gUrl, {maxZoom: 18, attribution: gAttribution});
var baseLayers = {
'OpenStreetMap': osm,
'ESRI Aerial': esriAerial,
'Google map sat': googlesat
}
L.control.layers(baseLayers, {}).addTo(map);
This piece of code adds a standard control to switch between tile provider layers. It includes two satellite tile providers.
More info : http://leafletjs.com/reference-1.0.3.html#control-layers
I made a more detailed example of my question, but #JulienV came close to what I meant, But it wasn't entirely what I wanted, plus I already found his exact answer in another post. What I wanted was to know how to add more or less maps to the view:
var osmLink = 'OpenStreetMap',
thunLink = 'Thunderforest';
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© ' + osmLink + ' Contributors',
landUrl = 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
thunAttrib = '© '+osmLink+' Contributors & '+thunLink;
var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
var roadmap = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
var satellite = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
var sat_text = L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
});
And then I added each map to the array like this:
if($map_layouts['get_roads']) {
$roads = "\"Roads\": roadmap";
if($baselist == "") {
$baselist = $roads;
} else {
$baselist = $baselist . "," . $roads;
}
}
Then I needed to check if the $baselist wasn't empty:
if($baselist) {
$base_layout = "var baseLayers = {".$baselist."};";
} else {
$base_layout = "";
}
And then of course add the layers to the map:
L.control.layers(baseLayers).addTo(map);
I worked out the code with the google maps included. The osm and thun map was a nice example, but basically what this code does:
First I make if statements in php to see if the roads are included in the button I made. I pass the get_roads inside the array, so that the if statement returns true and then it sets $roads as the roadmap value, which is given in the map examples in the first code of this answer.
Then I check if $baselist isn't empty, because if it's empty it doesn't need a ,, but if it isn't empty, then it gets the $baselist, which would be the previous set value, then a comma and then the new value.
This was the markup of the layers and then I will pass the baseLayers as those values, which will create the maps inside the leaflet view, if the buttons are checked.