I am trying to put Location markers on an USA map similar to the one in this page
http://www.zingchart.com/blog/2012/07/17/interactive-html5-maps-api/
(Place items on map section.)
I am not able to find the JSON attribute for specifying this (The link on it is taking to the site's home page only).
Please help me on how to do this or point me to any documentation on it.
[--EDIT--]
I found a function to get the XY coordinates on the map using the Lat/Lon value and vice-versa (zingchart.maps.getXY(mapid, lonlat, itemid)).. But I am still stuck with placing a marker on that XY point.
[--EDIT--]
Below answers work as expected. I am trying to put markers on US map. I would like to know how to place markers on Alaska/ Hawaii states with lat/lon info since they are placed below california as a separate polygon though they are geographically above the US.
I'm on the ZingChart team, and I can definitely help you out with this!
It's critical that you wait until the map has loaded before finding the XY coordinates. Use the ZingChart 'load' API event listener to wait until the chart has loaded:
zingchart.load=function() {
drawPoints();
};
Inside our drawPoints function, we'll find the longitude and latitude values. If the values are north and east, the numbers will be positive, south and west will be negative. For example, Sao Paulo is located at 46.6333° W, 23.5500° S, so we would use [-46.63, -23.55]. In this map demo, we've placed a marker at Bangalore, which is located at 77.5667° E, 12.9667° N, so we'll use [77.57, 12.97].
var lonlat = [77.57, 12.97];
var bangalore = zingchart.maps.getXY('map', lonlat);
The getXY method returns an array of length 2, with the value at index 0 being the x position and the value at index 1 being the y position for your map.
Now that we have the X Y coordinates for Bangalore in our variable, we can use the addobject API method to place a marker at that location. Below, 'zc' is the same as the id given to the div used to place the chart.
zingchart.exec('zc', 'addobject', {
type: 'shape',
data: [{
x: bangalore[0],
y: bangalore[1],
type: "circle",
size: 3
}]
});
To see the code in its entirety, view the page source of the map demo provided.
Please let me know if you have any more questions!
Related
I have a geography column in database. This column holds the original polygon. Next to it I have another column that holds the simplified version of this polygon. The simplification has been done with geography.Reduce()(I use tolerance of 100) function that operates with Douglas-Peucker algorithm. When the client asks for this area I fetch it from database and do a quick convert into GeoJSON and serve it to my client.
If I query the original polygon it will take good 20 seconds before it is successfully retreived but it works. In the end only problem is the speed and that is why I introdouced the second column that holds the simplified polygon. Fetching this polygon from database happens in an instant but a curious thing happens on the client side.
As you can see multiple markers are shown on my map. None of them are clickable expect the top most(slightly south-west from Melbourne) but this one is actually a marker that I have added. Where do the other ones come from?
Another thing I noticed is the more I reduce simplicity the less of these fanthom markers shows. So if I serve the original polygon as GeoJSON all is fine. As soon as I start simplifying I get these fantom markers.
When I query for this simplified polygon I use geography::STAsText() function. After that I use NetTopologySuite to read this as WKT and create a NetSuiteTopology Geometry object. With this object I create a Feature and use GeoJsonWriter to create the actual GeoJSON.
var query = new SqlQuery("Location")
.Select("LocationServicingAreaSimplified.STAsText()")
.Where("LocationID", SqlOp.Equals, "#LocationID");
// This object query will be convertet to
// SELECT LocationServicingAreaSimplified.STAsText() FROM Location WHERE LocationID = ?
query.Parameters.Add("#LocationID", LocationID);
var simplifiedPolygon = await query.ExecuteScalarAsync<string>();
var wktReader = new WKTReader() { DefaultSRID = 4326 };
var geoJsonWriter = new GeoJsonWriter();
var feature = new Feature
{
Geometry = wktReader.Read(simplifiedPolygon)
};
return geoJsonWriter.Write(feature);
After an extensive research I have concluded that the proces of simplification will produce points when some polygons are oversimplified. google maps will represent the points as markers therefore, the greater the simplification the more points are produced the more markers are present.
I have found an article where it is described how to get rid of these points but haven't yet tested it.
Hope this helps some spatial noob(like me).
I started to use great package react-google-maps. Could you help me how can I get the values of latitude and longitude from inserted (clicked) marker?
If I log returned object I get scope which consist of latitude and longitude.. but I can not access to scopes..
I use something like this example https://tomchentw.github.io/react-google-maps/ with some changes. I want to store in states latitude and longitude from clicked marker.
Thank you.
I assume that you want to get the list of longitude/latitude from the list of Marker within state.
Assuming arr is an array of Marker from google map:
arr.map(x => x.position.lat()) will give you the latitude.
arr.map(x => x.position.long()) will give you the longitude
I am working on a custom game map. This map is basically a raster image, overlayed with some paths and markers. I want to use Leaflet to display the map.
What I am struggling with, is that Leaflet uses Latitude and Longitude to calculate positions, while it uses meters for distances (path lengths, radii of circles, etc).
This is very understandable when dealing with a spherical world like our Earth, but it complicates the custom map, which is flat a lot.
I would like to be able to specify the positions in the same unit as the distances.
Now, by default Leaflet uses a Spherical Mercator projection. According to the Docs, it is possible to define your own projections and coordinate reference systems, but I have been unable to do this thus far.
How would this be possible? Or is there a simpler way?
You should take a look at the simple coordinate reference system (L.CRS.Simple) included with Leaflet:
A simple CRS that maps longitude and latitude into x and y directly. May be used for maps of flat surfaces (e.g. game maps).
You can define the CRS of your L.Map instead upon initialization like so:
new L.Map('myDiv', {
crs: L.CRS.Simple
});
Some further elaboration: As #ghybs pointed out in the comment below and the comment to your question the default sperical mercator projection (L.CRS.EPSG3857) already works in meters. When you calculate the distance between two coordinates, Leaflet returns meters, example:
var startCoordinate = new L.LatLng(0, -1);
var endCoordinate = new L.LatLng(0, 1);
var distance = startCoordinate.distanceTo(endCoordinate);
console.log(distance);
The above will print 222638.98158654713 to your console which is the distance between those two coordinates in meters. Problem is that when using spherical projection, distance between two coordinates will become less the further you get from the equator which will become problematic when creating a flat gameworld. That's why you should use L.CRS.Simple, you won't have said problem.
My map (Mapbox) takes up the whole background of the site so the center is in the middle of the site. But the focus of the map for the user is on the right side because I have content overlapping the map on the left side. When leaflet grabs the location, it's from the center of the map, but it would be more convenient if I could set it to grab the location from the center of the right third of the site, so that way the user won't be centering the map on targets bordering content on the left half of the site.
Is there a way I could set the center or location focus of the leaflet API for the map?
Here's how I have it set up currently,
mapOptions: {
maxZoom: 18,
zoomControl: false,
worldCopyJump: true
},
createMap: function() {
Map.map = L.map('map', Map.mapOptions);
Map.layer = L.mapbox.tileLayer(Map.mapID, {
unloadInvisibleTiles: true,
}).addTo(Map.map);
Map.map.locate({setView: true});
Map.map.addControl(L.mapbox.geocoderControl(Map.mapID));
new L.Control.Zoom({ position: 'topright' }).addTo(Map.map);
},
You can use a combo of panBy() and getSize() to offset the map the width of your overlay.
Here's a snippet that should get you a started:
// Calculate the offset
var offset = map.getSize().x*0.15;
// Then move the map
map.panBy(new L.Point(-offset, 0), {animate: false});
In my example, my overlay is 33% of the width of the map. So I grab the size of the map area, then multiple by 0.15 (this was based on some experimenting to see what the best offset amount was) and use panBy() to offset the map center.
Here's a full example.
If you have multiple markers and want to center the map in their bounds and at the same time you have overlapping container, you can use the fitBounds options (paddingTopLeft, paddingBottomRight, padding).
http://leafletjs.com/reference.html#map-paddingtopleft
First you will need to know the lat and long of the point on the map you want to center on. Then it is simple, just call Map.map.setView passing in your coordinates and zoom level.
Api reference: http://leafletjs.com/reference.html#map-set-methods
If you don't know your coordinates then you can find it by trial and error, just create a marker and add it to the map.
Found this solution by ghybs over on GIS which helped me solve this problem:
Leaflet-active-area
This plugin allows you to use a smaller portion of the map as an active area. All positioning methods (setView, fitBounds, setZoom) will be applied on this portion instead of the all map.
I am programming a basic GUI in MATLAB that utilizes the mapping toolbox. The GUI will display a grayscale image and then plot discrete points over the data, all of this over the necessary map projection. It is important that I plot onto map axes (those created by the axesm command) rather than the vanilla cartesian space. I have no problem doing all this from the command line, but I cannot find a way to implement a GUI version and its driving me nuts.
The problem is that I need to specify the map axes as being the child of the parent figure. The normal axes has a property that can be set, doing something like:
axesHandle = axes('Parent', parentHandle, ...);
or
set(axesHandle, 'Parent', parentHandle);
However, there is no equivalent parent property for the map axes created by the axesm function, so I have no way to manipulate the axes within the figure. How can I do this?
Update: If I create a plot within the map axes in an empty figure, get(figureHandle, 'Children') returns the handle of the axesm object (thanks #slayton!), so the map axes object must be implicitly added to the children of the figure by MATLAB.
Should I be concerned that the map axes do not refer back to the parent figure, or should I just let it be? I wonder if this is a classic case of MATLAB forcing me to not comply with the standards the manual tells me to implement.
From reading your question what I think you are trying to do is grab the handle of the axes object. This can be done as the axes is created using either axes or subplot
a = axes();
a = subplot(x,y,z);
% both return an handle to the newly created axes object
Additionally if the axes is created automagically by a function call like plot or image you can get the axes handle that too:
p = plot(1:10); %returns a handle to a line object
a = get(p,'Parent');
i = image(); %returns a handle to an image object
a = get(i, 'Parent');
Finally, neither of those two options is available you can always get the axes handle from its containing figure with:
a = get(figureHandle, 'Children');
Remember though that this will return a vector of axes handles if your figure contains more than one axes.
Finally when it comes time to draw draw your points to the axes that contains your map image you simply need to call:
line(xPoints, yPoints, 'linestyle', 'none', 'marker', '.', 'color', 'r', 'size', 15)
This will draw the vertices of the line using large red dots.
I'm not sure if this answers your question because the code you provided doesn't line up with the question you asked.
The code you provided looks like you are trying to move an axes from one figure to another. You can totally do this!
f = figure('Position', [100 100 100 100]);
a = axes('Parent', f);
pause
f2 = figure('Position', [250 100 100 100]);
set(a,'Parent', f2);
After much trial and error and reading of documentation, I have found that there is no way to explicitly specify the parent of the map axes. Instead, they are implicitly added on top of the current axes. In the instance that no axes exist in the current figure, calling axesm creates an axes object and then places the axesm object inside. When you take this route, you have to grab the axes object handle by calling gca:
mapAxesHandle = axesm(...);
axesHandle = gca(...);
This makes it frustrating to use the mapping toolbox when writing a GUI from scratch, but that's the way Mathworks makes it happen. Thanks to #slayton for useful info. I'd upvote but my reputation is <15 :(