I tried to display a lot of marker on a leaflet map. The data of the marker - coordinates, text... - are stored in a text file.
I made a parser who parse the text, put the data in a big array and then i loop on this array to display each marker.
My problem here is that i got many markers - more than 200, and many of them got the same coordinates.
My code loops well but display only the last marker with each coordinates, how can i display them all properly?
After digging the web around i find a solution which seems to pretty fit my issue.
Leaflet allows you to create "markercluster" which can gather marker together.
Here is a live example : http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
Related
I'm trying to work out a variation on the mapbox code provided in this tutorial here: https://docs.mapbox.com/mapbox-gl-js/example/filter-markers-by-input/
But instead of filtering individual points, I'm trying to figure out how to filter polygons from a GeoJSON that have names appended based on an integer feature. Basically, I want to be able to enter the appended name of a polygon into a text box and have the map filter to just that polygon. I'm having difficulty identifying which parts of the code in the example to isolate and graft over. Has anyone tried something like this before?
When you say "filter to just that polygon", I think what you mean (in geospatial terms) is "filter to show only points within that polygon".
You will want to use Turf's "booleanWithin" function.
You will want to change this code:
layerIDs.forEach(function(layerID) {
map.setLayoutProperty(layerID, 'visibility',
layerID.indexOf(value) > -1 ? 'visible' : 'none');
});
You will have to iterate over the points themselves (not just their IDs), and use the booleanWithin function to check whether the point is within the polygon that you have somewhere else loaded.
I am building a map and want to use the leaflet markercluster plugin to cluster any markers that intersect visibly (the icons overlap each other). I can't seem to figure out a way to check whether the markers icons intersect though.
I've examined the documentation and the Marker objects. The marker object has no "bounds" object and has no function to return the bounds of the icon.
Yes, it's possible.
This is implemented in some Leaflet plugins, like Leaflet.LayerGroup.Collision - the technique involves fetching the computed style of each icon's HTML element to get the actual size in CSS pixels, offset those numbers by the relative pixel position of the marker's LatLng, and using a rtree data structure to speed up the calculation of the overlaps. Do have a look at the complete source for LayerGroup.Collision plugin.
Note that this technique only takes into account the rectangular bounding boxes of the icons; while it would be possible to check for the individual transparent pixels, that would involve more complex data structures and a different technique to fetch the opacity of each pixel.
I have 16,000 rows of data in excel.
In this excel, I have census block numbers.
What I want to achieve is that I want to make a map layer for these block numbers.
Then, if I click a polygon, the information of a block number display on the popups, like which state, county, and so on.
How can I do that? Do I have to use geojson files for this?
Because, many exmaples in the mapbox use geojson.
But I don't have any coordinates for these block numbers and 16,000 rows are really big to me. I got only block numbers.
But I got shapefiles for whole state block numbers.It is too big to upload mapbox gl js.
If geojson file is the way to achieve my goal, can someone tell me the orders that I can follow?
Or is there other way, please advise me.
Thanks.
So you have a geometry file ("shapefiles for whole state block numbers") and a data file ("16,000 rows of data in excel"). You want the user to click on a boundary in the geometry, and see data from the data file. You have two main options:
Join the data and geometry first (eg, use geojson-join, then upload to Mapbox as a tileset.
Upload just the geometry. Load the CSV file when the web page loads, then when the user clicks, display something from the CSV file.
I'm using iOS-Charts with Swift to draw line charts, and I'm looking for a way to place a gap between the data points (circles) and the lines themselves.
Something like this: example
I've tried playing around with some values under the drawLinear section of LineChartRenderer.swift, but I don't know enough about Core Graphics to do anything useful.
Having a white outline for the circles is unfortunately not an option, since I'm displaying multiple datasets with images containing transparent layers, and the datasets need to be able to overlap (as in the example image)
Any help would be greatly appreciated - thanks :)
I'd like to colorize russian map with leaflet.But there is a problem with a region (Chukotka Autonomous Okrug), that is placed on the "bend" line of the map. Part of the region appears on the other part of the map (here's a link to the picture http://i.stack.imgur.com/cQSlG.png). I've already tried to use noWrap option, but it didn't help. Any help will be highly appreciated!
That happens when you cross the international dataline. What you want can be done but you've got to edit your geometries. In your case you would need to add 360 to every coordinate you encounter that's left of the prime meridian, thus every negative longitude. Mapbox has a nice example on the matter:
https://www.mapbox.com/mapbox.js/example/v1.0.0/cross-date-line/