I have a leaflet map which display pop-ups that give the name of a country when clicked. How can I add additional properties and have them all displayed, similar to this map http://lotrproject.com/map.
For example, how can I make my Iceland pop-up feature display the properties for "name" and "language", rather than just "name".
var countries = [ { type: "Feature", properties: { name: "Iceland", language: "Icelandic"}, geometry: { type: "Point", coordinates: [2535,911] } }, { type: "Feature", properties: { name: "Ireland" }, geometry: { type: "Point", coordinates: [1324, 1580] } }, { type: "Feature", properties: { name: "England" }, geometry: { type: "Point", coordinates: [1498, 1662] } }, { type: "Feature", properties: { name: "France" }, geometry: { type: "Point", coordinates: [1608, 1918] } }, { type: "Feature", properties: { name: "Italia" }, geometry: { type: "Point", coordinates: [1923, 2093] } }, { type: "Feature", properties: { name: "Hispania" }, geometry: { type: "Point", coordinates: [1374, 2148] } }, ]; var layerCountries = L.geoJson(countries, { // correctly map the geojson coordinates on the image coordsToLatLng: function(coords) { return rc.unproject(coords); }, // add a popup content to the marker onEachFeature: function (feature, layer) { if (feature.properties && feature.properties.name) { layer.bindPopup(feature.properties.name); } }, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#800080", color: "#D107D1", weight: 1, opacity: 1, fillOpacity: 0.8 }); } });
أكثر...
For example, how can I make my Iceland pop-up feature display the properties for "name" and "language", rather than just "name".
var countries = [ { type: "Feature", properties: { name: "Iceland", language: "Icelandic"}, geometry: { type: "Point", coordinates: [2535,911] } }, { type: "Feature", properties: { name: "Ireland" }, geometry: { type: "Point", coordinates: [1324, 1580] } }, { type: "Feature", properties: { name: "England" }, geometry: { type: "Point", coordinates: [1498, 1662] } }, { type: "Feature", properties: { name: "France" }, geometry: { type: "Point", coordinates: [1608, 1918] } }, { type: "Feature", properties: { name: "Italia" }, geometry: { type: "Point", coordinates: [1923, 2093] } }, { type: "Feature", properties: { name: "Hispania" }, geometry: { type: "Point", coordinates: [1374, 2148] } }, ]; var layerCountries = L.geoJson(countries, { // correctly map the geojson coordinates on the image coordsToLatLng: function(coords) { return rc.unproject(coords); }, // add a popup content to the marker onEachFeature: function (feature, layer) { if (feature.properties && feature.properties.name) { layer.bindPopup(feature.properties.name); } }, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#800080", color: "#D107D1", weight: 1, opacity: 1, fillOpacity: 0.8 }); } });
أكثر...