I want to compare some coordinates given by user with the coordinates in the geojson file, and if the condition turns out to be true then i want to draw a small circular image on that position defined by the coordinates(really small like a symbol or something). What do I have to write inside the d3.json method to access the coordinates from geojson file, compare it and plot an image on it? Any help will be appreciated.
This is a small part of my geojson file
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": {}, "id":"Andhra Pradesh", "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 80.149167, 13.618300 ], [ 80.142031, 13.544708 ], [ 80.126421, 13.584849 ], [ 80.158087, 13.591093 ], [ 80.120622, 13.605812 ], [ 80.149167, 13.618300 ] ] ], [ [ [ 82.258801, 16.689980 ], [ 82.285562, 16.697563 ], [ 82.368074, 16.723877 ], [ 82.311876, 16.602562 ], [ 82.258801, 16.689980 ] ] ],
I believe you'll need another dataset for what you want. These coordinates you have in your geometry collection are used to draw the path. See the documentation:
http://geojson.org/geojson-spec.html#geometry-objects
In other words, those are just the coordinates to the "lines" (borders) you see on the map. I believe you want to compare coordinates for positions inside each state (path), like cities or other POI, is that correct?
In that case, you have two options: You can easily draw a circle or whatever according to the coordinates given by the user, or if these coordinates are cities, you can search for another JSON file with geographic data for these cities, and compare user's input with these coordinates.
Once you have these coordinates (let's call them longitude and latitude), you can plot them like this:
svg.append("circle")
.attr("cx", function() {
return projection(longitude);
})
.attr("cy", function(d) {
return projection(latitude);
})
.attr("r", whatever)
.style("fill", whatever);
svg is the variable that you used to append the SVG, and projection the one you used to set the projection.