I am currently working on a Next.js-project, but I’m just a beginner.
My Web-application should display a react-leaflet-map with clickable tiles.
I am using wordpress headless with Next.js. Inside wordpress I use woocommerce. So each of my clickable tiles represents a single product. I also use the woocommerce api to get the meta-information from my products. Is there a way to connect the GeoJSON, which displays the tiles, and the endpoint of my products? Both should basically be JSON-files (or at least they can both be represented in a JSON-file). I tried to manually add some product-infos to the GeoJSON, but this makes it static and not dynamic.
Maybe I could loop the infos of the endpoint though the tiles in GeoJSON?
My goal is to click a tile and then render all the (important) product-infos (my tiles are the products). And when I change something on wordpress e.g. a picture of a tile/product it should be automatically be updated in the GeoJSON. Does anybody have an idea how to realize something like that?
Here I have screenshots of my product-endpoint and my GeoJSON-file. They generally have a similar structure (Same amount of tiles as products)
geojson
endpoint
Thank you so much in advance!
Related
I need to generate a transparent image to apply on map similar to these:
Image_1or Image_2
I need to generate this image from a dataset: I have many data points (with lat and long) and I would to generate this image (server side) to show density on map of my data.
Know you something (libraries, or best way to solve my problem) about it?
Those are heatmaps. Google Maps already has this capbility, so you should check out their sample and the documentation. It can be as basic as loading in your data points and applying them as a layer or you can do much more customization.
I'm having a hard time with this project: https://groups.google.com/forum/#!topic/leaflet-js/Vl56hyRp1i8
I hope you guys can help me with this last step.
There will be hundreds of thousands of markers but only the one you search for will be displayed. The content of the tooltips will have to be submitted through a form. I will not know the position for the markers until the mosaic is rendered.
Once the mosaic is rendered we have the position of the markers and I need to be able to search for any marker (by it's ID) and zoom+pan to it while displaying the marker and it's tooltip.
For example if I want to make a mosaic of 500x500 pictures this is what will happen:
we wait for users to submit a picture each until we have 250.000 pictures.
the tooltip meta content will be submitted along with each picture from the users (1 picture for each user) - this is also when the marker ID will be generated
now that we have 250k pictures we can render the mosaic, after the mosaic is complete I will have a text file containing the name and location of each individual picture by row+column
I need to use this file to fill in the position of the marker for each user's picture
I need to be able after this, to display only markers that you search for
when you search for a marker it will be by it's ID so it will be accurate and also I need the zoom+pan function here
when you click on a picture (marker) I need for that marker to appear (unhide the tooltip).
If anybody can help me please, this project is very cool and I would hate to get stuck on it. I will give proper credit and stuff. If you are really good I am even considering monetary rewards.
Thanks.
I suggest to follow this workflow:
For data drawing and editing I use Leaflet plugin leaflet.draw - .
For store data in GeoJSON format I use Leaflet function toGeoJSON(); like that var myMarkers = new L.FeatureGroup();
map.addLayer(myMarkers);
....
// get json
var myMarkersJson = myMarkers.toGeoJSON();
myMarkersJson I upload to MySQL database and store data as json. You can read more about sending json to MySQL using js/jquery here.
For analysis of data I use jQuery parseJSON
For uploading json data again to leaflet map, I use Leaflet function geoJSON();
I think this workflow is the easiest way to store, search and display data in leaflet from MySQL. But this solution may not be suitable for big data analysis.
I've developed a HTML application that displays a map. This map has many fixed markers (they do not change in time).
Due to that:
I want to speed up the application
I want to hide the marker position from malicious users (so they can't use the information I've gathered for they're own porpose)
I want to convert the markers to a tile layer.
I've been googleing without success how to do this. Anyone has faced this problem and has a nice easy solution?
Thanks!
If the markers never change, there is a great solution:
Mapbox.
You can create your map with the markers, then the mapbox servors will send the tiles with the markers.
You can use a quadkey. It'similar to a quadtree. You can download my PHP class hilbert-curve # phpclasses.org. It also uses a quadkey.
i am trying to make a custom page that would look like this
if i have a page where you can upload an image and enter description which feeds into a sql dB using PHP, how could one create a map of image thumbnails instead of markers? this photo was taken from: http://www.blocsoft.com/bmap/ but after browsing thru their site i didnt see anything about image thumbnails as markers
An alternative, but less flexible, approach would be to store the photographs in Panoramio and enable the maps Panoramio layer http://code.google.com/apis/maps/documentation/javascript/layers.html#PanoramioLibrary
You're going to want to do this via Javascript.
See http://code.google.com/apis/maps/documentation/javascript/overlays.html#SimpleIcons
Example # http://code.google.com/apis/maps/documentation/javascript/examples/icon-simple.html
Basically, you can use PHP to populate the markers within the javascript markup, then let JS init it.
I have a map of several counties I need to turn into a county select menu (i.e clicking Leicestershire will select Leicestershire.
I am using a php built system that this map will need to return the appropriate value to. I am thinking this will be a get in the url, checked for valid values in the backend.
How would you approach this? A html co-ordinate map? Some sort of Javascript? Flash?
I am aware all those solutions have one drawback or another. Does anyone know a better way of doing this? Or an existing opensource project?
Just an idea, if I read your problem correctly: I would personally use the Google Maps API for this. Plot each county onto your custom Google Map, then when you click each marker an info window could appear with "Select this County". Click the link and pass a value through the URL to your PHP script.
Used a html map system. Dreamweaver made it easy (first time I've used the design screen seriously)