I have an array of users containing their zip codes and i would like to display their location based on their zipcode on Google Maps but i cannot turn my zipcode into a GeoJSON format. Help me
From what I looked up GeoJSON uses latitude and longitude right?
If that's the case you can just use another api that tells you latitude and longitude based on the zip code you input in its query.
Using google api:
http://maps.googleapis.com/maps/api/geocode/json?address={zipcode}
extract the lat/lon coordinate values from the JSON above:
var zipCode; //from your array of users
$.getJSON("http://maps.googleapis.com/maps/api/geocode/json?address=" + zipCode, function (json){
var latitude = json.results[0].geometry.location.lat;
var longitude = json.results[0].geometry.location.lng;
//Handle your geoJSON here, I'm just guessing on this part I don't know geoJSON
var geojsonFeature =
{
"type": "Feature",
"properties":
{
"name": "",
"amenity": "",
"popupContent": ""
},
"geometry":
{
"type": "Point",
"coordinates": [latitude, longitude]
}
};
L.geoJSON(geojsonFeature).addTo(map);
});
Related
addGeoJson is not working in google map for my file
please check below code that I am using in javascript
//create the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: {lat:49.79, lng: -8.82}
});
// Load GeoJSON.
var promise = $.getJSON("Sensitive_Areas_Nitrates_Rivers.json"); //same as map.data.loadGeoJson();
promise.then(function(data){
cachedGeoJson = data; //save the geojson in case we want to update its values
console.log(cachedGeoJson);
map.data.addGeoJson(cachedGeoJson,{idPropertyName:"id"});
});
I have downloaded this file from here
you can check my JSON file
Sensitive_Areas_Nitrates_Rivers.json
also, you can check this link with polygon
I have used below JSON format so you can check it
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "EPSG:27700"
}
},
"features": [
{
"type": "Feature",
"id": 1,
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[
500051.6875,
224280.03130000085
],
[
500047.2812999999,
224277.6875
],
[
499977.5937999999,
224242.625
],
[
499976.6875,
224242.21880000085
]
]
]
},
"properties": {
"OBJECTID": 8,
"type_of_sa": "SA_N",
"datedesign": 1025136000000,
"name": "Rivers Itchen",
"length_km": 12,
"uwwtd_code": "UKENRI134",
"shape_Length": 12172.080443901654
}
}
]
}
[500051.6875, 224280.03130000085] - [X, Y] coordinates may be in EPSG: 27700 to EPSG:4326, Now we need to display these coordinates on google map, Is there any solution for this?
Since Google Maps expects GeoJSON to be in EPSG:4326, Sensitive_Areas_Nitrates_Rivers.json needs to be reprojected. QGIS, for instance, could be utilized for that matter (refer docs for a details)
Reprojected Sensitive_Areas_Nitrates_Rivers.json layer will be displayed like this:
You are getting coordinates in metres. For displaying in google map you need to convert it into [Lng, Lat].
For converting metres to [Lng, Lat] you need to change the projection from EPSG: 27700 to 4326
then only you are able to get this geojson in [Lng, Lat]
Tool you can use: QGIS Desktop 3.4.14
Link: https://qgis.org/en/site/forusers/download.html
After convert you need to export this file as feature.
I'm trying to create a function that takes a date as argument that will display the data only. This is to map it with leaflet.
The time series data looks like this:
(it's in JSON)
Time - DetectorID
0 - 5
1 - 3
2 - 4
and the geoJson that the data is mapped against is as follows:
var myGeojsonData =
{
"features": [
{
"geometry": {
"coordinates": [
144.829434,
-37.825233
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
"IDnumber": "DetectorID"
},
"type": "Feature"
},...etc
I am trying to take the data from the time series with the following javascript code.
function selectdata(Time,timeseriesdata) {
output = timeseries.Time["(Time)"]
return output(time)
}
I used the pandas function to transform this to Json from a dataframe.
I am currently working on a blog using the template "Fly to a location based on scroll position". However, i have a huge amount of points to display due to the use I'm making of it. Therefore, I intend to create a table that would contain the coordinates of the marker to display on the map. However, I don't manage to get a fully functional table. I can see in my code that the for loop is being ran, but the markers don't display.
I know i have to use function to put parameter but i don't know how whith Geojson.
Could you help me with this issue?
Ruman
code
var tab_coordo = [-5.949547290802002,54.6500264517435,-9.42651,52.97188,-9.465258121490479,51.94015569078675,12.352237701416016, 45.4577225021236];
for (tab_coordo = 0; tab_coordo < tab_coordo.length; tab_coordo++) {
var geojson ={
"features": [{
"type": "Feature",
"geometry": {
"type": "Point", "coordinates": [tab_coordo, tab_coordo++]//ireland cavehills
},
"properties": {
"title" : "jaimiejourneys",
"video": ("<iframe src='https://www.instagram.com/p/BWbCDZKA-Nu/embed' width='200' height='200' frameborder='0' scrolling='no'></iframe>")
}
},
]
}
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el, { offset: [-50 / 2, -50 / 2] })
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<p>' + marker.properties.video + '</p>'))
.addTo(map);
});
}
It resolved thanks for helping :)
var tab_coordo = [
-5.949547290802002, 54.6500264517435,
-9.42651,52.97188,
-9.465258121490479,51.94015569078675,
12.352237701416016, 45.4577225021236
12.411632537841797, 45.488298185683945
];
var coordo= tab_coordo.length;
for (var inc = 0; inc < coordo; inc=inc+2) {
//var inc_coordo = inc;
var geojson ={
"features": [{
"type": "Feature",
"geometry": {
"type": "Point", "coordinates": [tab_coordo[inc], tab_coordo[inc+1]]
},
"properties": {
"title" : "jaimiejourneys",
"video": ("<iframe src='https://www.instagram.com/p/BWbCDZKA-Nu/embed' width='200' height='200' frameborder='0' scrolling='no'></iframe>")
}
},
]
}
New to Turf JS and have been looking at integration via the MapBox API. Using the default MapBox.Outdoors map and have been following some of the example TurfJS documentation http://turfjs.org/docs/#point but can't seem to get my point plotting on top of the map. Any suggestions greatly appreciated, the error seems to be in my list line of code in relation to the FeatureLayer.setGeoJSON but I can't figure it out. If I leave the last line active the map doesn't load, if I comment it out the map loads but no pin shows up?
<BODY>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWFya2d1ayIsImEiOiJjaXNsd2VhMG8wMDdrMzNybmticDJhdnZsIn0.KXcvejg6QplSsAlj8aimjA';
var point = turf.point([35.463453, -97.514914], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
.featureLayer.setGeoJSON(point); // If I comment this line out the map loads with no pin. If I leave this line active the map doesn't load at all?
</SCRIPT>
</BODY>
I think the problem is that you're trying to add geojson to the map without converting it first. You need to convert the geojson to a format that leaflet can use. Here is an example that should work for you. It will also bind a popup to the point marker that will display the properties for you. The style part can be done either statically (like for all properties except title) so that it would be applied to all points within the feature collection, or dynamically using each features properties (as is done with title).
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([35.463453, -97.514914], 19);
var featureCollection = {"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"title": "OKC Thunder"}, "geometry": {"type": "Point", "coordinates": [35.463453, -97.514914]}}]};
L.geoJson(featureCollection, {
onEachFeature: function (feature, layer) {
layer.bindPopup(""+feature.properties+"<br />");
},
style: function (feature) {
style = {
"title": feature.properties.title,
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
};
return style
}
}).addTo(map)
I think you should use the set marker function that mapbox makes available to you. So you can skip creating a feature layer and just use the mapbox-marker function. It is documented here:
https://www.mapbox.com/mapbox.js/api/v3.0.1/l-marker/
There is also a description of how to create a simple marker here:
https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/
For the code you provided you could just skip the creation of a geojson object via turf.point and just use this:
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker([-97.514914, 35.463453], {
icon: L.mapbox.marker.icon({
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
})
}).addTo(map);
Or if you want to use geojson with turf.point you could also do it that way:
var point = turf.point([-97.514914, 35.463453], {
"title": "OKC Thunder",
"description": "100 W Reno Ave, Oklahoma City",
"marker-color": "#6BC65F",
"marker-size": "large",
"marker-symbol": "basketball"
});
var coords = point.geometry.coordinates;
var map = L.mapbox.map('map', 'mapbox.outdoors').setView([-97.514914, 35.463453, ], 19);
L.marker(coords, {
icon: L.mapbox.marker.icon(point.properties)
}).addTo(map);
Also make sure that you need to flip your point coordinates from
[35.463453, -97.514914] to [-97.514914, 35.463453] to match the geojson specification which is "projected coordinates, longitude, latitude for geographic coordinates"
http://geojson.org/geojson-spec.html#id2
I'm trying to access data in this JSON (see below) file such as type, properties, etc. using:
data = new google.maps.Data();
var json = data.loadGeoJson('insert-url-here');
for (var i=0; i < json.length; i++) {
var obj = json[i];
console.log(obj.coordinates);
}
I get an error on the first line of the for loop Cannot read property 'length' of undefined. I want to zoom into the object by reading its coordinates value.
google.maps.addListener(data, 'click', function () {
obj.setZoom(10);
}
What am I doing wrong?
JSON sample:
"features": [{ "type": "Feature", "properties": { "id": 18, "geometry": { "type": "Point", "coordinates": [ -34.397, 150.644 ] }
To actually retrieve the coordinates property you need to do this:
var json = {"features": [{ "type": "Feature", "properties": { "id": 18, "geometry": { "type": "Point", "coordinates": [ -34.397, 150.644 ]}}}]}
document.write(json.features[0].properties.geometry.coordinates);
How is this JSON build
object
- property -> features (Array, length: 1)
[ Object
- property -> properties (Object)
- property -> geometry (Object)
- property -> coordinates (Array, length: 2)
]
var json = data.loadGeoJson('insert-url-here');
the json variable here is returning as a undefined object causing the error. Also better use another variable name
whenever you get the json returned, you can use something like eval() to return a javascript object. so that you can access coordinates using json.features[0].properties.coordinates
features here is an array so you need to go through them