How could I go about retrieving the value property from the geoJSON when I click on a specific map marker (leaflet.js)? I’ve tried with the following and similar code but I can’t seem to get it to work.
Sample geoJSON
var geojsonFeature = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"marker-color": "#f85047",
"marker-size": "medium",
"value": 130
},
"geometry": {
"type": "Point",
"coordinates": [
146.3622826337814,
-41.187067757423826
]
}
},
]
};
JS
marker.on('click', function(e){
alert(this.geojsonFeature.features.properties.value);
});
Here is the JSFiddle
Based on the code you show in the question:
alert(geojsonFeature.features[0].properties.value);
Related
I have GeoJSON data that contains URLs. Not all of the features have url data. I have a pop up which shows the name and a link to the url. I'd like to be able to only show the link to URL when the feature URL is not null but will always show the name as a minimum. My code is below:
const tackleshop_point = {
"type": "FeatureCollection",
"name": "tackleshop",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"gid": 1,
"name": "test 1",
"url": "www.google.com"
},
"geometry": {
"type": "Point",
"coordinates": [-2.284362363619518, 50.983444094390933]
}
},
{
"type": "Feature",
"properties": {
"gid": 7,
"name": "test 2",
"url": null
},
"geometry": {
"type": "Point",
"coordinates": [-2.283893608524902, 50.981411456895998]
}
}
]
}
const tackleshop = L.geoJSON(tackleshop_point, {}).bindPopup(function(layer) {
let cap_name = layer.feature.properties.name.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
return `<p>${cap_name}</p><a href="http://${layer.feature.properties.url}" target="_blank">View<a>`
/******/
;
}).addTo(map);
Instead of using the bindPopup method with a function, which finds out too late that the feature does not have a URL to show, in which case you actually want no popup, you can leverage the onEachFeature option of the L.geoJSON factory to attach a popup conditionally:
A Function that will be called once for each created Feature, after it has been created and styled. Useful for attaching events and popups to features.
const tackleshop = L.geoJSON(tackleshop_point, {
onEachFeature(feature, layer) {
const url = feature.properties.url;
if (url) { // Attach the popup only when the url is specified
layer.bindPopup(`<a href="http://${url}">View<a>`);
}
}
}).addTo(map);
I am loading markers from a JSON file (located here):
map.data.loadGeoJson('https://api.myjson.com/bins/tz9ze');
What I am trying to achieve:
load name from the json node properties and display it as a title.
load icon from the json node properties and display it as the marker icon.
How can i achieve that?
Use a Style function (from the documentation):
Declarative style rules
If you want to update the style of a large number of overlays, such as markers or polylines, you typically have to iterate through each overlay on your map and set its style individually. With the Data layer, you can set rules declaratively and they will be applied across your entire data set. When either the data, or the rules, are updated, the styling will be automatically applied to every feature. You can use a features properties to customize its style.
Like this:
map.data.setStyle(function(feature) {
return {
icon: feature.getProperty("icon"),
title: feature.getProperty("name")
}
});
proof of concept fiddle
JSON data:
//JSON file content:
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.29182, 32.917633]
},
"properties": {
"name": "Adrian",
"icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.0611, 33.2815]
},
"properties": {
"name": "Chase",
"icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [34.8621, 33.0613]
},
"properties": {
"name": "Lincoln",
"icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [35.1551, 33.2527]
},
"properties": {
"name": "Jayden",
"icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [34.9047, 33.0816]
},
"properties": {
"name": "Cameron",
"icon": "http://maps.google.com/mapfiles/ms/micons/mechanic.png"
}
}]
};
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 33.2815,
lng: 35.0611
}
});
// Load GeoJSON.
map.data.loadGeoJson('https://api.myjson.com/bins/tz9ze');
map.data.setStyle(function(feature) {
return {
icon: feature.getProperty("icon"),
title: feature.getProperty("name")
}
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
I'm trying to render multiple points using Mapbox but it only displays the last one. I've added the feature parameter but nothing. This should render the two markers but i don't know why it doesn't. I'm not getting any errors in the console.
I'm stuck and can't find a way to solve it. Help?
This is the code responsible for the points.:
map.on('load', function() {
map.loadImage('images/celltower.png', function(error, image) {
if (error) throw error;
map.addImage('tower', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [21.42559803007430, 42.00038270989050]
},
"geometry": {
"type": "Point",
"coordinates": [21.38529272846381, 42.0080397578202]
}
}]
}
},
"layout": {
"icon-image": "tower",
"icon-size": 0.25
}
});
});
});
Thanks :)
You have a duplicate geometry key. Judging by the fact that features is an array, I would guess this is the proper way to do it:
map.on('load', function() {
map.loadImage('images/celltower.png', function(error, image) {
if (error) throw error;
map.addImage('tower', image);
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [21.42559803007430, 42.00038270989050]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [21.38529272846381, 42.0080397578202]
}
}]
}
},
"layout": {
"icon-image": "tower",
"icon-size": 0.25
}
});
});
});
According to the GeoJSON specification, there should be a way to specify multiple points. E.g.:
"features": [{
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": [
[21.42559803007430, 42.00038270989050],
[21.38529272846381, 42.0080397578202]
]
}
}]
I'm trying to simulate city traffic movements (at the moment I'm only into vehicles) but I'm having a problem.
What happens is that I'm trying to simulate 1 car per point at the map, but I don't know how to duplicate a certain layer (and each one has a different route), for example this one:
map.addSource('point', {
"type": "geojson",
"data": pointOnCircle(0)
});
map.addLayer({
"id": "point",
"source": "point",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf"
}
});
I don't know if I could just loop and generate N points with different names or do it in another way.
Here's a video of what I've done until now (for simulating it I created 2 different layers because I didn't know how to duplicate them) :
https://www.youtube.com/watch?v=xWZD9aBUFlg
You should put all your points in the one data layer:
map.addSource('points', {
"type": "geojson",
"data": pointsOnCircle(0) // change this function to return multiple features
});
map.addLayer({
"id": "points",
"source": "points",
"type": "circle",
"paint": {
"circle-radius": 10,
"circle-color": "#007cbf" // possibly make this a data-driven function
}
});
Your GeoJSON data source would look like:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
146.25,
-37.16031654673676
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
138.515625,
35.460669951495305
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-81.5625,
33.43144133557529
]
}
}
]
}
In order to create an interactive map consisting of several layers I use the plugin leaflet-ajax with downloading of the files. geojson. When you direct at the object of the layer, the attribute information (objects attributes) displays.
It is required to include a link to the html page in a number of the objects attributes. I rack my brains over this task a week, please, help me know how to do it!
The code is given below.
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"id": 2,
"date": "2012\/02\/05",
"material": "plastic",
"Number": 1,
"support,feeder": "2 2"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[34.377387101428354, 54.063054027736584]
]
}
}, {
"type": "Feature",
"properties": {
"id": 4,
"date": "2012\/02\/05",
"material": "plastic",
"Number": 1,
"support , feeder": "4 2"
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[34.378052287959541, 54.062481025595972]
]
}
}, ]
}
Looks like this is happening because you are never actually adding the layers to the map. Make sure to add map.addLayer(dorogi) for each one of those AJAX layers after you initialize them.
Or you can watch the data:loaded event and add them after all data has been downloaded. Docs at https://github.com/calvinmetcalf/leaflet-ajax