I'm trying to get points out of a geojson file but the coordinate of the points are in the opposite way instead of (x,y) as opposed to (y,x).
On the map I am getting a place that is not really on the map.
How can i get it right in javascript?
This is my code that takes out the points and binds a popup for each point on a map:
jQuery.getJSON("data/london_pois.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data,{
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
});
I realized that my issue was not a programming issue, but rather the data set was too large.
After removing a some entries, everything worked fine.
Related
I have a SVG based non geographical layout with image overlay.
var map = L.map('map', {
crs: L.CRS.Simple
});
var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);
map.fitBounds(bounds);
I traced out different shapes on top of this image.
Now i want to retrieve all the shapes drawn, as a json object array and save it to database. Requirement is to replicate the same shapes later some point by fetching the json object array from database. Is it possible in leaflet.js? I want some thing like below
L.getObjectsArray(map) will give me
var leafletAllShapesConfig = [Object1,Object2,Object3,Object4,Object5]
Now reading the object array i can be able to draw the same shapes like L.draw(leafletAllShapesConfig).
Is this possible and any in built method available to achieve the same? If not please give some idea how can i achieve that.
Yes Leaflet has a built in method: L.GeoJson()
Put your shapes into a featuregroup instead to the map.
var fg = L.featureGroup().addTo(map);
L.marker(latlng,options).addTo(fg);
Then you can get the geojson from the featuregroup:
var gjson = fg.toGeoJSON()
Now you can save this geojson as string with: var str = JSON.stringify(gjson)
To add the shapes back to the map use:
var json = JSON.parse(str);
fg.clearLayers() //To clean the map from the shapes
L.geoJSON(json, {
onEachFeature: function(feature, layer) {
//Code
}
}).addTo(fg);
Now you have your shapes back on your map, but without options/properties like color. GeoJson don't convert them too. You can solve this problem by looping through the layers in the featuregroup and add them manually to the gjson and add the layer.options to the gjson.properties.options and later by adding to the map, read the options from gjson out.
After some research over leaflet.js, i figured out an event "pm:drawend" from "geoman-io/leaflet-geoman-free" plugin Github link https://github.com/geoman-io/leaflet-geoman
map.on('pm:drawend', e => {
console.log(e); //Gives array of all shapes including background image and SVG
});
Above snippet gives me an array of all shapes available(including background image and SVG container), the moment i finish adding any active shape. For reference including the output snippet here which served my purpose.
By default leaflet includes background image as first item. Then follows the SVG container(where my map resides), then all shapes.Hope this will be use to some one else.
So I am making a Leaflet map. I am using a json which lists countries as Latlng points, and their corresponding attribute (called CTH values). I am trying to use this value to set the area of circle markers on these Latlng points to be proportional to the CTH value, but I am struggling to figure out how.
This is what I've written
function addCTHValueMarkers () {
CTHValueLayer = L.geoJSON(CTHValue, {
pointToLayer: function (feature, latlng) {
return new L.circleMarker(latlng, {
fillOpacity: 0.6,
radius: setRadius(feature.properties.CTHValue)
})
}
});
CTHValueLayer.addTo(map);
}
I was originally going to use the radius but I need area to make them actually proportional, can someone show me how I set the area? Do I make a seperate function to work out area, then pass this to the radius? How do I do this?
Whenever I try to refer to (feature.properties.CTHValue) outside of the CTHValueLayer = L.geojson(CTHValue { }) argument it doesn't work, can someone show me how I can access the CTH Value from within my geojson in a seperate function, so I can pass the CTHValue to an area calculation
So probably you need to use L.circle instead L.circleMarker.
Because circleMarker it's a Marker and doesn't have size
I have a mapbox.js map but the parameter zoom doesn't seem to be doing anything
and I can't figure it out in the documentation. whatever I set zoom to the zoom level always defaults to my project zoom level Here is the code:
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
$(document).ready(function() {
var map = L.mapbox.map('map', 'nhaines.hek4pklk', {
zoom: 1
});
// disable drag and zoom handlers
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// disable tap handler, if present.
if (map.tap) map.tap.disable();
});
It took me a lot of digging around but I figured this out on my own. The dev's didn't respond yet. We were going about this all wrong. Here's what to do:
First, create the MapBox object, but set zoomAnimation to false. This question helped me realize that trying to setZoom while a CSS3 animation was in progress wouldn't ever work because it's tough to break out of. At least that's what I think is going on. Setting zoomAnimation to true allows the map to animate in and bypasses any custom zoom levels, so clearly this is very important.
var map = L.mapbox.map('map', 'username.map_id', {
zoomAnimation: false
});
Next, create a polygon layer and add to map from map's geojson. You find this within your MapBox projects > info tab. (In my case this geojson happens to contain the lat/lng coords of a polygon but your case may be different. featureLayer() should still add the geojson either way.)
var polygonLayer = L.mapbox.featureLayer().loadURL('http://your/maps/geojson').addTo(map);
After polygon layer (or whatever your lat/lng coords are of) has been added to map
polygonLayer.on('ready', function() {
// featureLayer.getBounds() returns the corners of the furthest-out markers,
// and map.fitBounds() makes sure that the map contains these.
map.fitBounds(polygonLayer.getBounds());
map.setView(map.getCenter(), 10);
}
Apparently fitBounds satisfies the map requirements to allow setView to be called on it, since now you can just call the map object directly to get the center lat/lng.
I haven't tested this in simple cases - I adapted this code from mine which checks if an address's lat/lng coords fall within a polygon while iterating over a series of MapBox maps. It should get you going though. Hope it helps!
I have a leaflet.js map that has points and linestrings on it that come from an external JSON file.
If I add:
map.setView(new L.LatLng(0,0), 10);
It will centre the map on the latitude and longitude 0,0. How can I set it so the map centre and zoom fit all of the points from the JSON on it?
You could add all of your layers to a FeatureGroup which has a getBounds method. So you should be able to just say myMap.fitBounds(myFeatureGroup.getBounds());
The getBounds method for L.FeatureGroup is only available in the master branch (not the latest version, 0.3.1), for now at least.
Similar case with me. I drawn all the markers from GeoJson data. So I written the function, which gets called repeatedly on button click. Just try if it suits your requirements.
function bestFitZoom()
{
// declaring the group variable
var group = new L.featureGroup;
// map._layers gives all the layers of the map including main container
// so looping in all those layers filtering those having feature
$.each(map._layers, function(ml){
// here we can be more specific to feature for point, line etc.
if(map._layers[].feature)
{
group.addLayer(this)
}
})
map.fitBounds(group.getBounds());
}
The best use of writing this function is that even state of map/markers changed, it will get latest/current state of markers/layers. Whenever this method gets called all the layers will be visible to modest zoom level.
I needed to do this when showing a user directions from his origin to a destination. I store my list of directions in an array of L.LatLng called directionLatLngs then you can simply call
map.fitBounds(directionLatLngs);
This works because map.fitBounds takes a L.LatLngBounds object which is just an array of L.LatLng
http://leafletjs.com/reference.html#latlngbounds
I don't have too much experience with JavaScript and Google Maps Api.
What I want to achieve:
I have a map, where user can either put marker or draw polygon. I'm using gmap3 plugin and I've managed to do everything I wanted with markers (like adding, editing, dragging, removing etc), but I have problem with polygons.
Here's the basic code:
$('#map-mappoints').gmap3(
{
action:'init',
options:{
zoom: 7
}
,
events: {
click: function(event, data) {
if($(".map #poly").hasClass('active')){
placePoly(data.latLng);
} else {
placeMarker(data.latLng);
}
}
}
},
{
action:"autofit"
}
);
function placePoly(location) {
$('#map-mappoints').gmap3({
action: 'addPolygon',
options:{
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
},
callback: function(polygon){
var path = polygon.getPath();
path.push(location);
console.log(path);
}
}
)
}
I can see in console that it creates poly, but it adds only one path element, which is logic as it's triggered after each click on map, but I have no idea how I should make it to continue adding new elements to polygon, and then let user stop (probably by some button in toolbar), and create new after clicking "new poly".
Thank you for any hints.
ps.
English is not my native language, so I'm sorry for any mistakes, I've tried to avoid them ;)
Read below the title Parameters of gmap3
http://gmap3.net/documentation.html
For it main use, gmap3 takes objects as parameters. Each object is an
action to execute. The actions are executed in their order in the
parameters list, and each time, once the previous is finished. This
example first initialise the google map, and then add two markers
path
The ordered sequence of coordinates that designates a closed loop. Unlike polylines, a polygon may consist of one or more paths. As a result, the paths property may specify one or more arrays of LatLng coordinates. Simple polygons may be defined using a single array of LatLngs. More complex polygons may specify an array of arrays. Any simple arrays are convered into MVCArrays. Inserting or removing LatLngs from the MVCArray will automatically update the polygon on the map.
The MVCArray is a mutable array, so you can add more lat,long coordinates to the array and the polygons will automatically be updated.
Hope this helps you out!
greetz